Projets d'élèves

1. Introduction

Je me sers beaucoup d’internet pour me divertir, que ce soit pour utiliser les réseaux sociaux, pour regarder des séries ou encore pour jouer à des jeux. J’ai donc voulu contribuer aux dizaines de milliers de jeux déjà existants en en créant un moi-même. Mon jeu sera inspiré du jeu « The impossible Quiz ». Ce jeu contient une centaine de questions auxquelles l’utilisateur doit y répondre tour à tour. S’il perd ses trois vies, il doit tout recommencer à zéro. Je devrai donc créer mon propre site avec des questions stockées dans une base de données, et qui seront de plus en plus difficiles et piégées. Je ne sais pas exactement combien de questions mon jeu comportera, mais j'essayai d'en faire un maximum afin que le jeu ait de l'intérêt. Le projet sera réussi si l’utilisateur perd la tête en y jouant.

2. Matériel et méthodes

2.1 Matériel

• Un ordinateur
• Une base de données (phpMyAdmin)
• L'application Terminal

2.2 Méthode

Mon projet sera constitué de cinq fichiers. Le premier, en CSS, décrira le style de tous les autres fichiers. Les quatre autres fichiers seront en php. Il y aura une page d'accueil du jeu qui redirigera vers la première question à l'aide d'un bouton, une page qui s'ouvrira si le joueur perd et qui redirigera vers la page d'accueil et une page s'il gagne. Le dernier fichier, le plus complexe, servira à afficher la question qu'il ira chercher dans la base de données en fonction de la progression du joueur. Ce fichier ira faire une deuxième requête dans la base de données afin de vérifier la réponse de l'utilisateur, ce qui déterminera si il changera de question ou non. Ce fichier gérera aussi le nombre de vies de l'utilisateur, qui devra tout recommencer s'il en perd trois.

3. Résultats

Le résultat de mon jeu est plutôt convaincant. En effet, le système de vies fonctionne parfaitement, ainsi que les questions tirées de la base de données.

3.1 Fichiers en CSS

Le fichier CSS sert à décrire la forme de mon jeu. J'ai commencé par décrire le fond et l'aspect général du site:

html {
font-family: "Comic Sans MS";
}
body {
background: #79D0E8;
margin-left: 5%;
margin-right: 5%;
}

J'ai ensuite décrit le reste du site, tels que le tableau, la taille du texte ou les boutons.

3.2 Fichiers de début et de fin

3.2.1 Page d'accueil

Le premier fichier, celui de la page d'accueil, s'appelle index.php afin qu'il s'ouvre automatiquement lorsque l'on ouvre ma page. Il est simplement constitué d'un titre, d'un texte visant à décourager les joueurs et d'un bouton redirigeant vers la première question. Ce dernier a été programmé à l'aide du code ci-dessous.

<form action="question.php">
<p><input type="submit" value="Play!" /></p>
</form>

3.2.2 Défaite et victoire

Si le joueur perd ses trois vies, il est redirigé automatiquement vers une page programmée par le fichier lose.php (voir point 3.4.1). Cette page contient un texte ainsi qu'un bouton redirigeant vers la page d'accueil si le joueur souhaite retenter sa chance.
Lorsque je joueur a terminé les question en ayant conservé au moins une vie, il est redirigé vers une page codée par le fichier theend.php. J'ai ajouté une image à ce fichier, ainsi qu'un texte et un bouton redirigeant vers la page d'accueil.

3.3 La base de données

Afin d'éviter d'avoir autant de fichiers que de questions, j'ai stocké mes questions dans une base de données à l'aide du site phpMyAdmin. J'ai donc crée une table appelée questions, contenant 5 colonnes: l'ID (le numéro de la question), la question, les quatre réponses possibles et la bonne réponse. Une ligne de cette table ressemble à ceci:

Mon projet étant constitué de 32 questions, ma table a donc 32 lignes.

3.4 Les questions

Le fichier le plus complexe de mon projet, appelé questions.php, est celui codant les questions à afficher.

3.4.1 Connection à la base de donnés.

Les questions que ce fichier va chercher se trouvent dans une base de données (phpMyAdmin). Il m'a donc fallu me connecter à la base de données au début du fichier à l'aide du code suivant:

<?php
include_once("../../../etc/mysql.inc.php");
$db = mysqli_connect($MYSQL_SERVER, $MYSQL_USER, $MYSQL_PASS, "paqc_heloiseallaman");
print mysqli_error($db);
session_start();
?>

Ce code sert à importer les détails de la connection, à ouvrir la connection, à vérifier qu'il n'y a pas d'erreurs et à ouvrir une session.

3.4.2 Vérifier la réponse

Paradoxalement, le fichier se charge de vérifier la réponse du joueur avant même d'afficher la question.

if(isset($_REQUEST"answer")) {
if ($_REQUEST"answer" == $_SESSION"answer") {
$_SESSION"counter" -= 1;
$_SESSION"query" += 1;
}
}

Ainsi, si la variable $_REQUEST"answer" existe, c'est à dire si l'utilisateur de la session a déjà répondu à une question lors du dernier chargement de la page, le fichier va comparer cette réponse à celle notée dans la base de données. Si les deux réponses sont les mêmes, le compteur de vies ($_SESSION"counter") va régresser de 1 afin de compenser la perte de vie à chaque chargement de la page. Le numéro de la question ($_SESSION"query"), quant à lui, augmente de un afin d'afficher la question suivante.

3.4.3 Nombre de vies

Le code suivant sert à compter le nombre de vies restant au joueur.

