CodeAgeBy Sitezack
Projet final : ton TetrisTetris sur Canvas, dans un vrai site0 XP
Progression du chapitre0/6

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