Lab de développement de jeux : boucle de jeu, gravité et collisions dans le navigateur

Ce lab donne à chaque élève un petit jeu à lui, Catch the stars, fait de trois fichiers : index.html pour la page, style.css pour son aspect et game.js pour ses règles. Il modifie les fichiers dans l’éditeur de fichiers de JupyterLab et joue au jeu dans un second lien, Preview, servi depuis le même dossier. De courts scripts Python lisent game.js, affichent ce qu’il contient et refont le calcul du jeu : l’élève peut donc vérifier comment un jeu fonctionne autant que le modifier.

Ce n’est pas un lab d’attaque, et il n’a ni moteur de jeu ni bibliothèque : un jeu, c’est du JavaScript simple sur un canvas HTML, et le navigateur est le seul moteur d’exécution. Chaque copie n’a aucun accès à internet ni à aucun autre élève : rien ne peut y être téléchargé et rien n’y peut atteindre quelqu’un d’autre.

Ce que les élèves apprennent

Ce qu’est une boucle de jeu : une fonction qui s’exécute une fois par image, met le jeu à jour, le dessine, puis demande au navigateur de la rappeler. Comment un jeu range ses nombres dans des constantes nommées comme GRAVITY, PLAYER_SPEED et SPAWN_EVERY, et ses niveaux dans un tableau de données : le rendre plus difficile, c’est changer des données et pas du code. Comment marche la gravité dans un jeu, un nombre ajouté à une vitesse à chaque image, qui déplace ensuite la position. Et comment on trouve une collision, en testant si deux boîtes se chevauchent dans les deux sens. Il convient aux introductions au développement de jeux et à la programmation par le jeu ; vérifiez la formulation exacte dans l’unité de votre propre organisme certificateur, aucune n’est citée ici.

Le lancer dans votre navigateur

Le lab démarre un seul service, jupyter, qui écrit le jeu, un notebook de départ et les petits scripts dans son dossier de travail, et lance un simple serveur de fichiers sur le dossier game. Deux liens s’ouvrent depuis la page du lab : JupyterLab, l’atelier, et Preview, le jeu lui-même. JupyterLab ne demande aucun jeton, car la porte de la plateforme sait déjà qui l’ouvre. Il n’y a pas de navigateur dans le lab : les scripts ne peuvent pas montrer le jeu, seulement lire son code ; l’élève y joue dans son propre navigateur sur le lien Preview, avec les flèches ou les boutons à l’écran. Preview montre les fichiers enregistrés : après avoir modifié un fichier, l’élève l’enregistre puis recharge Preview. Le terminal à côté du lab n’a pas de Python à lui : il atteint celui du lab avec docker exec jupyter, suivi de la commande à lancer à l’intérieur.

  1. Ouvrir la page Conteneur. Ouvrez « Créer » dans la barre et choisissez « Lancer un conteneur ». Tout le monde peut ouvrir la page, et le lab Git et le lab SQL se lancent sans compte. Tous les autres labs demandent un compte gratuit : créez-en un, connectez-vous, puis appuyez sur « Démarrer ».
  2. Trouver le lab. La carte « Laboratoires d’exemple » liste tous les exemples. Trouvez Développement de jeux : une boucle de jeu en JavaScript.
  3. Appuyer sur Démarrer. « Démarrer » le lance tel quel, en un clic. « Modifier le fichier d’abord » ouvre le fichier compose pour que vous puissiez le changer avant de démarrer.
  4. L’ouvrir. Sur la page du lab, la barre du lab a deux liens. Appuyez sur Preview pour jouer, puis sur JupyterLab, ouvrez le dossier game et double-cliquez sur game.js. Appuyez ensuite sur « Ouvrir le terminal » et tapez docker exec jupyter python3 steps/loop.py pour lister les constantes nommées et les fonctions du jeu.

Que demander aux élèves de rendre

Leur propre version du jeu : les trois fichiers du dossier game, téléchargés depuis JupyterLab avec File, Download. Puis une ou deux phrases, de leurs propres mots, sur un nombre qu’ils ont changé, par exemple GRAVITY, PLAYER_SPEED ou une ligne de LEVELS, et son effet sur le jeu. Rien n’est noté automatiquement : la phrase montre si c’était compris. Pour un travail plus poussé, demandez de lancer steps/fall.py avant et après le changement et de dire ce qui a bougé, ou d’ajouter un cinquième niveau au tableau et d’expliquer comment la sortie du script change.

