CodeAgeBy Sitezack
Finalprojekt: dein TetrisTetris auf Canvas, in einer echten Website0 XP
Kapitel-Fortschritt0/6

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