• Spieleprogrammierung mit HMTL/CSS & JavaScript am Beispiel Hangman

    Spieleprogrammierung mit HMTL/CSS & JavaScript am Beispiel Hangman

    08.09.2011 in Webentwicklung und Webadministration von pascal-bajorat

    • Kategorie: Webentwicklung und Webadministration
    • Erstellt mit Programmversion: Panic Coda
    • Kompatibel ab Programmversion: Alle Code-Editoren
    • Dateiformat (Video): .mp4
    • Dateigröße (Video): 40.6 MB
    • Dateiformat (Arbeitsdatei): .zip
    • Dateigröße (Arbeitsdatei): 146 KB
    • Videolänge: 22 Minuten
    • Bisherige Zugriffe: 116
    In diesem Video-Training möchte ich euch erklären, wie ihr ein einfaches Spiel auf Basis von HTML, CSS und JavaScript programmieren könnt. Bei dem Spiel handelt es sich um das bekannte Galgenmannspiel (Hangman, Galgenmännchen, usw.), das vor allem in Schulen sehr beliebt ist. Da die HTML- und CSS-Programmierung für dieses Spiel relativ einfach ist, werde ich diese nur überfliegen, den JavaScript Code, der das eigentliche Spiel ausmacht, erkläre ich genau. Es ist also etwas Grundwissen in HTML und CSS erforderlich, es ist aber wirklich ganz leicht; das meiste ist JavaScript-Code.

    Das fertige Spiel sieht später so aus: http://www.galgenmann-spiel.de/

    Ihr könnt euch gerne die Arbeitsdaten herunterladen; diese enthalten die Illustrator-Datei mit Galgen und Männchen sowie sämtliche HTML-, CSS- und JavaScript-Dateien für das Spiel.
    Zum Downloadmanager hinzufügen Video herunterladen (40.6 MB) Video direkt anzeigen Arbeitsmaterialien herunterladen (146 KB)
     
DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

HTML5- & CSS3-Video-Training

Das HTML5- & CSS3-Video-Training stellt mit seinen 8 Stunden Video-Trainings ein außerordentlich umfassendes und praxisbezogenes Lehrwerk zum Webdesign und zur Webentwicklung dar.

  • Alle wesentlichen Grundelemente von HTML5 & CSS3 erklärt.
  • Optimaler Praxisbezug: Die Umsetzung von drei modernen Weblayouts in HTML5 & CSS3 von A-Z.
  • Praxis-Tipps & hilfreiche Tools zur Webentwicklung.
Jetzt informieren

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

Kommentare

  • Alternative Portrait von devnull4711

    devnull4711

    26.04.2012 - 10:42

    Ein weiterer kleiner Fehler: Die Umlaute werden nicht richtig behandelt. Sie sind in der Buchstabenliste als "ae", "oe", "ue" definiert, bei den Wörtern aber als Umlaute "ä", "ö", "ü" geschrieben. Der Vergleich klappt also nicht und Wörter mit Umlauten kann man nicht erraten.

  • Alternative Portrait von devnull4711

    devnull4711

    23.04.2012 - 08:09

    Habe das Quelltext-Archiv (Arbeitsmaterialien) heruntergeladen und im DocumentRoot eines Apache-Webservers entpackt. Funktionierte auf Anhieb. Lediglich zwei kleine Fehler sind mir aufgefallen: 1) Beim Link "Neues Spiel starten?": sollte "index.php" statt " http://www.galgenmann-spiel.de/" stehen. 2) Das Hintergrund-Bild "images/paper.jpg" fehlt.



    geändert von devnull4711 am 23.04.2012 - 08:20
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Video-Training empfehlen

 
vBulletin 0.042 • ZF-App 0.187 • Total 0.229