Aller au contenu principal
sports_esports Lab Canvas 2D Collision AABB 3 vies

Casse-briques : la résolution des collisions balle / brique, sans moteur de jeu

Un casse-briques en Canvas 2D et quelques kilo-octets de JavaScript. Je m'en sers pour montrer, à ciel ouvert, comment on détecte un contact balle / brique et comment on retrouve la face réellement touchée pour ne renvoyer que le bon axe.

Souris, tactile, ← / → ou A / D : déplacer la raquette Détruire toutes les briques sans épuiser les 3 vies Espace : servir et mettre en pause

Un classique pour éprouver les collisions

Le casse-briques (Atari, 1976) ajoute au Pong une seule idée : un mur de briques à détruire. Cette idée suffit à transformer un exercice de rebond en un vrai problème de détection et de résolution de collisions. C'est ce qui en fait un excellent banc d'essai : un rendu temps réel, sans moteur de jeu, sans dépendance, en quelques kilo-octets de JavaScript.

Détecter le contact balle / brique

Chaque brique est un rectangle aligné sur les axes (un AABB, axis-aligned bounding box). Je traite la balle comme un cercle et je teste, à chaque image, si son enveloppe chevauche celle de la brique : il n'y a contact que si les intervalles se recouvrent sur les deux axes. Ce test se résume à quatre comparaisons, donc assez peu coûteux pour balayer tout le mur à chaque frame sans structure spatiale plus élaborée.

Retrouver la face touchée

Détecter le contact ne suffit pas : il faut savoir quel axe de vitesse inverser. Renvoyer la balle sans discernement produirait des rebonds absurdes — une balle qui repart vers le haut alors qu'elle a heurté un côté. Je calcule donc la profondeur de pénétration sur chaque face (gauche, droite, haut, bas) et je ne retiens que la plus faible : c'est, géométriquement, la face par laquelle la balle est réellement entrée. J'inverse alors uniquement la composante correspondante (vx pour un flanc, vy pour le dessus ou le dessous) et je repousse la balle hors de la brique pour éviter qu'elle ne reste coincée à l'intérieur.

Vies, accélération et fin de niveau

La partie démarre avec trois vies. Perdre la balle en bas de l'écran en retire une et rejoue la balle sur la raquette après un court délai ; à zéro vie, la partie est perdue. À l'inverse, la victoire est un simple invariant : dès qu'il ne reste plus une seule brique vivante, le niveau est gagné. Chaque renvoi accélère légèrement la balle — jusqu'à un plafond — pour faire monter la tension sans jamais la rendre incontrôlable ni lui faire traverser une brique entre deux images.

Le même soin, sur vos projets

Un casse-briques est anecdotique ; la rigueur qu'il exige ne l'est pas. Nommer précisément les états, isoler la géométrie de la collision, poser des invariants clairs (« zéro brique vivante = niveau terminé ») : ce sont exactement les réflexes que j'applique à des systèmes autrement plus sérieux. Un code qui reste prévisible sous toutes les entrées, voilà ce qui distingue une base sur laquelle on construit d'un prototype qu'on jette.

Photo d'Emmanuel BALLERY, fondateur de x10

À propos de l'auteur

Emmanuel BALLERY est le fondateur de x10 solutions. Ces petits jeux sont surtout un plaisir de développeur, codés le week-end — pas une vitrine de mes missions, qui sont bien plus exigeantes. J'y soigne quand même la performance et la lisibilité, par habitude.

Voir plus arrow_forward
rocket_launch

Un vrai projet en tête ?

Ce petit jeu m'amuse, mais il ne dit pas grand-chose de mon métier : mes missions sont bien plus complexes. Si vous avez une application à concevoir ou à fiabiliser, c'est là que je suis vraiment utile.

Discuter de mon projet arrow_forward