Contexte
Cet exercice a été réalisé dans le cadre des cours de The Odin Project (curriculum "Web Development 101"). Le site et les instructions étant en Anglais, j'ai travaillé en Anglais également.
Il a été réalisé en deux parties : d'abord, nous devions concevoir ce jeu en demandant à l'utilisateur ou l'utilisatrice quel coup il ou elle voulait jouer (à l'aide d'une fenêtre prompt), puis afficher les résultats dans la console. Vous pouvez consulter les instructions complètes directement sur The Odin Project .
Ensuite, plus loin dans le curriculum "Web Development 101", nous avons travaillé sur la manipulation du DOM. On nous a alors demandé de reprendre cet exercice, en y ajoutant cette fois des boutons à la place de la fenêtre pop-up, et d'afficher les résultats à l'écran. Vous pouvez consulter les instructions complètes directement sur The Odin Project .
Procédé
Pour la version visible dans la console de cet exercice, j'ai utilisé uniquement du JavaScript, que j'ai inséré dans une page HTML vide. Pour la version plus avancée, j'ai utilisé du HTML, du CSS et du JavaScript avec de la manipulation DOM.
Dans les deux cas, le coup joué par l'ordinateur est généré de manière aléatoire : la méthode Math.random() génère un chiffre entre 1 et 3, chaque chiffre est attribué à un coup (pierre, feuille ou ciseaux).
Que ce soit en tapant "rock", "paper" ou "scissors" dans la fenêtre, ou en cliquant sur l'une des images, lorsque l'utilisateur ou l'utilisatrice a choisi son coup, le script compare au coup de l'ordinateur pour définir quel joueur a gagné cette manche.
Dans la version avec boutons, le score et le résultat de la manche sont ensuite affichés à l'écran, et lorsque l'un des joueurs obtient 5 points, le jeu s'arrête et se remet à zéro.
Il y a un EventListener sur chaque bouton, qui permet d'identifier le choix de l'utilisateur ou utilisatrice et qui déclenche une fonction. Cettte fonction enregistre le coup choisi et déclenche le jeu (avec une fonction qui définit le coup joué par l'ordinateur, puis une comparaison entre les deux et l'affichage du résultat de la manche).
Vous pouvez cliquer sur l'image pour voir la page avec boutons ou ici pour voir la version qui passe par la console, ou visualiser le code dans ce repository (dossier GitHub).