Hangman
Spielchen für den Browser programmieren
Was haben unser Pacman-Klon aus c’t 23/13, Die Siedler online und Quake live gemeinsam? Es sind vergleichsweise komplizierte Spiele, die einen nicht unerheblichen Entwicklungsaufwand bedeuten. Wer in die Spieleprogrammierung für den Browser einsteigen will, sollte mit geringeren Ansprüchen beginnen, zum Beispiel mit dem Wortspiel Galgenmännchen.
Altbekannte Spiele für Stift und Papier lassen sich prima neu beleben, indem man sie in den Computer überträgt. Vor allem Wortspiele eignen sich dazu, weil sie so schön unkompliziert in der Umsetzung sind. Um die Voraussetzungen für den Einstieg in die Spieleprogrammierung weiter zu minimieren, bietet es sich an, das Spiel für den Browser zu entwickeln. Denn der ist überall vorhanden – und enthält sogar einen Debugger [1].
Dieser Artikel führt in die Programmierung eines solchen Wortspiels mit den üblichen Mitteln des Web ein: HTML, CSS und JavaScript [2]. Deren Grundlagen sollten Sie einigermaßen draufhaben. Sie lernen im Verlauf des Artikels, wie man ein HTML-Dokument (Document Object Model, DOM) per JavaScript verändert und auf Benutzereingaben reagiert. Ganz nebenbei erfahren Sie dabei ein paar Kniffe im Umgang mit der weit verbreiteten JavaScript-Bibliothek jQuery [3].
Den Beispielcode sowie Links auf weiterführende Dokumentation erhalten Sie über den c’t-Link am Artikelende.
Galgenmännchen
Die Regeln von Galgenmännchen (engl. hangman) sind schnell erklärt: Es gilt ein Wort zu erraten. Zu Anfang ist nur die Wortlänge bekannt, symbolisiert mit einem Strich an jeder Buchstabenposition. Der Spieler wählt alsdann Buchstaben aus. Kommt der Buchstabe im gesuchten Wort vor, wird er an den entsprechenden Positionen eingetragen. Kommt er nicht vor, wird der nächste Teil des Galgenmännchens gezeichnet: erst der Strick, dann der Kopf, dann Rumpf, Arme und Beine. Der Galgen steht schon. Der Spieler gewinnt, wenn er das Wort errät, bevor das Galgenmännchen komplett gezeichnet ist, sonst verliert er.