Projets d'élèves

1. Introduction

Etant enfant, j'adorais jouer à Space Invaders, Pac-Man, sur la vieille console Atari de mes parents, ou encore au Snake.
En cherchant une idée pour ce projet d'informatique, je me suis souvenue de ces jeux. Les concepts étaient simples, les graphiques n'étaient pas extravagants (comparés aux jeux vidéo d'aujourd'hui) et pourtant ils ont procuré des heures et des heures de plaisir à des millards d'enfants, adolescents et adultes à travers le monde et sont restés des jeux culte à travers les années.
Il existe beaucoup de jeux faisant intervenir les caractéristiques d'un labyrinthe, mais celui qui m'a inspirée, et dont m'est venue l'idée de créer un labyrinthe, est le fameux Pac-Man. Je n'ai fait, en réalité, qu'en simplifier le concept, car bien que les jeux des années 80 soient moins élaborés que ceux d'aujourd'hui, ils restent bien plus complexes que tout ce que je pourrais réaliser. Mon projet consiste à créer un jeu sous forme de site.
Le jeu se présente sous la forme d'un labyrinthe duquel il faut faire sortir un objet, un carré coloré par exemple.
Le but de ce projet est de se familiariser avec divers langages: HTML, CSS, PHP principalement, et d'être capable de faire face aux différents problèmes qui pourraient surgir. La réalisation de ce projet a donc été divisée en plusieurs étapes, principalement deux. Premièrement, il s'agit d'être capable de réaliser un code qui puisse afficher les différents murs constituant le labyrinthe, et deuxièmement, d'être capable de réaliser un code qui permette de déplacer un objet dans le labyrinthe.

2. Matériel et méthodes

2.1 Matériel

• Un ordinateur (avec accès internet)
• L'application Terminal
• Un carnet et un crayon

Ce projet a été réalisé à l'aide des langages informatiques suivant

• HTML
• CSS
• PHP

2.2 Méthode

Comme cela a été évoqué précédemment, ce projet a été décomposé en deux étapes principales. Pour faire simple, l'une traite principalement de la programmation liée au graphique du labyrinthe et l'autre de la programmation liée aux mouvement dans le labyrinthe. Mais ces deux parties sont elles même subdivisées en plus petites parties dont la première, que voici, se trouve être la toute première étape du projet.

2.2.1 Papier crayon

Avant tout, il faut élaborer le projet. Le labyrinthe doit donc d'abord être dessiné avant toute tentative de retranscription virtuelle. Cela permet de mieux se représenter les différents aspects du projet.





image 1: dessin du labyrinthe

Ce premier dessin (image 1) permet de clarifier la direction dans laquelle il faut avancer. A ce stade, c'est le labyrinthe lui-même qu'il faut décomposer en petits fragments. En fait, le labyrinthe n'est qu'une suite de cases accolées les unes aux autres avec des bords visibles ou non.
En réfléchissant un peu, on peut réduire à 4 le nombre de cases nécessaires pour construire uniquement le "squelette" du labyrinthe. Une première case "A" sans bords visibles, une deuxième case "B" avec le bord supérieur visible, une autre case "C" avec le bord droit visible et une case "D" avec les cases supérieures et inférieures visibles.








image 2: dessin du labyrinthe avec ces cases

3. Résultats

3.1 Codes pour la représentation du labyrinthe

Arrive donc le moment de mettre toute cette théorie en pratique: il faut d'abord créer un fichier CSS (labyrintherep.css) dans lequel une table a été créée et les différentes cases définies.

table {
    border-collapse: collapse;
}

td {
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
}

code 1.a: fichier css

Dans ce code 1.a: fichier css, la table est créée et les variables qui seront égales pour chaque case telles que la hauteur ou la largeur sont définies.

.A{

}
.B{
    border-top: 1px solid black;
}
.C{
    border-left: 1px solid black;
}
.D{
    border-top: 1px solid black;
    border-left: 1px solid black;
}
.E{
    border-top: 1px solid black;
    border-left: 1px solid black;
    background: pink;
}

code 1.b: fichier css

C'est dans le code 1.b: fichier css définit à quoi vont resembler les cases. (une case "E" a été ajoutée par la suite pour définir le point de départ.)
Ensuite, un fichier HTML a été créé pour pouvoir écrire le code qui donnera forme au labyrinthe.

