Le projet Snake
Au programme
- Le défi
- Votre console
- Le réseau
- Votre organisation
Ce que vous allez faire
En binôme, pendant environ 24 h
- concevoir et coder un Snake sur la console soudée au TD4
- inventer un second joueur, dans un navigateur, qui ne joue pas au même jeu
- documenter le tout dans votre repo, et le démontrer
Tout ce qui vient des TD sert : la carte, la game loop, la machine à états, l’écran, le joystick.
Le défi
Un Snake, deux joueurs, deux jeux
Une console, un navigateur
flowchart LR
J1["Joueur 1 : joystick"] --> C["Console XIAO : règles et écran"]
C <-->|"Wi-Fi + WebSocket"| N["Joueur 2 : navigateur"]
Le joueur 1 joue au Snake sur la console. Le joueur 2 rejoint la partie depuis son téléphone, sur une page servie par la console elle-même.
Les deux ne jouent pas au même jeu : c’est un multijoueur asymétrique.
Le joueur 1 : un vrai Snake
- Le serpent avance case par case, à sa propre cadence
- Quatre directions au joystick, jamais de demi-tour
- Il mange, il grandit, le score monte
- Un mur ou son propre corps : la partie s’arrête
- Accueil, partie, fin : une machine à états
- Pas de scintillement, aucun
delay()
Le joueur 2 : un rôle à inventer
- Le maître du jeu pose nourriture et obstacles
- Le saboteur accélère le serpent, inverse ses commandes
- L’allié guide vers les bonus, sauve une fois
- Le parieur mise sur la chute du serpent
Des pistes, pas une liste : reprenez-en une, combinez-les, ou inventez la vôtre.
Une seule règle : ses actions doivent changer vraiment la partie.
Activité : inventez un rôle
Imaginez le rôle de votre joueur 2
- Que voit-il dans sa page ?
- Que peut-il faire, et à quelle fréquence ?
- Comment gagne-t-il ? Comment perd-il ?
- Jouez une partie à la main : l’un fait le serpent, l’autre le joueur 2
Un bon rôle asymétrique
1
Chaque joueur peut-il gagner ? Un rôle trop puissant tue le jeu de l’autre.
2
Les deux ont-ils toujours quelque chose à faire ? Un joueur qui attend décroche.
Deux « oui », et votre idée tient. Gardez la trace de vos essais : ils justifient votre choix.
Votre console
Prête depuis le TD4
Ce que vous avez déjà
Le matériel
- Une carte conçue par vous, puis soudée et testée
- Joystick, deux boutons, écran, XIAO
- Le brochage des TD, qui ne change plus
Le logiciel
- Une game loop à 16 ms, sans
delay() justPressed()et le joystick calibré- Un affichage qui ne scintille pas
- Une machine à états
Le Snake repart de tout cela. Seuls la mécanique de jeu et le réseau sont neufs.
Le Pong sur la console Souder et tester la carte
Le réseau
Faire entrer un navigateur dans la partie
La console crée son propre Wi-Fi
flowchart LR
T["Téléphone : 192.168.4.2"] <-->|Wi-Fi| C["Console : 192.168.4.1"]
En point d’accès, la console crée son réseau : pas besoin du Wi-Fi de l’école, ni d’Internet. Le téléphone s’y connecte et ouvre http://192.168.4.1/.
Donnez à votre réseau un nom unique dans la salle.
Deux serveurs, deux rôles
HTTP, port 80
Envoie la page du joueur 2, une fois, à l’ouverture.
Le navigateur demande, la console répond, la connexion se ferme.
WebSocket, port 81
Échange les messages du jeu, pendant toute la partie.
La ligne reste ouverte : chacun parle quand il veut.
Wi-Fi, HTTP et WebSocket ESP32, Wi-Fi et WebSocket
L’architecture réseau
La page une fois, puis les messages en continu.
Votre protocole
| Sens | Message | Signification |
|---|---|---|
| Console → navigateur | STATE:PLAYING |
La phase de jeu change |
| Console → navigateur | SCORE:12 |
Nouveau score |
| Navigateur → console | FOOD:12,7 |
Demande : une pomme en (12, 7) |
- Écrit avant le code, dans votre repo
- La console est l’arbitre : le navigateur propose, la console décide
- Un message invalide est ignoré, jamais un plantage
Un échange, dans l’ordre
sequenceDiagram
participant N as Navigateur
participant C as Console
N->>C: GET / (HTTP)
C-->>N: la page
N->>C: ouverture du WebSocket
C->>N: STATE:PLAYING
N->>C: une demande du joueur 2
Note over C: la console valide, puis applique
C->>N: le nouvel état
Les messages sont à vous : seul l’enchaînement est imposé.
La déconnexion fait partie du jeu
stateDiagram-v2
[*] --> Attente
Attente --> Partie : navigateur connecté
Partie --> Pause : navigateur perdu
Pause --> Partie : navigateur revenu
Partie --> Fin : serpent mort
Fin --> Attente : START
Un téléphone qui se met en veille est un événement de la machine à états, pas une surprise.
Votre organisation
Huit séances, cinq jalons
Les séances
| Séance | Objectif |
|---|---|
| P1 | Lancement, repo, Snake et joueur 2 sur papier |
| P2 | Le Snake en solo : grille, déplacement |
| P3 | Le Snake en solo : croissance, collisions |
| P4 | Le réseau et le protocole |
| P5 | Le joueur 2 : sa page, son rôle |
| P6 | Le joueur 2 intégré au jeu |
| P7 | La robustesse et les tests |
| P8 | Finalisation et démonstration |
Plus de pas à pas
Pour le Snake, aucun tutoriel ne vous guide ligne à ligne. C’est le cœur du projet : chercher, essayer, comparer, choisir.
- Comment mémoriser un corps qui grandit ?
- Comment avancer à sa cadence dans une game loop à 16 ms ?
- Que redessiner quand le serpent avance d’une case ?
Du code trouvé ailleurs (en ligne, assistant IA) ? Permis, s’il est compris et cité dans votre journal de bord.
Les livrables
| Dans le repo | Contenu |
|---|---|
| La carte | Reprise des TD3 et TD4 : schéma, routage, tests |
| Le firmware | Code en modules, machine à états, protocole |
| Les tests | Chaque exigence vérifiée, avec son résultat |
| Le journal de bord | Une entrée par séance, avec vos sources |
| La présentation | Une courte vidéo ou un poster |
Et une démonstration en direct : une partie complète, déconnexion du navigateur comprise.
Énoncé du projet Méthodologie de projet
L’évaluation
30 %
les TD, carte comprise, déjà validés en séance
70 %
le projet : jeu, joueur 2, code, repo et démo
Une note commune au binôme : chacun doit savoir expliquer tout le projet, y compris ce qu’il n’a pas codé.
À retenir
- Le projet démarre sur votre console soudée, avec le Pong comme base
- Le joueur 2 joue un autre jeu, depuis un navigateur
- Console en point d’accès, WebSocket, protocole écrit d’abord
- La console est l’arbitre, la déconnexion est prévue
- Pas de pas à pas : vous concevez, vous justifiez, vous documentez
Pour la suite de la séance
- Créer votre repo depuis le template, et le partager à votre binôme
- Lire l’énoncé en entier, et noter vos questions
- Écrire votre idée de joueur 2 dans le journal de bord
- Sur papier : la grille, le corps du serpent et la machine à états du Snake
Objectif de la prochaine séance : un serpent qui avance sur la console.
Créer son repo depuis le template Énoncé du projet
