Simon

Tetris Spiel mit Javascript

Seit diesem Jahr habe ich in der Schule das Wahlpflichtfach Informatik. Mein Professor Puntigam hat mich damit beauftragt, ein kleines Tetris-Spiel in Javascript zu schreiben.

Ziel ist es, ein einfaches Tetrisspiel zu schreiben, dessen Code leicht verständlich sein soll und vor allem kurz. Für das Tutorial ist es zu empfehlen, den Quelltext herunterzuladen, am Ende des Artikels. Grundvorraussetzung ist die Kenntnis der Javascript-Bibliothek jquery und Grundkenntnisse in Javascript.

Der Grundalgorithmus ist simpel gehalten. Ein Tetris-Objekt wird erzeugt, welches den derzeitigen Tetrisblock repräsentiert. Dieser wird durch die Hauptroutine, die sich zu einer bestimmten Zeit wieder selbst aufruft, immer um eine Zeile nach unten verschoben, bis das nicht mehr möglich ist. In diesem Fall wird ein zufälliger Block geladen und wieder fängt das ganze von vorne an.

Beginnen wir mit dem TetrisObjekt (tetris.prototype.js)

Es besitzt die Eigenschaften:

• X, Y gibt die derzeitige Position an

• Form soll eine kurze Bezeichnung für den Block sein, die später wichtig ist, um die referenzierte CSS Klasse aufzurufen

• rotate gibt den Drehmodus an. Werte von 0 bis 3 sind möglich. 0 ist nicht gedreht, 3 entspräche 270°, 2 wäre 180° und 1 wäre 90°.

• Matrix speichert das Aussehen des Blocks. Dazu werden 3 in einander verschachtelte Arrays verwendet. Für jeden Drehmodus gibt es ein eigenes Aussehen.

Die vordefinierten Blöcke befinden sich in der Datei tetris.blocks.js.

Nun zur Darstellung des Spiels. Hier gibt es verschiedene Techniken. Am besten wäre die fortschrittliche Darstellung mittels eines <Canvas> Elements. Doch dieses wird vom Internet Explorer noch nicht unterstützt und wäre auch schwieriger zu realisieren.

Deshalb wurde die Darstellung mit einer einfachen Tabelle realisiert, die als Matrix behandelt wird. Als Ursprung wird der Punkt links oben verwendet. Das gesamte Interface wurde mittels eines prototypen realisiert, damit man noch später ein Canvas Interface schreiben könnte (tetris.prototype.js, tetris.interfaces.js)

Hauptroutine

[MoveBlock-Funktion tetris.js]

Diese Funktion wird gleich nachdem die Seite geladen ist gestartet. Sie überprüft am Anfang, ob das Spiel im Moment pausiert ist oder nicht. Wenn nicht, dann verschiebt sie den derzeitigen Block nach unten, falls es möglich ist. Das ist allgemein möglich mit der CheckDraw Methode, die Teil der TetrisBlock Klasse ist. Man kann ihr als Argument eine X undY Koordinate geben und überprüfen, ob der Block dort zeichenbar ist (tetris.prototype.js).

Auch muss überprüft werden, ob der Block schon ganz unten ist oder nicht, denn das kann mit der CheckDraw Methode nicht überprüft werden. Falls nun der Block nicht mehr nach unten bewegt werden kann wird ein neuer erzeugt und überprüft, ob eine Zeile nun voll ist. Das heißt also, dass die TetrisBlock Objekte nicht gespeichert werden. Zur Überprüfung wird immer die Matrix verwendet. Das ist einfacher und brauch dann natürlich weniger Speicher, setzt aber einen schnellen Zugriff auf die Matrix vorraus.

Überprüfen, ob die Zeile voll ist

[CheckForLines Methode tetris.js]

Um zu überprüfen, ob die gegebene Zeile y voll mit Elementen ist, wird die Zahl der Tabellenzellen dieser Zeile abgefragt, die eine CSS-Klasse zugeordnet haben. Dazu kann man einen jquery Selector verwenden. Wenn also die Anzahl von Elementen, die gefärbt ist, der breite der Zeile entspricht, ist die Zeile voll.

Auf dem Beispielbild ist eine Zeile hervorgehoben. Hier wäre das Ergebnis der Abfrage 11, da 11 Elemente eine gültige CSS-Klasse besitzen, eines nicht. Hätte diese eine Zelle auch eine gültige CSS-Klasse, wäre das Ergebnis 12 und die Zeile wäre voll.

Wenn die Zeile voll ist, wird das Spiel pausiert, damit keine Fehler in der Matrix passieren, denn die betroffene Zeile wird gelöscht (davor ausgeblendet) und oben eine neue eingefügt. Die Punktezahl wird um 10 erhöht pro Zeile.

Benutzereingaben

[UserMoveTetrisBlock tetris.js]

In sämtlichen Abfragen ob die Benutzereingabe erlaubt ist, wird die CheckDraw-Methode verwendet. Das vereinfacht diese Abfragen sehr. Am Anfang der Methode wird der Block ausgeblendet, und nach der Modifkation der Position wieder eingeblendet.

Download

Das gesamte Projekt auf SkyDrive.

Hier können Sie ein Beispiel online testen.

(c) 2011 | Impressum |