<!DOCTYPE html>
<html>
    <head>
        <title>labyrinthe à la main</title>
        <link rel="stylesheet" type="text/css" href="labyrintherep.css"/>
    </head>

    <body>
        <table>
            <tr>
                <td class="A">.</td>
                <td class="A">.</td>
                <td class="A">.</td>
                <td class="A">.</td>
                <td class="A">.</td>
                <td class="A">.</td>
                <td class="A">.</td>
            </tr>

            <tr>
                <td class="A">.</td>
                <td class="D">.</td>
                <td class="B">.</td>
                <td class="B">.</td>.</td>.</td>
                <td class="B">.</td>
                <td class="D">.</td>
                <td class="C">.</td>
            </tr>

            <tr>
                <td class="A">.</td>
                <td class="D">.</td>
                <td class="C">.</td>
                <td class="B">.</td>
                <td class="D">.</td>
                <td class="A">.</td>
                <td class="C">.</td>
            </tr> <tr>
                <td class="A">.</td>
                <td class="B">.</td>
                <td class="B">.</td>
                <td class="A">.</td>
                <td class="B">.</td>
                <td class="A">.</td>
                <td class="C">.</td>
            </tr>

            <tr>
                <td class="A">.</td>
                <td class="B">.</td>
                <td class="B">.</td>
                <td class="B">.</td>
                <td class="B">.</td>
                <td class="B">.</td>
                <td class="A">.</td>
            </tr>

        </table>
 </body>
</html>

code 2: fichier html

Dans le code présenté ci-dessus (code 2: fichier html), un lien entre ce fichier HTML et le fichier CSS est établi pour que le fichier HTML sache à quoi ressemble chaque case.(<link rel="stylesheet" type="text/css" href="labyrintherep.css"/>) Ensuite il faut ouvrir la table (<table>) et, à l'intérieur de chaque ligne (<tr> </tr>) de celle-ci, différentes cellules (<td> </td>) sont appliquées avec leurs différentes classes (class) A,B,C,D ou E. Ceci fait, on referme la table.
Le résultat de ce premier code est visible à l'adresse suivante (⚠︎ le code ci-dessus ne se réfère qu'au labyrinthe du haut) https://dev.gyre.ch/geraldine.menoud/first.mase.php (Les points au milieu de chaque case servent à se repérer, à comprendre combien il y a de cases etc...)

