Jeu de casse-briques en JavaScript 🎮

Construis pas à pas ton propre Breakout avec JavaScript, en suivant le tutoriel MDN… tout en faisant des exercices et variantes dignes d’un vrai game dev.
Public : 10 → 18 ans Ressource prof : progression complète + exercices guidés

Activité 1 – Tutoriel officiel MDN

On s’appuie sur le tutoriel « casse-briques » de MDN (Mozilla), une référence pour apprendre JavaScript en codant un vrai jeu :

🔗 Activité 1 : Jeu de casse-briques en JavaScript (MDN) MDN Web Docs

Le but de cette fiche est de transformer ce tutoriel en un parcours pédagogique complet : exercices guidés, mini-défis, questions pour vérifier la compréhension, et idées d’extensions.

I. Introduction à jsFiddle

Pour expérimenter rapidement sans créer de fichiers sur ton ordinateur, on va utiliser jsFiddle, un bac à sable pour HTML / CSS / JavaScript.

🌐 Adresse : https://jsfiddle.net/

1) Découvrir l’interface

HTML : pour écrire la structure de la page (le canvas, les boutons, etc.).
CSS : pour la mise en forme (couleurs, polices…).
JavaScript : pour la logique du jeu (balle, briques, collisions…).
Result : le rendu de ton code.

Exercice jsFiddle de démarrage

Ouvre jsFiddle.
Dans la zone HTML, écris : <h1>Hello Casse-briques !</h1>

Dans la zone JavaScript, ajoute :

console.log("Bienvenue dans mon premier jeu !");

Clique sur Run (ou ▶). Le texte apparaît-il ? Ouvre la console (F12) pour voir le message.

QCM rapide – À quoi sert jsFiddle ?
a) À jouer à des jeux sans coder.
b) À tester du code HTML/CSS/JS dans le navigateur.
c) À installer JavaScript sur l’ordinateur.

II. Programmation par étapes du jeu de casse-briques

Le tutoriel MDN est découpé en 10 étapes. Pour chacune, tu peux :

Lire la page MDN.
Tester le code sur jsFiddle ou dans un fichier .html local.
Faire les exercices proposés ici pour bien comprendre ce que tu écris.

ÉTAPE 1 Création du canvas et dessin

MDN : Create the canvas and draw on it

a) Page HTML + canvas

On crée une page HTML avec un élément <canvas> sur lequel on va dessiner.

Exercice 1 : changer le titre de la page HTML 👉 Dans la balise <title>, mets un titre de ton choix (par ex. « Mon super casse-briques »).

Exercice 2 : modifier la taille du canvas 👉 Change le code pour que le canvas fasse 400 × 400 pixels.

💡 Exemple de squelette HTML avec un canvas 400×400 (corrigé prof)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon super casse-briques</title>
  <style>
    body {
      margin: 0;
      background: #f4f4f4;
      font-family: Arial, sans-serif;
      text-align: center;
    }
    canvas {
      background: #fff;
      border: 1px solid #ccc;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    // le JS viendra ensuite
  </script>
</body>
</html>

b) Variables pour manipuler le canvas

MDN propose :

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Exercice 3 : simplifier en une ligne 👉 Écris une seule ligne JavaScript qui crée directement ctx, sans garder la variable canvas.

💡 Correction possible (pour les profs)

const ctx = document.getElementById("myCanvas").getContext("2d");

Variante plus lisible pour les débutants : garder les deux lignes, mais passer en const :

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

c) Dessiner des cercles avec des boucles

Exercice 4 : 10 cercles en for
Crée 10 cercles de diamètre 10 pixels sur une ligne horizontale à la position y = 20, en utilisant :

for (let compteur = 0; compteur < 10; compteur++) {
  // ...
}

Idée : le centre du cercle peut être à x = 20 + compteur * 30 par exemple.

Exercice 5 : 20 cercles en while
Crée 20 petits cercles (diamètre 3 pixels) sur une ligne à y = 20 en utilisant :

let compteur = 10;
while (compteur < 20) {
  compteur++;
  // ...
}

Tu peux, par exemple, faire commencer les cercles après les 10 premiers, etc.

💡 Exemple de code de cercles (corrigé prof)

