Tetris

• tetris.zip (Version vom 16. Dezember)

Was schon läuft:

• Darstellung im Raster
• Abfrage Tastatur
• Abfrage Touch
• Einige Methoden der Klasse Tetris:
  • translate, ok, rotate

• 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.