Pierre-Feuille-Ciseaux

Un jeu Pierre-Feuille-Ciseaux pour manipuler variables, conditions et génération de HTML.

Le but de cet atelier est de vous familiariser avec les bases de PHP en créant un jeu simple : Pierre, Feuilles, Ciseaux. Vous allez apprendre à manipuler des variables, à utiliser des conditions et à générer du contenu HTML.

Préparation

Pour tous les ateliers, nous allons utiliser VSCode comme IDE, et Docker pour exécuter notre code PHP.

Attention

Si vous aviez déjà un projet en cours, assurez-vous de bien stopper les conteneurs Docker des projets précédents pour éviter les conflits de ports.

Vous trouverez la procédure ici : Changer de projet

Lancer la stack Docker

Rendez-vous dans le dossier racine du dépôt git puis dans 002-php-chifoumi. En suite, lancez la stack docker avec la commande suivante :

docker compose up -d --build

Vous pouvez en suite vérifier que tout fonctionne en allant à l'adresse http://localhost:80.

Attention

Si vous avez une erreur HTTPS, acceptez simplement le certificat auto-généré.

Attention

Pour ceux qui ont le problème de page qui ne se raffraichissent pas sur Windows

Vous allez devoir changer votre configuration docker pour ce projet. Pour se faire :

Allez dans le dossier du projet
Ouvrez le fichier docker-compose.yml
Dans la section port, vous devriez avoir des notations comme suit :

    ports:
      - "80:80" # HTTP
      - "443:443" # HTTPS
      - "443:443/udp" # HTTP/3

Changez les ports de gauche (ceux avant les :) pour des ports libres sur votre machine, par exemple :

    ports:
      - "8080:80" # HTTP
      - "444:443" # HTTPS
      - "444:443/udp" # HTTP/3

Lorsque dans la documentation il est fait référence à http://localhost ou https://localhost, vous devrez utiliser les ports que vous avez configurés : https://localhost:444 pour accéder à votre projet.

Ouvrir le projet dans PHPStorm

Ouvrez PHPStorm, puis :

Si vous êtes déjà dans un projet :
- File > Open
- Sélectionnez le dossier racine du dépôt git > 001-php-chifoumi/app
Si vous n'êtes pas dans un projet :
- Open
- Sélectionnez le dossier racine du dépôt git > 001-php-chifoumi/app

Configurer l'interpréteur PHP

Pour éviter que vous n'ayez à installer PHP sur votre machine, nous allons utiliser l'interpréteur PHP fourni par Docker.

Pour cela :

Allez dans File > Settings > Languages & Frameworks > PHP
Cliquez sur les ... à côté du champ CLI Interpreter
Cliquez sur le + en haut à gauche pour ajouter un nouvel interpréteur
Sélectionnez From Docker, Vagrant, WSL, Remote...
Sélectionnez Docker Compose
Si le champ Server est vide, cliquez sur les ... à côté et laissez les options par défaut, puis cliquez sur OK
Dans le champ Configuration file, cliquez sur les ..., retirez tout le contenu en cliquant sur chaque entrée puis le bouton - et sélectionnez le fichier docker-compose.yml à la racine du dossier actuel : 002-php-chifoumi/docker-compose.yml
Dans le champ Service, sélectionnez php
Cliquez sur OK pour valider l'ajout de l'interpréteur
Cliquez sur Apply puis OK pour fermer la fenêtre des paramètres

Afficher quelque chose dans le navigateur

En ouvrant le fichier index.php, vous pouvez voir qu'il y a déjà du code PHP dedans.

<?php

echo "Hello World!";

Si vous allez à l'adresse http://localhost:80, vous devriez voir le texte "Hello World!" s'afficher.

Pour faire notre jeu, nous allons devoir afficher une page HTML. Pour cela, nous allons utiliser la syntaxe heredoc.

Consigne

Utilisez la syntaxe heredoc pour afficher une page HTML simple avec un titre "Jeu Pierre, Feuilles, Ciseaux".

Pour faire propre, je vous conseille :

De mettre votre HTML dans une variable $html et de la remplir avec la syntaxe heredoc.
D'utiliser echo $html; pour afficher le contenu de la variable en fin de votre script.

Astuce