// 10 cercles (diamètre 10)
for (let compteur = 0; compteur < 10; compteur++) {
  const x = 20 + compteur * 30;
  const y = 20;
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.fillStyle = "blue";
  ctx.fill();
}

// 20 petits cercles (diamètre 3)
let compteur = 10;
while (compteur < 30) {
  compteur++;
  const x = 10 + (compteur - 10) * 15;
  const y = 50;
  ctx.beginPath();
  ctx.arc(x, y, 1.5, 0, Math.PI * 2);
  ctx.fillStyle = "red";
  ctx.fill();
}

ÉTAPE 2 Déplacer la balle

MDN : Move the ball

a) Boucle de dessin

On crée une fonction qui dessine le jeu, appelée régulièrement (comme un dessin animé).

b) Déplacement de la balle

Exercice 6 : changer la vitesse de la balle
Dans le code MDN, la balle est déplacée avec des variables du type dx et dy. 👉 Modifie ces valeurs pour rendre la balle plus rapide ou plus lente.

Exercice 7 : vitesse en pixels/seconde
Supposons que la balle se déplace de dx pixels par image sur X, et que la boucle est appelée 60 fois par seconde. 👉 Donne la formule qui permet de calculer la vitesse horizontale en pixels/seconde.

💡 Formule de vitesse (corrigé prof)

Si dx est le déplacement en pixel par image et que l’on a FPS images/seconde :
vitesse_x = dx × FPS (en pixels/seconde).

c) Nettoyer le canvas à chaque image

Exercice 8 : nettoyer une fois sur deux
Le code MDN efface le canvas à chaque image avec ctx.clearRect(...). 👉 Modifie le programme pour que le canvas soit nettoyé une image sur deux seulement (tu peux utiliser un compteur d’images).

Exercice 9 : renommer les fonctions
Renomme les fonctions draw() et drawBall() avec des noms plus parlants, par exemple dessinerScene() et dessinerBalle(), puis adapte les appels.

Exercice 10 : fichier local
Crée un fichier breakout.html sur ton ordinateur, colle le code complet (HTML + JS) dedans, et ouvre-le dans ton navigateur. 👉 Tu dois voir la balle bouger sans passer par jsFiddle.

ÉTAPE 3 Faire rebondir la balle sur les murs

MDN : Bounce off the walls

a) Détection des collisions

Exercice 11 : balle carrée
Modifie la fonction de dessin pour que la balle ne soit plus un cercle mais un carré (par exemple avec ctx.fillRect()).

Exercice 12 : renommer ballRadius
Change le nom de la variable ballRadius en rayonDeLaBalle partout dans le code, sans rien casser.

b) Rebondir en haut et en bas

c) Rebondir à droite et à gauche

Exercice 13 : rebond seulement droite/gauche
Modifie le code pour que la balle rebondisse uniquement sur le mur droit et le mur gauche. Lorsqu’elle dépasse le bord haut ou bas, elle doit réapparaître de l’autre côté (effet “téléportation”).

Exercice 14 : pas de rebond, mais toujours dans l’écran
Version encore plus jeu rétro : la balle ne rebondit jamais, mais si elle sort à droite, elle réapparaît à gauche (et inversement), idem pour haut/bas.

d) Tester dans le fichier local

Exercice 15 : exécution locale
Mets ton code à jour dans ton fichier .html local et vérifie que le comportement correspond bien à ce que tu as demandé (rebond, téléportation, etc.).

ÉTAPE 4 Raquette & contrôle clavier

MDN : Paddle and keyboard controls

a) Création de la raquette

Exercice 16 : renommer les variables
Renomme paddleHeight, paddleWidth, paddleX en noms français plus explicites (par ex. hauteurRaquette, largeurRaquette, positionRaquetteX), et adapte toutes les occurrences.

b) Contrôle clavier

Exercice 17 : renommer les variables de contrôle
Renomme rightPressed, leftPressed, paddleX en français (par ex. flecheDroitePressee, flecheGauchePressee…).

Exercice 18 : renommer les fonctions clavier
Change keyDownHandler et keyUpHandler en gestionToucheEnfoncee et gestionToucheRelachee, puis adapte les écouteurs d’évènements keydown et keyup.