Une leçon de base sur ce lab

Game Loop Basics est une petite leçon qui se fait dans ce lab. L’élève y liste les trois fichiers du jeu, lit ses constantes nommées, ses fonctions et la boucle qui tourne à chaque image, calcule les niveaux à partir du tableau, suit une étoile qui tombe pendant dix images, lance le test de chevauchement de boîtes sur des paires fixes et demande la page au serveur de Preview. Elle est volontairement petite : elle montre à un enseignant ce qu’est une leçon qui se fait dans un lab, et le lab fait le reste. Copiez-la dans un module à vous pour la modifier.

Le code sur GitHub

Le fichier compose n’a pas de Dockerfile : il lance une seule image publique, scipy-notebook des Jupyter Docker Stacks, figée sur une étiquette datée, avec son propre compte sans privilèges et 512 Mo de mémoire. L’image est sous licence BSD-3-Clause et n’est pas distribuée par nous. Le fichier écrit le jeu et les scripts à partir d’un texte fixe au démarrage : chaque copie est identique et rien n’est téléchargé. Les limites sont honnêtes : le jeu est petit, il n’y a ni moteur ni moyen de récupérer une bibliothèque sur internet, et pas de navigateur dans le lab : les scripts lisent le code au lieu de lancer le jeu, et l’endroit où démarre une étoile est aléatoire à chaque partie. Rien n’est conservé quand le lab s’arrête : l’élève télécharge ses fichiers avant.

En faire un travail

Indiquez dans la tâche ce qu’il faut rendre.

  1. Créer le lab. Dans votre module, ajoutez une tâche et choisissez la carte « Lab de conteneurs », puis « Dans un dépôt GitHub ». Indiquez https://github.com/mitsurutech/lab-game-web avec la branche main. Le fichier compose par défaut est compose.yaml. Faites d’abord un fork du dépôt si vous voulez le modifier, par exemple pour partir d’un autre jeu.
  2. Publier et l’essayer. « Publier » fige le commit qui vous a été montré : un changement ultérieur dans le dépôt ne modifie donc pas un lab que vous avez déjà proposé. Démarrez d’abord votre propre copie.
  3. Le distribuer. Attribuez-le comme n’importe quelle tâche, avec une échéance si vous le souhaitez, et indiquez dans la tâche ce qu’il faut faire et ce qu’il faut rendre.
  4. Noter ce qui est rendu. Ouvrez la copie d’un élève et le travail rendu, notez-le et renvoyez-le avec un motif s’il demande un complément.

Essayer ce lab, et ce qu’il coûte

Un compte personnel gratuit permet de suivre les leçons de base de ce lab, avec chaque mois assez de crédit gratuit pour suivre la plupart des leçons, sans carte. Pour une classe, un établissement a ses 365 premiers jours gratuits pour 50 élèves au plus, puis paie par élève et par an, tous les labs compris et les enseignants gratuits.

Questions fréquentes

Pourquoi y a-t-il deux liens ?
JupyterLab, le premier, est l’endroit où l’élève modifie les fichiers et utilise le terminal. Preview, le second, est le jeu lui-même, servi depuis le dossier game, comme le verrait un joueur. Garder le jeu dans son propre onglet évite qu’il soit entouré d’un éditeur.
Les scripts peuvent-ils me montrer le jeu ?
Non. Il n’y a pas de navigateur dans le lab : un script peut lire game.js et refaire son calcul, mais pas le dessiner. Jouez dans votre propre navigateur sur le lien Preview. Les scripts affichent les mêmes nombres à chaque fois, ce qui permet à une classe de comparer ses réponses.
J’ai modifié un fichier et Preview n’a pas changé. Pourquoi ?
Preview montre les fichiers enregistrés. Enregistrez le fichier dans l’éditeur, puis rechargez Preview. Si rien ne change, essayez un rechargement forcé : un navigateur peut garder une ancienne copie d’un fichier.
Pourquoi n’y a-t-il ni jeton ni mot de passe à taper ?
La page web d’un lab ne s’atteint que par la porte de la plateforme, qui sait déjà qui vous êtes et ne laisse entrer que vous et les enseignants de votre module. JupyterLab démarre donc sans jeton. Ne le lancez pas ainsi sur une machine que d’autres peuvent atteindre.