Un casse-briques en JavaScript vanilla

Ce qu'il y a derrière

Un casse-briques est un bon révélateur parce qu'il ne pardonne rien. La balle se déplace vite, elle doit rebondir juste, et le moindre raccourci se voit à l'écran. Voici les quatre points sur lesquels une version bâclée se trahit, et ce que nous en avons fait ici.

La balle ne traverse pas les briques

À 400 unités par seconde, un déplacement calculé en un seul saut peut faire passer la balle d'un côté à l'autre d'une brique sans jamais la toucher. Le mouvement est donc fractionné en pas assez courts pour qu'aucun ne dépasse le rayon de la balle, et le temps écoulé entre deux images est plafonné pour qu'un ralentissement du navigateur ne provoque pas un saut géant.

La même partie sur un écran à 60 et à 144 Hz

Les vitesses sont exprimées par seconde et multipliées par le temps réellement écoulé, jamais par image. Un écran rapide donne une animation plus fluide, pas une balle plus rapide. C'est la différence entre un jeu qui se comporte pareil partout et un jeu injouable sur la moitié du parc.

Trois modes de commande, une seule logique

Clavier, souris et tactile alimentent la même variable de position. Le canvas capte les gestes du doigt pour que le glissement ne fasse pas défiler la page, et la partie se met en pause dès que l'onglet perd la main, ce qui évite de perdre trois vies pendant qu'on répond à un message.

Sur un écran étroit, le repère de calcul se resserre au lieu de se contenter d'une réduction d'échelle : la balle, la raquette et les briques occupent une place plus grande, et le terrain prend la hauteur réellement disponible sous l'en-tête. La raquette est remontée au-dessus d'une bande de contrôle, parce que le doigt qui la pilote se posait exactement dessus et la masquait.

L'accessibilité n'est pas une couche ajoutée après

Le jeu est jouable entièrement au clavier, les changements de score et de niveau sont annoncés dans une zone de statut lisible par un lecteur d'écran, et la préférence système d'animation réduite coupe les particules sans casser la partie. Ce sont les mêmes réflexes que sur une plateforme de gestion, où ils ne se voient pas mais se paient très cher quand ils manquent.

Cette page est un exercice, pas un produit. La démarche, elle, est celle que nous appliquons aux projets clients, et nous l'expliquons plus longuement dans notre approche du développement sur mesure. Si la question du poids et du temps de chargement vous intéresse, l'analyseur de vitesse mesure une page réelle en quelques secondes, et Le Mag revient régulièrement sur les arbitrages techniques derrière ces choix.