Si vous êtes comme moi et que vous ne voulez pas vous prendre la tête avec le CSS/JS mais que ça rende bien quand-même, vous pouvez utiliser le template "starter" de Bootstrap 5.

https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start

De manière alternative, vous pouvez aussi utiliser Tailwind avec le Play CDN : https://tailwindcss.com/docs/installation/play-cdn.

Ajouter les éléments graphiques

Maintenant que nous avons une page HTML qui s'affiche, nous allons ajouter les éléments graphiques nécessaires pour jouer au jeu.

Consigne

Modifiez votre code pour ajouter les éléments suivants à votre page HTML :

Un titre <h1> avec le texte "Jeu Pierre, Feuilles, Ciseaux".
Deux zones pour afficher les choix du joueur et de PHP.
Une zone pour afficher le résultat du jeu (gagné, perdu, égalité).
Trois boutons pour que le joueur puisse choisir entre Pierre, Feuille et Ciseaux.
Un bouton pour réinitialiser le jeu.

Gérer les choix du joueur

Maintenant que nous avons les éléments graphiques, nous allons gérer les choix du joueur.

Pour passer les informations du joueur au serveur, nous allons utiliser les paramètres de query dans l'URL. Par exemple, si le joueur choisit "Pierre", l'URL sera http://localhost:80/?player=pierre.

Consigne

Faites en sortes que lorsque le joueur clique sur un des boutons (Pierre, Feuille, Ciseaux), le choix du joueur soit envoyé au serveur via les paramètres de query dans l'URL.
Récupérez le choix du joueur dans votre script PHP en utilisant la variable superglobale $_GET. (documentation: https://www.php.net/manual/en/reserved.variables.php)
Affichez le choix du joueur dans la zone prévue à cet effet.
Si aucun choix n'a été fait (c'est-à-dire si le paramètre player n'est pas présent dans l'URL), affichez un message invitant le joueur à faire un choix.
Faites en sortes que le bouton de réinitialisation redirige vers l'URL sans paramètre player.

Gérer le choix de PHP

Maintenant que nous avons le choix du joueur, nous allons générer un choix aléatoire pour PHP.

Pour maintenir une cohérence dans le jeu, nous allons utiliser un tableau pour stocker les choix possibles (Pierre, Feuille, Ciseaux).

Consigne

Créez un tableau $choices contenant les trois choix possibles : "pierre", "feuille", "ciseaux".
Trouvez une fonction PHP qui permet de sélectionner un élément aléatoire dans un tableau. (Indice : https://www.php.net/manual/en/ref.array.php)
Utilisez cette fonction pour sélectionner un choix aléatoire pour PHP à partir du tableau $choices.
Affichez le choix de PHP dans la zone prévue à cet effet.

Déterminer le résultat du jeu

Maintenant que tout est en place, nous allons déterminer le résultat du jeu en fonction des choix du joueur et de PHP.

Pour déterminer un gagnant, nous allons utiliser l'agorithme suivant :

CHOIX_JOUEUR = ...
CHOIX_PHP = ...
RESULTAT = "Perdu"

SI CHOIX_JOUEUR == CHOIX_PHP 
ALORS
    RESULTAT = "Égalité"
SINON SI (CHOIX_JOUEUR == "pierre" ET CHOIX_PHP == "ciseaux") OU
        (CHOIX_JOUEUR == "feuille" ET CHOIX_PHP == "pierre") OU
        (CHOIX_JOUEUR == "ciseaux" ET CHOIX_PHP == "feuille") 
ALORS
    RESULTAT = "Gagné"
FIN SI

Astuce

Vous avez plusieurs manières d'implémenter cet algorithme en PHP (du plus simple au plus complexe):

Utiliser des if, elseif et else pour vérifier chaque condition.
Utiliser un switch pour vérifier le choix du joueur, puis imbriquer des if ou d'autres switch pour vérifier le choix de PHP.
Utiliser un match pour vérifier en même temps le choix du joueur et le choix de PHP et déterminer le résultat.

Consigne

Implémentez l'algorithme ci-dessus pour déterminer le résultat du jeu.
Affichez le résultat dans la zone prévue à cet effet.

Bonus

Les sujets suivants sont à faire en bonus si vous avez terminé les consignes principales.