Aller au contenu principal
sports_esports Lab Canvas 2D Un seul bouton Object pooling

Flappy — la gravité, un seul bouton et du recyclage d'obstacles

Un oiseau ambre, une seule touche et la gravité pour seul adversaire. Une démo Canvas 2D où j'illustre l'intégration temporelle de la physique, la génération procédurale des tuyaux et leur recyclage en pool mémoire.

Flèche ↑, clic, tap ou Espace : battre des ailes Espace : démarrer et rejouer

Un jeu, un seul bouton

Flappy tient une promesse rare : une règle unique, apprise en une seconde. Un appui — clic, tap ou barre d'espace — et l'oiseau bat des ailes ; sinon la gravité le tire vers le sol. Toute la difficulté naît de ce dosage. Côté code, cette contrainte est un atout : une seule entrée à gérer, donc une logique d'interaction minuscule, testable et sans ambiguïté. Souris, écran tactile et clavier convergent vers la même fonction action(), qui démarre, fait voler ou relance selon l'état courant.

La gravité, intégrée dans le temps

L'oiseau n'a que deux variables : sa position verticale et sa vitesse. À chaque image, la vitesse gagne gravité × delta et la position gagne vitesse × delta, où le delta time est la durée réelle écoulée depuis l'image précédente. C'est ce qui garantit une chute identique sur un écran 60, 120 ou 144 Hz : le jeu ne « s'emballe » pas sur un matériel rapide. Je borne ce delta pour absorber les à-coups, et je plafonne la vitesse de chute pour que la trajectoire reste toujours rattrapable.

Des obstacles générés à la volée

Les tuyaux ne sont pas dessinés à la main : la position de chaque trou est tirée aléatoirement, dans une plage bornée par une marge au plafond et au sol pour que le passage reste toujours franchissable. Cette génération procédurale offre une partie différente à chaque essai sans stocker le moindre niveau, et sans jamais produire une configuration injouable.

Le recyclage des obstacles (object pooling)

Un tuyau qui sort de l'écran à gauche n'est pas détruit : il est recyclé. Un pool de quatre objets suffit — dès qu'un tuyau disparaît, on le replace à droite du dernier et on lui tire un nouveau trou. Aucune allocation mémoire pendant la partie, donc aucun ramasse-miettes qui viendrait provoquer une micro-saccade. C'est le pattern de l'object pooling : on paie le coût des objets une seule fois, au démarrage.

Une collision volontairement simple

Détecter un choc revient à comparer deux rectangles : la boîte englobante de l'oiseau et celle de chaque tuyau. C'est la collision AABB (axis-aligned bounding box) — quatre comparaisons, exécutées seulement quand les rectangles se chevauchent horizontalement. Rapide, prévisible, sans faux positif. Ce réflexe résume ma façon de travailler : choisir la solution la plus simple qui répond réellement au besoin, plutôt qu'un moteur physique surdimensionné. Sur vos projets, cela se traduit par un code plus léger, plus rapide à comprendre et moins coûteux à maintenir dans la durée.

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