Un classique comme prétexte technique
Pong (Atari, 1972) tient en trois éléments : deux raquettes, une balle, un score. Sa simplicité en fait un banc d'essai idéal pour travailler proprement les fondamentaux d'un rendu temps réel dans le navigateur — sans moteur de jeu, sans dépendance, en quelques kilo-octets de JavaScript.
Une boucle de rendu à 60 fps
Le jeu s'appuie sur requestAnimationFrame, synchronisé sur le
rafraîchissement de l'écran. À chaque image, je calcule le temps écoulé
(delta time) depuis la précédente et je le borne pour absorber les
à-coups (onglet en arrière-plan, machine chargée). Toute la physique est
multipliée par ce delta : la balle avance à la même vitesse réelle sur un écran
60, 120 ou 144 Hz. C'est la différence entre un jeu qui « accélère » sur un
matériel rapide et un jeu au comportement identique partout.
Une physique de balle prévisible
Les rebonds sur les murs sont de simples inversions de vitesse verticale. Le rebond sur une raquette, lui, dépend du point d'impact : toucher le bord de la raquette renvoie la balle avec un angle prononcé, la toucher au centre la renvoie à plat. À chaque échange, la vitesse augmente légèrement — jusqu'à un plafond — pour faire monter la tension sans jamais rendre la balle incontrôlable ni la faire « traverser » une raquette.
Un rendu net sur tous les écrans
Je raisonne dans un repère logique fixe (800 × 500) découplé de la taille réelle du canvas. À l'affichage, une simple transformation met ce repère à l'échelle du conteneur, en tenant compte du device pixel ratio : le rendu reste net sur écran Retina, et le jeu s'adapte du mobile au grand écran sans une ligne de code de mise en page spécifique.
Trois entrées, une même raquette
Souris, tactile et clavier pilotent la même raquette via les Pointer Events et les événements clavier. Le pointeur positionne la raquette directement pour une réponse immédiate ; les flèches (ou W / S) offrent un contrôle au clavier ; la barre d'espace sert et met en pause. Le jeu se met d'ailleurs en pause automatiquement dès que l'onglet passe en arrière-plan.
Une IA volontairement imparfaite
L'adversaire suit la balle, mais avec une vitesse plafonnée inférieure à celle du joueur et une petite zone morte. Résultat : une opposition crédible et battable. Un bon Pong doit se gagner — l'enjeu n'était pas de produire une IA imbattable, mais un adversaire juste. C'est exactement l'état d'esprit que j'applique aux projets sérieux : la bonne dose de complexité, au bon endroit, pour un résultat qui tient la route.