$lose = 3;
if (isset($_SESSION"counter") && $_SESSION"counter" < $lose) {
$_SESSION"counter" += 1;
} elseif (isset($_SESSION"counter") && $_SESSION"counter" >= $lose) {
$_SESSION"query" = -1;
$_SESSION"counter" = 0;
header('Location: lose.php');
} else {
$_SESSION"counter" = 1;
}

La variable $lose indique que l'utilisateur a trois vies. Ainsi, si je décidais de changer ce nombre de vies, il me suffirait de changer cette valeur. La variable $_SESSION"counter" compte le nombre de fois qu'une session a rafraichi la page. Si cette variable existe déjà et qu'elle est plus petite que la variable $lose, elle augmente de 1 à chaque rafraîchissement de la page. Si elle n'existe pas, elle est définie à 1. Ainsi, si la réponse donnée est la mauvaise, le compteur augmentera. Si c'est la bonne, ce sera compensé comme vu dans le point précédent. Si la variable dépasse 3, le compteur de vie et de questions sont remis à 0, et le joueur est redirigé vers la page lose.php.

3.4.4 Le numéro de la questionr

Le code suivant sert à poser la variable du numéro de la question à afficher (ce numéro est appelé $_SESSION"query").

if (!isset($_SESSION"query") or !is_numeric($_SESSION"query") or ($_SESSION"query")< 0) {
$_SESSION"query" = 1;
} elseif (($_SESSION"query") == 33) {
header('Location: theend.php');
$_SESSION"query" = -1;
$_SESSION"counter" = 0;
}

Ainsi, si $_SESSION"query" n'existe pas, elle est mise à 1. Si elle est supérieure au numéro de la dernière question, le joueur est redirigé vers theend.php. Le fichier peut ensuite aller chercher la bonne question dans la base de données.

$results = $db->query("SELECT * FROM questions WHERE ID=".$db->escape_string($_SESSION"query"));
$question = $results->fetch_assoc();
$_SESSION"answer" = $question"right_answer";

Ce code va chercher la question dont l'ID est égale à la variable $_SESSION"query", ainsi que sa bonne réponse.

3.4.5 Afficher les questions

La question est affichée de la façon suivante:

<h2><?php print $question'label'; ?></h2>

Les réponses sont affichées dans un tabeau, afin que chacune soit à coté du bouton que l'utilisateur doit sélectionner.

<tr>
<th><input name="answer" type="submit" value="a" /></th>
<td><?php print $question'answer_a'; ?></td>
</tr>

Il en va de même pour les réponses b, c et d. Le nombre de vies est affiché en bas de la page.

<p>Lives: <?php print(4 - $_SESSION"counter")?> </p>

Ainsi, les questions s'affichent de cette manière:

4. Discussion

4.1 Erreurs et améliorations

Bien que je sois plutôt satisfaite de mon projet, beaucoup d'améliorations pourraient encore être faites. Premièrement, il faudrait inventer plus de questions. En effet, mon quiz comporte 32 questions, ce qui est suffisant pour qu'il soit intéressant d'y jouer, mais il reste relativement facile et rapide à terminer, ce qui est le but contraire du jeu. J'ai hésité à réduire le nombre de vies à 2, mais j'ai pensé que le jeu perdrait de son intérêt, car le joueur devrait recommencer trop souvent et n'avancerait que très peu. Malheureusement, je n'ai pas eu le temps ni l'inspiration de trouver plus de questions. Ensuite, il faudrait améliorer le visuel du site. Bien que j'aie décrit les bases de la forme dans un fichier CSS, je n'ai passé que très peu de temps sur le visuel afin de me concentrer sur la partie php et sur les bases de données. Il faudrait donc améliorer un peu l'aspect général du site, qui est très basique et peu attrayant.

4.2 Difficultés et apprentissage

Lorsque j'ai imaginé mon projet, j'avais en tête de faire différents types de questions comprenant des images, des sons, ou des objets se mouvant par exemple. Le jeu en aurait été plus intéressant, car il n'aurait pas été uniquement constitué d'une question sous forme de texte, avec quatre réponses possible, sous forme de texte également. Cependant, programmer cela à l'aide de bases de donnés aurait été bien trop complexe dans le temps qui m'était imparti. Comme je ne connaissais pas la façon dont les bases de données fonctionnaient, je ne savais pas que toutes les entrées d'une table devaient avoir la même forme.

Malgré ces difficultés, j'ai pu apprendre beaucoup de ce projet. En effet, il m'a appris a programmer en HTML, en CSS ainsi qu'en php, sans oublier que je sais désormais utiliser des bases de données à l'aide d'outils tels que phpMyAdmin, ce qui peut s'avérer très utile dans mon futur, car les bases de données sont présentes partout. Je comprends également mieux quel est le lien entre la programmation, les fichiers et le rendu des sites internet.

5. Conclusion

Ainsi, je pense avoir atteint le but de mon projet, étant donné qu'il fonctionne très bien. Je l'ai déjà fait essayer à ma famille et à quelques amis, et ils se sont énervé devant l'ordinateur, tout en souhaitant continuer afin de finir le jeu, ce qui était le but que je m'étais fixé d'atteindre. Je me réjouis donc de faire tester le jeu à d'autres afin d'avoir plus de retours et pourquoi pas continuer à l'améliorer.
Comme vu précédemment, mon projet n'est pas parfait et je pourrais lui apporter encore beaucoup de modifications afin de l'améliorer. Je suit tout de même contente du résultat, et je réalise maintenant qu'il est très simple de programmer un site internet d'autant plus que l'on peut accomplir beaucoup avec très peu de base. Ce projet m'a donné envie de créer plus de choses sur internet, car je réalise maintenant la multitude de possibilités qui s'offre à moi, pour autant que je me donne le temps et les moyens de le faire.

Références

phpMyAdmin
Mon jeu
Bases de données
Sessions