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 →