Lektion 6 von 6
Finalprojekt: das komplette Tetris
Finale Montage: die Spiellogik (Tick + Tastatur) in einer echten Seite mit Header, Canvas und Footer. Alle geprüften Bausteine sind vorgegeben — jetzt kommt die Mechanik!
Der Tick ist die Schwerkraft: Der Stein sinkt eine Zelle; ist er blockiert, wird er fixiert (merge), volle Zeilen verschwinden (der Score steigt entsprechend) und ein neuer Stein erscheint. Schließe ab und hol dir das Abzeichen Legende der Saison 3! 👑
function tick() {
var test = {x: piece.x, y: piece.y + 1, shape: piece.shape};
if (collides(grid, test)) {
// merge, Score, neuer Stein
} else {
piece.y = piece.y + 1;
}
}🎯 Dein Ziel
Baue die Seite (ein <header> mit <h1>, ein <canvas id="game">, ein <footer>) und dann das Spiel: var grid = makeGrid(16, 10), var piece = makePiece(), var score = 0. Die Funktion tick() lässt den Stein eine Zelle sinken; erzeugt das Sinken eine Kollision: merge(grid, piece), addiere clearLines(grid) zum Score und lass einen neuen Stein erscheinen. Per Tastatur ruft ArrowLeft move(grid, piece, -1) und ArrowRight move(grid, piece, 1) auf. (Bonus, ungetestet: Zeichne das Raster mit ctx und starte setInterval(tick, 400).)
PRO-Lektion
Dieses fortgeschrittene Kapitel gehört zu CodeAge PRO. Schalte es frei, um dein Abenteuer fortzusetzen.
PRO entdecken →