DEVELOPPEMENT WEB
LABYRINTHE

Mise en situation

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

Expérimenter

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; }
  </style>
  <script>
    var Xp=1, Yp=1; // Position du personnage
    haut=function() { if (Yp>0) Yp--; };
    bas=function() { if (Yp<3) Yp++; };
    gauche=function() { if (Xp>0) Xp--; };
    droite=function() { if (Xp<4) Xp++; };    
    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(); maj_vue();">◁</button>
  <button type="button" onclick="droite(); maj_vue();">▷</button>
  <button type="button" onclick="haut(); maj_vue();">△</button>
  <button type="button" onclick="bas(); maj_vue();">▽</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.

<!DOCTYPE html>
<html>

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

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

</html>

Programmer

Affichage de murs

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

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

Modifiez la fonction maj_vue() pour afficher les murs sous la forme de carrés sombres comme celui ci-dessous, nommé im3.png.

Murs impénétrables

Modifions :

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

Modifiez, de même, les fonctions gauche() et droite() pour rendre les murs impénétrables.

Affichage de la destination

Présentons 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

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

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

Complétez les trois points de suspension pour recommencer le jeu lorsque l'utilisateur clique sur ce bouton.

Et voilà! Vous pouvez maintenant créer votre propre jeu de labyrinthe.