CodeAgeBy Sitezack
Final project: your TetrisTetris on Canvas, inside a real website0 XP
Chapter progress0/6

Lesson 6 of 6

Final project: the complete Tetris

Final assembly: the game logic (tick + keyboard) inside a real page with header, canvas and footer. All the validated bricks are provided — the mechanics are yours!

The tick is gravity: the piece drops one cell; if it's blocked, it locks (merge), full lines clear (the score climbs by as much) and a new piece spawns. Finish and earn the Season 3 legend badge! 👑

function tick() {
  var test = {x: piece.x, y: piece.y + 1, shape: piece.shape};
  if (collides(grid, test)) {
    // merge, score, new piece
  } else {
    piece.y = piece.y + 1;
  }
}

🎯 Your goal

Build the page (a <header> with an <h1>, a <canvas id="game">, a <footer>) then the game: var grid = makeGrid(16, 10), var piece = makePiece(), var score = 0. The tick() function drops the piece one cell; if dropping causes a collision: merge(grid, piece), add clearLines(grid) to the score and spawn a new piece. On the keyboard, ArrowLeft calls move(grid, piece, -1) and ArrowRight calls move(grid, piece, 1). (Untested bonus: draw the grid with ctx and start setInterval(tick, 400).)

PRO lesson

This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.

Discover PRO