Pour que le labyrinthe puisse être plus facilement et plus rapidement réalisé, et pour y introduire ensuite du mouvement, il faut créer un fichier PHP qui devrait lire les caractères (A, B, C, D ou E) et construire la table tout seul. Avant que cela soit possible, il faut créer un fichier (ici first.mase) ne contenant que des lettres (dans l'ordre formant le labyrinthe) que le fichier php devra lire par la suite.

AAAAAAA
AEBBBDC
ADCBDAC
ACACABC
ADADADC
ABBABAC
ABBBBBA

code 3: fichier first.mase

Le fichier PHP a gardé le code du fichier HTML décrit ultérieurement pour avoir un rétrocontrôle.

<!DOCTYPE html>
<?php session_start(); ?>
<!DOCTYPE html>
<html>
    <head>
        <title>labyrinthe la main</title>
        <link rel="stylesheet" type="text/css" href="labyrintherep.css"/>
        <link rel="stylesheet" type="text/css" href="squaremove.css"/>
    </head>

    <body>
<?php
    $fichier= fopen ("first.mase", "r") or die ("Unable to open");
    print "<table>";

        while (($line = fgets($fichier)) !== false) { ?>
           <tr>
<?php        foreach (str_split($line) as $char) { ?>
            <td class="<?php print $char; ?>">.</td>


<?php } ?>

           </tr>
<?php }

    print "<table>";
    fclose ($fichier); ?>

 </body>
</html>

code 4: fichier php labyrinthe

Ici, le fichier fait de nouveau référence au fichier CSS (<link rel="stylesheet" type="text/css" href="labyrintherep.css"/>) puis il doit ouvrir le fichier first.mase, le lire et traiter l'information ( $fichier= fopen ("first.mase", "r") or die ("Unable to open"); print "<table>"; ) On lui demande ensuite de lire le fichier ligne par ligne et de remplacer les caractères par les bonnes cases CSS correspondantes.
Voici donc le résultat de ce dernier code.

image 3: labyrinthe en php

Le support graphique est maintenant prêt, il reste à y intégrer des mouvements.

3.2 codes pour le déplacement

La partie concernant le déplacement d'un objet dans le labyrinthe est un peu plus compliquée et plusieurs façons de faire sont possibles. Ici, on décide de donner une identité différente à chaque case. Cette identité est un nombre qui est attribué aux différentes cases. Le compte commence par la case en haut à gauche qui sera le numéro 0 et va jusqu'à la dernière case en bas à droite. Pour ce faire, il faut ajouter quelques termes au code exposé précédemment:

<!DOCTYPE html>
<?php session_start(); ?>
<!DOCTYPE html>
<html>
    <head>
        <title>labyrinthe la main</title>
        <link rel="stylesheet" type="text/css" href="labyrintherep.css"/>
        <link rel="stylesheet" type="text/css" href="squaremove.css"/>
    </head>

    <body>
<?php
    $fichier= fopen ("first.mase", "r") or die ("Unable to open");
    print "<table>";
    $compteur=0;

        while (($line = fgets($fichier)) !== false) { ?>
           <tr>
<?php        foreach (str_split($line) as $char) { ?>
            <td class="<?php print $char; ?>"
                id="<?php print $compteur;?>">.</td>
           <?php $compteur= $compteur+1;?>

<?php } ?>

           </tr>
<?php }

    print "<table>";
    fclose ($fichier); ?>

 </body>
</html>

code 4: fichier php labyrinthe et id

La variable compteur est ajoutée ( $compteur=0;) : c'est elle qui donnera le nombre à chaque case. Dans la boucle while, on introduit une id liée à la variable compteur( id="<?php print $compteur;?>">) et finalement, on indique que la variable compteur doit augmenter de 1 après chaque case (<?php $compteur= $compteur+1;?>).

Ensuite, pour que les déplacement soient effectués, on peut utiliser plusieurs techniques différentes. Dans ce projet, des boutons ont été créés. Pour ce faire, le code suivant a été ajouté entre la fermeture du fichier et la fermeture de la balise body du code présenté juste ci-dessus.

<button onmousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
<button onmousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
<button onmousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>

code 5: fichier php labyrinthe, id et boutons
Voici le résultat de l'addition de ces codes:

image 4: labyrinthe php avec boutons
lien de l'image 4

A ces boutons, il faut attribuer des fonctions et surtout un objet. Je ne suis malheureusement, malgré mes nombreuses tentatives, pas parvenue à élaborer un code qui en soit capable. Le but était, en tout cas dans un premier temps, qu'à chaque id soit accordé ou non un certain nombre de mouvements. Et que l'objet qui aurait commencé sa course dans la case représentée dans l'image ci-dessus ne puisse donc pas traverser les murs.

4. Discussion

J'ai tenté à plusieurs reprises d'écrire un code qui pourrait répondre à ce dernier problème, mais sans y parvenir. Malheureusement je n'ai pas pu trouver beaucoup de documentation dans laquelle des jeux n'étaient codés qu'avec du PHP. La plupart des références que j'ai consultées utilisent d'autres langages tel que JavaScript.

Mes sentiments vis-à-vis de mon projet sont mitigés: je suis extrêmement contente que les codes fonctionnent parfaitement. J'ai pu ressentir le sentiment d'excitation qui survient lorsque les choses marchent enfin, surtout après de longs moment passés à tenter de les régler. Ce sentiment a été encore plus fort que lors du premier projet, car la plupart des but que je m'étais fixés ont été atteints. Mais je reste assez frustrée de ne pas avoir réussi à finir complètement le jeu. Malgré cela, j'ai beaucoup aimé réaliser ce projet, car j'ai appris à mieux m'adapter aux situations compliquées et à retourner les problèmes sous plusieurs angles afin de trouver une solution. Je pense que l'un des facteurs à cause duquel le jeu n'est opérationnelle est la difficulté à trouver de la documentation relative a mon problème. Un autre facteur est le fait que j'ai peut être manqué de temps, en effet, je me suis rendue compte de l'importance du temps que l'on met pour corriger des erreurs toutes bêtes et qui nous empêche d'avancer sur le problème général.

5. Conclusion

Mon projet est finalement assez proche de mon idée de départ. Bien que non fonctionnelle, il donnerait presque l'illusion de marcher grâce aux interfaces graphiques. Pour finir, je pense que l'objectif de créer un labyrinthe dont il faut sortir n'a été que partiellement atteint. Mais que le but de se familiariser avec les différents langages PHP CSS et HTML à lui été largement atteint. Si je devais refaire ce projet, je pense que je chercherai à perdre moins de temps sur de petites erreurs de syntaxe et tenterais de finir le jeu et de le rendre plus interessant. En effet une fois le jeu fonctionnel, on peut y ajouter des restrictions de temps, de nouvelles façons de déplacer l'objet, différent nivaux etc...

Références

• http://www.pierre-giraud.com/php-mysql/cours-complet/php-lire-ouvrir-fermer-fichier.php
• https://www.w3schools.com
• http://php.net