Tetris

• tetris.zip (spielbare 2-Spieler Version vom 20. Januar)

Was schon läuft:

• Darstellung im Raster
• Abfrage Tastatur
• Abfrage Touch (nur 1 Player)
• Tetris, alles bis auf Linien abbauen.

• Code in ui.js und tetris.js studieren, kommentieren, Fragen stellen.
• Code in tetris.js vervollständigen, insbesondere die Methoden ok und rotatedBlock.
  • In ok kann mit this.raster.getValue(x,y) der Zustand eines Feld-Elements erfragt werden.
  • Mit this.raster.isOn(x,y) kann überprüft werden, ob die Koordinaten überhaupt auf dem Feld liegen.
  • Für die Methode ok, kann auch am Anfange erase und am Schluss draw aufgerufen werden, damit keine Kollisionen vom Block mit sich selbst registriert werden.
• Gameplay mit setTimeout realisieren. Dabei unbedingt den Handler speichern, damit dieser auch annuliert werden kann, wenn z.B. der Benutzer den Stein selbst nach unten bewegt. Siehe https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout

Soll im setTimeout eine Methode einer Instanz (Objekt) aufgerufen werden, muss eine Wrapper-Funktion (z.B. mit ()=>this.bla() oder so) programmiert werden. Würde einfach nur this.bla als aufzurufenden Funktion übergeben werden, ginge das this, also die Referenz auf die aktuelle Instanz Instanz verloren, weil der Timeout später in einem anderen Kontext aufgerufen wird.

  // Methode der aktuellen Instanz in 1000ms aufrufen
  // Derweil den Timeout-Handler speichern, damit er annuliert werden kann.
  this.timeoutHandler = setTimeout( ()=>this.translate(0,1), 1000);  

In der translate-Methode kann der Timeout dann gecancelt werden:

   clearTimeout(this.timeoutHandler);
   // Sonstiges Zeugs
   // Falls nötig, neuen timeout setzen.

Ziel: Code in ui.js soll aufgerufen werden, wenn etwas Spezielles im Tetris-Objekt passiert, z.B.

• Game over
• mehr als eine Zeile auf einmal abgebaut wurde (damit dem Gegner welche «untergeschoben» werden können).

Vorgehen: Beim Anlegen eines Tetris-Objekts wird ein Object mit Callbacks übergeben.

function unterschieben(tetrisInstanz, anzahlLinien) {
   // Tu was mit der Tetris-Instanz
}
function machMalFertig() {
   // Tu wat
}
 
tetris = new Tetris(raster, {"multipleLinesCallback":unterschieben, "gameOver":machMalFertig});

In der Tetris-Klasse sieht die Sache dann wie folgt aus:

   // im Constructor die callbacks speichern:
   this.callbacks = ...;
 
   // in der Funktion, die Linien abbaut, den Callback aufrufen
   this.callbacks["multipleLinesCallback"](this, anzahlZeilen);