DEVELOPPEMENT WEB
LABYRINTHE

Objectif

Le but est de réaliser un jeu en ligne. Un personnage se déplace sur un plateau avec un objectif à atteindre.

Comprendre

Pour démarrer

Le code ci-dessous constitue un premier pas pour commencer à développer. Il utilise des carrés jaune et bleu nommés respectivement im1.png et im2.png :

    
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body { text-align: center; }
    section { line-height: 0px; }
    button { width: 3.5em; }
  </style>
  <script>
    Xp=1;
    Yp=2; // Position du personnage
    haut=function() {
      if (Yp>0) Yp--;
      maj_vue();
    };
    bas=function() {
      if (Yp<3) Yp++;
      maj_vue();
    };
    gauche=function() {
      if (Xp>0) Xp--;
      maj_vue();
    };
    droite=function() {
      if (Xp<4) Xp++;
      maj_vue();
    };    
    maj_vue=function() {
      for (var l=0; l<4; l++) {
        for (var c=0; c<5; c++) {
          document.getElementById(c+"_"+l).src="im1.png";
        }
      }
      document.getElementById(Xp+"_"+Yp).src="im2.png";
    };
    onload=function() { maj_vue(); };
  </script>
</head>

<body>
  <section>
    <img id="0_0"><img id="1_0"><img id="2_0"><img id="3_0"><img id="4_0"><br>
    <img id="0_1"><img id="1_1"><img id="2_1"><img id="3_1"><img id="4_1"><br>
    <img id="0_2"><img id="1_2"><img id="2_2"><img id="3_2"><img id="4_2"><br>
    <img id="0_3"><img id="1_3"><img id="2_3"><img id="3_3"><img id="4_3"><br>
  </section>
  <br>
  <button type="button" onclick="gauche();">◁</button>
  <button type="button" onclick="droite();">▷</button>
  <button type="button" onclick="haut();">△</button>
  <button type="button" onclick="bas();">▽</button>
</body>

</html>

Résultat :

Amélioration du code

L'ajout de la variable jeu, contenant un tableau de chaînes de caractères, permet de créer facilement des plateaux de toutes dimensions. Choisissez vos dimensions pour le plateau puis testez...

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body { text-align: center; }
    section { line-height: 0px; }
    button { width: 3.5em; }
  </style>
  <script>
    jeu=[       // Jeu en position initiale
    "      ",   // @ : Personnage
    "      ",
    "    @ ",
    "      "];
    init_jeu=function() {
      for (l=0; l<jeu.length; l++) {
        for (c=0; c<jeu[0].length; c++) {
          if (jeu[l][c]=="@") {
            Xp=c;
            Yp=l;
          }
        }
      }      
    };    
    init_jeu();
    haut=function() {
      if (Yp>0) Yp--;
      maj_vue();
    };
    bas=function() {
      if (Yp<(jeu.length-1)) Yp++;
      maj_vue();
    };
    gauche=function() {
      if (Xp>0) Xp--;
      maj_vue();
    };
    droite=function() {
      if (Xp<(jeu[0].length-1)) Xp++;
      maj_vue();
    };
    maj_vue=function() {
      for (l=0; l<jeu.length; l++) {
        for (c=0; c<jeu[0].length; c++) {
          document.getElementById(c+"_"+l).src="im1.png";
        }
      }
      document.getElementById(Xp+"_"+Yp).src="im2.png";
    };      
    onload=function() {
      for (l=0; l<jeu.length; l++) {
        for (c=0; c<jeu[0].length; c++) {
          document.getElementById("vue").insertAdjacentHTML('beforeend','<img id="'+c+"_"+l+'">');
        }
        document.getElementById("vue").insertAdjacentHTML('beforeend','<br>');
      }     
      maj_vue();
    };
  </script>
</head>

<body>
  <section id="vue"></section>
  <br>
  <button type="button" onclick="gauche();">◁</button>
  <button type="button" onclick="droite();">▷</button>
  <button type="button" onclick="haut();">△</button>
  <button type="button" onclick="bas();">▽</button>
</body>

</html>

Pratiquer

Afficher les murs

Présentez la variable jeu de la manière suivante :

...
jeu=[      // Plateau en position initiale
"  #   ",  // @ : Personnage
"  ##  ",  // # : Mur
"    @ ",
"    # "];
...

Etudiez le code ci-dessus, en particulier la ligne 20. Modifiez la fonction maj_vue() pour afficher les murs sous la forme de carrés sombres comme celui ci-dessous, nommé im3.png.

Les rendre impénétrables

Modifiez :

...
haut=function() {
  if (Yp>0 && jeu[Yp-1][Xp]!="#") Yp--;
  maj_vue();
};
bas=function() {
  if (Yp<(jeu.length-1) && jeu[Yp+1][Xp]!="#") Yp++;
  maj_vue();
};
...

Adaptez, de manière similaire, les fonctions gauche() et droite() pour rendre les murs impénétrables.

Afficher la destination

Présentez la variable jeu de la manière suivante :

...
jeu=[      // Plateau en position initiale
"  #   ",  // @ : Personnage
"  ##  ",  // # : Mur
"    @ ",  // . : Destination
".   # "];
...

Modifiez la fonction maj_vue() pour afficher la destination sous la forme d'un carré vert comme celui ci-dessous, nommé im4.png.

Fin du jeu

Modifiez la fonction maj_vue() en y ajoutant une dernière ligne. Il s'agit d'afficher, avec la méthode alert(), le message Vous avez gagné! si les positions du personnage et de la destination coïncident.

Recommencer le jeu

Ajoutez un bouton, entre les balises <body> et </body> :

...
<button type="button" onclick="...">☖</button>
...

Remplacez les trois points de suspension par un code permettant de recommencer le jeu lorsque l'utilisateur clique sur ce bouton.

Approfondir

Labyrinthe

Créez votre labyrinthe, en diminuant éventuellement la taille des images.

Sokoban