Les bases de la boucle de jeu

Pense à un folioscope. Chaque page est une image, et en les faisant défiler on donne l'impression que ça bouge. Un jeu fonctionne pareil : soixante fois par seconde, il calcule où se trouve chaque chose, dessine une image, puis recommence. Catch the stars est un petit jeu de ce genre. Des étoiles tombent du haut, tu fais glisser une boîte en bas pour les attraper, et tu perds une vie pour chaque étoile qui passe.

• Image (frame) : une vue du jeu, dessinée de nombreuses fois par seconde.
• Boucle de jeu : le code qui s'exécute une fois par image : mise à jour, puis dessin.
• Constante : un nombre nommé en haut du code, comme GRAVITY, que tu changes à un seul endroit.
• Gravité : un nombre ajouté à la vitesse d'un objet qui tombe, à chaque image.
• Collision : deux objets qui se touchent, repérés en comparant leurs boîtes.
• État du jeu : ce dont le jeu se souvient, comme le score et les vies.

ls game liste les trois fichiers du jeu : index.html pour la page, style.css pour l'aspect et game.js pour les règles. La deuxième commande affiche leur taille : 667, 442 et 4399 octets, 5508 en tout. Presque tout le jeu est dans game.js. Il n'y a ni moteur ni bibliothèque, seulement ce que le navigateur a déjà.

Le script lit game.js et affiche les constantes nommées en haut : GRAVITY vaut 0.15, PLAYER_SPEED vaut 6 et SPAWN_EVERY vaut 50, soit une nouvelle étoile toutes les 50 images. Il liste ensuite les fonctions. Deux comptent le plus. update déplace tout et regarde ce qui s'est passé, et draw peint l'image. La fonction loop appelle les deux, puis demande au navigateur de la rappeler pour l'image suivante, avec requestAnimationFrame. Cet appel sans fin est la boucle de jeu.

Un bon jeu range ses nombres là où on les trouve. LEVELS est un tableau de données : quatre lignes, Drizzle, Shower, Storm et Meteors, qui commencent aux scores 0, 5, 12 et 20. Chaque ligne modifie les nombres de base, et le script calcule le résultat : la gravité passe de 0.150 à 0.360 et l'écart entre deux étoiles passe de 50 images à 25. Le jeu devient donc plus difficile en changeant des données et pas du code. Essaie : change GRAVITY dans game.js, enregistre, relance le script et joue dans Preview.

La gravité ne déplace pas une étoile à elle seule. À chaque image, elle ajoute un peu à la vitesse de l'étoile, puis la vitesse déplace l'étoile. Le script suit une étoile pendant dix images à partir de la constante de game.js : la vitesse augmente de 0.15 à chaque image, jusqu'à 1.50, et l'étoile est tombée de 8.25 pixels en tout. Chaque image fait un pas plus grand que la précédente, d'où l'impression qu'une étoile accélère en tombant.

Pour attraper une étoile, le jeu demande si deux boîtes se chevauchent. C'est le cas quand chacune commence avant que l'autre finisse, en largeur comme en hauteur. Le script fait le même test en Python sur six paires fixes : des boîtes qui se chevauchent et une boîte dans une autre donnent True, des boîtes éloignées donnent False, et celles qui ne partagent qu'un bord aussi. Le jeu fait ce test pour chaque étoile à chaque image.

Preview est un simple serveur de fichiers. Le script lui demande la page, le script et la feuille de style, comme le fait un navigateur, et chacun répond 200. Rien dans le lab ne peut jouer à ta place, car il n'y a pas de navigateur dedans. Ouvre Preview dans ton propre onglet : utilise les flèches gauche et droite, ou les boutons, pour glisser la boîte. Après trois étoiles manquées, le jeu affiche Game over, et Espace ou Restart relance une partie.

Ouvre JupyterLab depuis la barre et double-clique sur start.ipynb. Ses cellules lisent les constantes, font le test de chevauchement sur deux boîtes et demandent la page à Preview. Clique sur une cellule et appuie sur Maj et Entrée pour l'exécuter. La dernière cellule est faite pour ton propre changement : change GRAVITY, enregistre, et calcule où se trouve une étoile après dix images.