22P — Untrivial poursuit
Par admin le mardi, mai 10 2022, 12:00 - 2021–2022 - Lien permanent
Ce projet a été réalisé par Zurbuchen, Marc.
1. Introduction
Vous passez du temps avec vos amis lorsque vous ne savez plus quoi faire, quoi de mieux qu’un jeu
de société amusant ! Or vous n’en n’avez pas sous la main, en revanche vous avez tous un téléphone
portable doté d’une connexion internet.
Le but du projet serrait de crée un site où il serait possible de jouer à un jeu de société à base de
cartes tirée aléatoirement. Dans notre cas un jeu inspiré de trivial poursuit, l'objectif serait de coder et revisiter le jeu afin
de l'adapter à l’utilisation sur un navigateur ainsi que d'y ajouter des règles un peu différente pour un peu d'originalité notamment avec des gages si une personne répond faux à une question et un système de points
pour celui qui répond juste. L’intérêt serait de pouvoir personnaliser l’expérience de jeux en mettant
la possibilité a chaque joueur de mettre son nom ainsi que de mettre ses propres gages rendant
chaque partie unique. Le jeu se joue en multijoueur local c'est a dire a plusieurs mais sur un seul appareil.
Pour ce projet il faudra apprendre a utiliser des langages de programmation/description pour le web ainsi qu'une base de données.
2. Matériel et méthodes
2.1 Matériel
- un ordinateur doté d'une connexion internet
- l'accès a un serveur web avec MySQL installé dessus
Je pense que je ne vous surprend pas en vous disant qu'il ne faut pas plus de matériel pour faire un site internet.
2.2 Méthode
Je vais vous expliquer mon projet page par page a l'exception du CSS que j'expliquerait en dernier. pour comprendre de quoi je parle je vous recommande fortement d'aller voir moi site : https://dev.gyre.ch/marc.zurbuchen/
2.2.1 Page d'accueil
Sur cette page rien de particulier c'est une simple page html avec le titre du jeu dans une class et un lien pour le commencer dans une autre class afin de pouvoir utiliser ces dernières plus tard lors du CSS
2.2.2 Lanceur du jeu
Sur cette page apparaît tout les réglages pour personnaliser avant de pouvoir commencer a jouer c'est a dire le nombre de joueur, leurs nom ainsi que le gage en cas de mauvaise réponse. Il était initialement prévu d'avoir plusieurs gages mais j'ai décidé de n'en mettre en seul car plus n'apporterait pas grand chose au jeu mais engendrerait des difficultés technique supplémentaire.
2.2.2.1 Nombre de joueurs
<div class="table_joueur">
<!-- selection du nombre de joueurs-->
<form action = "untrivialpursuitgamelauncher.php" method = "post">
<p>nombre de joueurs</p>
<select name="nbr" onchange="this.form.submit()">
<?php for ($choix = 1; $choix <= 4; $choix++){ ?>
<option value="<?php print $choix; ?>"><?php print $choix; ?></option> <?php } ?>
</select>
</form>
<!-- enregistrement du nombre de joueurs-->
<?php
if (isset($_REQUEST["nbr"]) and is_numeric($_REQUEST["nbr"]))
{$_SESSION["nbrjoueurs"] = $_REQUEST["nbr"];}
else
{$_SESSION["nbrjoueurs"] = 1;}
?>
Pour pouvoir sélectionner le nombre de joueur j'ai utilisé l'élément de form select pour faire un post sur la même page et comme option j'ai mis la valeur du nombre de joueur qui est dans une boucle for qui va de 1 à 4. Une fois choisi grâce a ce code: https://jsbin.com/ofUSEDA/1/edit?html,output javascript le nombre se submit directement et recharge donc la page. Il est alors possible avec du php de request la valeur si elle correspond a nos conditions ( existe et est un chiffre ) pour l'enregistrer comme variable sur le serveur avec $_SESSION, autrement par défaut il n'y a qu'un joueur.
2.2.2.2 Nom des joueurs et lancement du jeu
<!-- nom des joueurs,gage et lancement du jeu -->
<?php for ($numjoueur = 1; $numjoueur <= $_SESSION["nbrjoueurs"]; $numjoueur++){ ?>
<form action = "game/index.php" method = "post">
<label for = "player">ajouter joueur <?php echo $numjoueur ?> </label><br />
<input type = "text" name = "player<?php echo $numjoueur ?>"><br /> <?php ; } ?>
<label for = "gage">ajouter un gage</label><br />
<input type = "text" name = "gage1"><br />
<input type = "submit" value = "lancer le jeu" class="button">
</form>
</div>
Ici j'ai utiliser l'élément de form input text pour pour pouvoir rentrer un nom de joueur. Pour pouvoir être post il faut attribuer un name a chaque joueurs je les ai donc appelé player suivie d'une variable numjoueur ce code étant dans une boucle for qui va de 1 jusqu'au nombre de joueur précédemment sélectionner il y aura donc une imput qui va apparaitre par joueur. Finalement il y a une imput text pour le gage et une imput submit étant donné que le form action est diriger a la page suivante les nom vont être post sur celle-ci et nous allons être rediriger dessus.
2.2.3 Le jeu
Nous voilà enfin arrivé à la page du jeu en lui même.
2.2.3.1 Récupération des questions/réponses
<!-- connection a la base de donne et recuperation des cartes -->
<?php
$num_carte= rand(1,12);
include("../../../etc/mysql.inc.php");
$db = mysqli_connect($MYSQL_SERVER, $MYSQL_USER, $MYSQL_PASS, 'paqc_marczurbuchen');
if($db === false){
die("Erreur de connection: " . mysqli_connect_error());
}
$result = mysqli_query($db, "SELECT *
FROM cartes
WHERE id=$num_carte");
if($result === false){
die("Erreur de select: " . mysqli_error($db));
}
$data = mysqli_fetch_all($result);
Ce code permet d'établir une connexion à la base de donnée et de sélectionner une ligne de la table cartes pour à la finalité la mettre dans la variable data. Pour sélectionner une ligne je demande à regarder l'id pour qu'il soit égal à un nombre aléatoire entre 1 et 12 (car il y a 12 questions).
2.2.3.2 Variables
initialisation des variables joueurs et gage jusqu'a 4 joueurs ainssi que l'enregistrement dans la session de la carte pioche et compteur de compteur de
tour
if(isset($_POST["player1"])){
$_SESSION["joueur1"] = $_POST["player1"];
$player1 = $_SESSION["joueur1"];
$_SESSION["status"] = 1;}
if(isset($_POST["player2"])){
$_SESSION["joueur2"] = $_POST["player2"];
$player2 = $_SESSION["joueur2"];}
if(isset($_POST["player3"])){
$_SESSION["joueur3"] = $_POST["player3"];
$player1 = $_SESSION["joueur3"];}
if(isset($_POST["player4"])){
$_SESSION["joueur4"] = $_POST["player4"];
$player4 = $_SESSION["joueur4"];}
if(isset($_POST["gage1"])){
$_SESSION["gage1"] = $_POST["gage1"];
$gage1 = $_SESSION["gage1"];}
if($_SESSION["status"] > $_SESSION["nbrjoueurs"]){
$_SESSION["status"] = 1;}
$_SESSION["data"] = $data;
/* changement des etats de jeu */
if(isset($_POST["solution"])){
$etat ="s";}
elseif(isset($_POST["faux"])){
$etat ="f";}
elseif(isset($_POST["juste"])){
$etat ="j";}
elseif(isset($_POST["suivant"])){
$etat ="jeu" ;
$_SESSION["status"] = $_SESSION["status"] + 1;}
else {
$etat ="jeu";}
$status = $_SESSION["status"];
?>
Pour initialiser les variables des joueurs il est normalement possible de le faire avec une boucle for mais je n'ai malheureusement pas réussi a la faire fonctionner j'ai donc opté pour une solution plus rudimentaire car elle n'est pas agréable a voir et ne prend pas en compte le nombre de joueur. Pour chacun des joueurs le code regarde si il y a un post avec sa variable et si cela est le cas le code va récupérer la valeur et la mettre dans deux autre variable pour chaque joueur dont une $_SESSION afin que les nom soit sauvegarder sur le serveur pour la suite du jeu.
La deuxième partie de ce code sert a déterminer dans quel état du jeu nous somme pour pouvoir exécuter le code adapté a l'état. Le code regarde si il y a un post avec un des état et si c'est le cas il change la valeur de la variable etat en la bonne valeur autrement par défaut il est en état de jeu.
Un dernier élément que nous pouvons trouver dans cette partie du code est la variable $_SESSION"status" elle permet de savoir à qui est le tour de jouer. Elle est tout le temps égal à 1 quand le post player1 est set car cela n'arrive qu'une seul fois dans une partie et augmente de 1 a chaque fois qu'il y a le post suivant car c'est au joueur suivant de jouer et finalement si sa valeur dépasse celle du nombre de joueur participant elle reviens a 1.
2.2.3.3 Actions
<!-- annonce du joueur (devrait aussi etre mis dans une boucle pour fonctionner correctement) -->
<div class=player>
<h1>
<?php if ($status== 1)
{echo $_SESSION["joueur1"];}
if ($status== 2)
{echo $_SESSION["joueur2"];}
if ($status== 3)
{echo $_SESSION["joueur3"];}
if ($status== 4)
{echo $_SESSION["joueur4"];}
?> a toi de jouer
</h1>
</div>
<div class=carte>
<!-- code a executer en fonction de l'etat du jeu -->
<?php
switch ($etat){
case "jeu":
print ($data[0][1]);
?> <form method="post">
<input type="submit" name="solution" class="button" value="solution">
</form>
<?php break;
case "s":
print ($data[0][2]);
?> <form method="post">
<input type="submit" name="juste" class="button" value="juste">
</form>
<form method="post">
<input type="submit" name="faux" class="button" value="faux">
</form>
<?php ;
break;
case "f":
print "vous avez faux vous devez " . $gage1 . "!";
?> <form method="post">
<input type="submit" name="suivant" class="button" value="suivant">
</form>
<?php ;
break;
case "j":
?> <p> Bravo vous avez la bonne solution ! </p>
<form method="post">
<input type="submit" name="suivant" class="button" value="suivant">
</form>
<?php } ?>
Dans cette partie du code il y a les actions, se qui se passe a l'écran dans le jeu. Pour commencer selon le status le code va annoncer a qui est le tour de jouer puis il y a la div carte qui affiche les élément du jeu. Dans cette dernière nous trouvons un switch qui va regarder la variable etat et ainsi selon sa valeur elle va exécuter un code différent. Dans l'état jeu le code affiche la question ainsi qu'une input submit pour passer a l'état r ou réponse, dans cette dernière il y a la réponse qui s'affiche ainsi que deux input submit l'une pour passer a l'état j ou juste et l'autre pour passer a l'état f ou faux.
Dans un des deux cas le jeux vous félicite et dans l'autre vous dit de faire la variable gage. Dans les deux cas il y a la même input submit pour repasser à l'état jeu.
Je n'ai finalement pas mis en place de système de point pour les réponse juste car cela aurait ajouter une difficulté supplémentaire que j'aurait dû gérer.
2.2.4 CSS
body {
background-color:#03224c;
}
.title {
text-align: center;
font-size:100%;
}
.title a {
text-decoration: none;
color:#ffd700;
font-family:"Alex Brush", cursive;
}
.button {
text-align: center;
line-height: 5;
}
.button a {
text-align: center;
text-decoration: none;
color:#ffd700;
background-color: red;
border-color: red;
padding: 1%;
border-radius: 10px;
}
.button a:hover {
color: green;
}
.table_joueur {
text-align: center;
background-color: rgba(0, 170, 255, 0.5);
padding: 1%;
width:30%;
margin:0% 35%;
border-radius: 10px;
}
.table_joueur .button {
text-align: center;
text-decoration: none;
color:#ffd700;
background-color: red;
padding: 0.1px 10px;
border-style:none;
}
.player {
text-align: center;
text-decoration: none;
color:#fd6c9e;
}
.carte {
text-align: center;
background-color: rgba(0, 170, 255, 0.5);
border-radius: 10px;
width:30%;
margin:0% 35%;
padding:10% 0%;
}
.carte .button {
text-align: center;
text-decoration: none;
color:#ffd700;
padding: 0.1px 10px;
}
voici le code css de tout mon site on peut y voir les différentes class et sous class et les valeurs que j'ai donné au élément pour qu'il aient la forme que nous pouvons voir sur le site.
3. Résultats
Le site fonctionne, est plutôt agréable à utiliser et le code contient tout ce qu'il faut avoir pour faire un site internet basique. Le jeu en lui même est jouable la plupart du temps il rempli donc l'objectif, mais il y a une nuance à apporter à la notion de jouable. Il réside tout de même malheureusement certain bug. Premièrement et certainement le plus grave même si vous pouvez jouez au jeux vous allez assez vite commencer a remettre en question votre culture général. En effet lorsque vous appuyiez sur solution ce n'est presque jamais la réponse correspondant à la question ce qui n'est du coup pas très pratique pour savoir si nous avons juste ou faux. En parlant de juste ou de faux lorsque vous avez faux le message vous demandant de faire votre gage ne fonctionne pas toujours, parfois vous avez un message d'erreur vous disant que la variable gage n'est pas définie. Finalement quand tout les joueurs sont passé une fois à la place de revenir au joueur1 de la partie il arrive que le site donne le tour au joueur1 de la partie précédente.
4. Discussion
Je trouve que l'objectif du projet est atteint même si le jeu ne ressemble pas exactement à ce qui était prévu de base. Le nombre de gage a été changé et le système de point abandonné pour gagner du temps et faciliter le développement. Le jeu garde la volonté initial de faire une version revisité de trivial pursuit dans un navigateur le seul éventuel écart avec l'objectif initial est que en supprimant le système de points le jeu perd son aspect compétitif mais étant donné que c'est une version revisité du jeu que j'ai fait ce n'est pas forcément très grave.
Il est vrais que malgré que le jeu soit fonctionnelle il n'est pas jouable de par ses beug grave. Le premier qui est les mauvaise solutions aux questions peux se résoudre en mettant une condition pour que la variable $num_carte ne soit pas initialisé a chaque fois que le site se recharge et donc change de valeur ce qui a pour conséquence de prendre une autre ligne de la table dans la base de donnée lorsque nous demandons la solution. Une autre solution serait de gérer autrement la variable $data pour que celle-ci ne change pas a chaque fois que la variable $num_carte change.
Concernant la variable gage non défini cela doit probablement provenir d'une petite erreur dans le code qui fait que la valeur qu'un lui attribue se perde quelque part dans le code. Finalement le beug de la mauvaise annonce de joueur m'est inconnu cela viens peut être de la façon dont sont stocké les variable $SESSION_ .
Si je devait améliorer mon code c'est au niveau des variable qui ne sont pas bien organisé et certaine me semble parfois superflu. De plus j'ai "bricolé" un code pour initier les variable des joueur mais une boucle for aurait été meilleur malheureusement je n'est pas réussi à en faire une fonctionnelle pour ce cas précis. Il y a d'autres parties de mon code que j'aurait voulu mettre dans une boucle for mais encore une fois je n'ai pas réussi à le faire dans le temps qu'il me restait à disposition.
5. Conclusion
Ce projet m'a permis de grandement améliorer mes connaissances en programmation web en développent une version revisité a ma manière du jeu de société trivial pursuit afin qu'il corresponde à une utilisation à plusieurs joueur sur un même appareil. Ce jeu comporte malheureusement des beug qui le rend injouable mais il est fini au niveau de la structure et a répondu à ses objectif.
Références
questions et solutions: https://loisirs.toutcomment.com/article/trivial-pursuit-150-idees-de-questions-14222.html
https://jsbin.com/ofUSEDA/1/edit?html,output
https://www.w3schools.com/default.asp