Codeur JUNIOR confiné - Episode 5,  mon premier jeu en réseau : Pierre Feuille Ciseaux

Codeur JUNIOR confiné - Episode 5, mon premier jeu en réseau : Pierre Feuille Ciseaux

On a encore ressorti les micro:bits 😁 Et puisque la dernière fois c'était une "application connectée" - envoi de messages par radio - on a décidé avec les enfants de faire cette fois une véritable application "client-serveur" pour coder un jeu en réseau.

Comme il faut toujours démarrer petit, on a choisi comme jeu le ...

Pierre Feuille Ciseau ✊✋✌️!!!!!

Conception

Avant de se lancer dans la réalisation, on a pris soin, comme d'habitude, de bien mettre au propre ce qu'on voulait faire !

Mon premier diagramme UML "User interaction"

Dans un diagramme de type "User interaction", on définit quels sont les acteurs (ici, on aura le joueur 1, le joueur 2, et le serveur), et comment ils vont interagir ensemble : on ne regarde pas l'implémentation mais uniquement les enchainements.

Aucun texte alternatif pour cette image

Détails :

  • la première étape est inspirée de notre programme de textos radios. Au lieu de faire le programme "Joueur" en double avec comme seule différence le numéro du joueur, on en fait un seul et l'un des deux se définira (via une action humaine) comme étant le "joueur 1", et l'autre sera le "joueur 2"
  • dans le pâté suivant, on démarre une partie. Chaque joueur envoie son choix de jeu au serveur (l'ordre importe peu); quand ce dernier a reçu les deux, il calcule le gagnant et le renvoie à tout le monde
  • chaque joueur sait donc s'il est le gagnant, ou pas. Il agit en conséquence, et on recommence une autre partie.

Le serveur

Aucun texte alternatif pour cette image

Le serveur se content de recevoir des choix et, quand il en a deux, de calculer le vainqueur puis de recommencer.

Les joueurs

Aucun texte alternatif pour cette image

Jouer, c'est simplement appuyer sur A, B ou A+B (pour Pierre, Feuille ou Ciseaux), envoyer le tout et attendre le résultat.

Pour simplifier, on n'a pas dessiné ici le "choix du joueur 1" (le premier qui appuie sur A sera le joueur 1) - mais on ne le perd pas de vue.

L'implémentation - les joueurs

Démarrage et bouton A

Aucun texte alternatif pour cette image

Note: comme expliqué dans le précédent article, définir un groupe radio est une bonne pratique pour deux programmes identiques, mais là c'est juste obligatoire : le serveur et les joueurs ne seront pas forcément raccords sur le groupe à utiliser. Et "envoyer 0" est notre petit hack pour avoir deux puces dans le simulateur 😁

Au démarrage, on attend de savoir ce que seront les joueurs 1 et 2 - et c'est le premier qui appuie sur A qui sera déclaré Joueur 1 (il notifie l'autre par un message direct).

On fait un peu de mathématiques au passage 😁 Si je suis 1, l'autre est 2, et vice versa : dans tous les cas si je suis "numéro", l'autre est "3 - numéro". Ca peut faire cogiter les enfants un bon moment... 😁😁😁

Antisèche pour ceux qui n'auraient pas suivi 😁

  • si je suis le joueur 1 et l'autre est le joueur "3-1", on arrive au résultat 2
  • si je suis le joueur 2 et l'autre est le joueur "3-2", on arrive au résultat 1

Bon, et maintenant, le jeu en lui même ! Enfin ! Si j'appuie sur A en plein jeu, ça joue Pierre.

Autres boutons, graphiques 3D de fous avec antialiasing, cell-shading, ...

Non je déconne

Aucun texte alternatif pour cette image

Note: excusez nos dessins, on n'est pas très doués...

Donc, en plus de A = Pierre, on fait B = Feuille et A+B = Ciseaux. Et pour simplifier, on envoie 0, 1 et 2 plutôt que les noms des éléments. Côté serveur, on s'en fiche en fait, mais calculer le vainqueur est plus évident (0 perd face à 1, qui perd face à 2, qui perd face à 0)

Note: on n'envoie pas la valeur directement, mais on envoie la valeur adossée au nom du joueur. La raison est que les messages radios n'indiquent pas l’émetteur : on saura que quelqu'un a joué Pierre, sans savoir qui... 😖 Pour pallier ça, on peut l'indiquer dans le message, grâce à la fonctionnalité "envoi de paire clef-valeur"

Réception / gestion du résultat

Aucun texte alternatif pour cette image

Note 1: on traite aussi le cas du démarrage, quand on a reçu l'information que l'autre est le joueur 1.

Note 2: on a fait un upgrade des micro:bit, on est passé à la V2, qui embarque un petit haut-parleur, d'où les actions "jouer le son" qui ne sont pas disponibles en V1.

Et voilà c'est tout pour les joueurs.

L'implémentation - le serveur

Aucun texte alternatif pour cette image

Rien de bien passionnant par rapport à la partie Joueur. Le calcul du vainqueur se fait avec un modulo (ça fait réviser les divisions au passage) et c'est tout...

Place au jeu !

Aucun texte alternatif pour cette image

Bon ok, c'est pas aussi rapide qu'avec les doigts 😁😁

D'un autre côté, on a pu découvrir plusieurs notions intéressantes :

  • les acteurs
  • leurs interactions
  • les protocoles de communication
  • la communication client / serveur
  • les graphismes 🤪
  • etc...
Nicolas Marcq

Could engineer at Hewlett Packard Enterprise

3 ans

Ça a l'air top! Hâte que les miens grandissent pour faire pareil.

Identifiez-vous pour afficher ou ajouter un commentaire

Plus d’articles de David Amar

Autres pages consultées

Explorer les sujets