Leçon 6 sur 6
Projet final : Tetris complet
Assemblage final : la logique du jeu (tick + clavier) dans une vraie page avec header, canvas et footer. Toutes les briques validées sont fournies — à toi la mécanique !
Le tick, c'est la gravité : la pièce descend d'une case ; si elle est bloquée, elle se fige (merge), les lignes pleines s'effacent (le score grimpe d'autant) et une nouvelle pièce apparaît. Termine et décroche le badge Légende de la saison 3 ! 👑
function tick() {
var test = {x: piece.x, y: piece.y + 1, shape: piece.shape};
if (collides(grid, test)) {
// merge, score, nouvelle pièce
} else {
piece.y = piece.y + 1;
}
}🎯 Ton objectif
Construis la page (un <header> avec <h1>, un <canvas id="game">, un <footer>) puis le jeu : var grid = makeGrid(16, 10), var piece = makePiece(), var score = 0. La fonction tick() fait descendre la pièce d'une case ; si la descente provoque une collision : merge(grid, piece), ajoute clearLines(grid) au score et fais apparaître une nouvelle pièce. Au clavier, ArrowLeft appelle move(grid, piece, -1) et ArrowRight appelle move(grid, piece, 1). (Bonus non testé : dessine la grille avec ctx et lance setInterval(tick, 400).)
Leçon PRO
Ce chapitre avancé fait partie de CodeAge PRO. Débloque-le pour continuer ton aventure.
Découvrir PRO →