Exercice 19 : test local
Fais tourner ton jeu dans ton fichier .html local. 👉 La raquette doit se déplacer au clavier avec tes nouveaux noms de fonctions.

ÉTAPE 5 Fin de partie

MDN : Game over

a) Définir la fin de partie

Exercice 20 : zone spéciale de “mort”
Fais en sorte que la fin de partie se produise seulement si la balle touche les 50 premiers pixels à gauche du sol.

b) Rebond sur la raquette

Exercice 21 : accélération à l’impact
Modifie le code pour que la balle accélère légèrement à chaque fois qu’elle touche la raquette (par exemple, multiplie dx et dy par 1.05 à chaque impact).

ÉTAPE 6 Les briques

MDN : Build the brick field

a) Variables “brique”

Exercice 22 : renommer les variables briques
Renomme les variables liées aux briques (colonnes, lignes, largeurs, marges...) en français plus explicite, par exemple nombreColonnesBriques, largeurBrique, etc.

b) Logique de dessin des briques

Exercice 23 : renommer drawBricks
Renomme la fonction drawBricks() en un nom plus clair comme dessinerToutesLesBriques().

Exercice 24 : version 100% while
Réécris la fonction de dessin des briques en utilisant deux boucles while.

Exercice 25 : version mixte
Réécris ensuite la même fonction avec une boucle for et une boucle while.

ÉTAPE 7 Collisions balle / briques

MDN : Collision detection

a) Fonction de détection

Exercice 26 : collisionDetection() en while
Réécris la fonction collisionDetection() de MDN en utilisant des boucles while à la place des for.

b) Faire disparaître les briques touchées

Exercice 27 (difficile) : deux couleurs aléatoires
À la création des briques, choisis deux couleurs au hasard (par ex. une couleur pour les lignes paires, une autre pour les lignes impaires), et utilise-les lors du dessin des briques.

c) Suivi de l’état

Vérifie que la fonction de collision met bien à jour l’état des briques (actives / détruites) et éventuellement le score.

ÉTAPE 8 Suivi du score & victoire

MDN : Track the score and win

a) Compter le score

Exercice 28 : fond violet pour le score
Dessine le score sur un fond violet (par exemple en dessinant un petit rectangle violet puis le texte en blanc par-dessus).

Exercice 29 : déplacer le score
Affiche le score en bas à droite de l’écran au lieu du coin haut gauche.

b) Message de victoire

Quand toutes les briques sont détruites, affiche un message du type "Bravo, tu as gagné !" et arrête la boucle d’animation.

ÉTAPE 9 Contrôle à la souris

MDN : Mouse controls

a) Écouter la souris

b) Lier la raquette à la position de la souris

Exercice 30 : sensibilité de la souris
Modifie le code pour que la raquette réagisse avec une sensibilité augmentée ou diminuée, par exemple en ajoutant un facteur de multiplication sur event.clientX ou en appliquant un décalage.

ÉTAPE 10 Vies, affichage & variantes

MDN : Finishing up

a) Donner des vies au joueur

b) Afficher les vies à l’écran

Exercice 31 : style des vies
Change la couleur de fond de la zone où sont affichées les vies, et positionne cet affichage en haut à droite de l’écran.

Exercice 32 (CHAMPION 🏆) : deux balles
Modifie le code pour qu’il y ait deux balles au lieu d’une :

deux positions (x1, y1) et (x2, y2),
deux couples de vitesses (dx1, dy1) et (dx2, dy2),
gestion des collisions pour chacune.

Essaie d’en faire une plus rapide que l’autre !

III. Idées d’extensions “Free Style”

Ajouter des bonus (balle plus grosse, raquette plus large, vitesse ralentie…).
Changer complètement le thème graphique (galaxie, océan, pixels Minecraft…).
Ajouter une musique et des sons (rebond, casse de briques…).
Créer plusieurs niveaux avec des dispositions de briques différentes.
Publier la page sur un hébergement simple pour la montrer aux autres élèves / parents.

Tu viens de traverser tout un tutoriel de jeu vidéo JavaScript étape par étape. Ce que tu viens d’apprendre (canvas, boucle de jeu, collisions, entrées clavier/souris) est la base de plein d’autres jeux que tu pourras inventer ensuite. 🚀

Rechercher dans ce blog

Code informatique