Dernière mise à jour :2008-10-16

informatique

Conception d'un jeux en DHTML

Il y a quelque temps, j'ai fais la conception d'un jeux simple en DHTML pour un de mes ancien site web personnel (http://www6.ewebcity.com/bdfanz). Cette semaine, puisque je n'avais pas le gout de concevoir un nouveau code, j'ai pensé utiliser celui-ci en guise d'exemple pour cet atelier DHTML. Il faut préciser que le jeux en question ne fonctionne que sur Microsoft Internet Explorer version 5 et plus.

Le jeux

Une série de 30 images est présenté au joueur. Ces images sont un peut comme des cartes. D'un coté elles ont toutes la même image (coté A) et de l'autre, seulement des pairs de cartes ont des images identique (coté B). Donc, coté, une seule possibilité d'image et coté B 15 possibilité. À l'initialisation, toutes les images montre leur coté A. Le but du jeux est de former des pairs d'images identique en retournant les cartes 2 à 2. Pour retourner une carte, l'utilisateur n'a qu'à cliquer sur celle-ci. Lorsque les quinzes paires sont trouvées, la partie est terminée. Le jeux comporte aussi un tableau qui présente le nombre d'essais ainsi que le pointage du joueur. Il y a aussi un bouton permettant de recommencer la partie et finalement, une dernier bouton permettant de terminer la partie, c'est à dire, de fermer la fenêtre du navigateur dans lequel le jeux s'était ouvert.

Pour visualiser le jeux, cliquez ici

Atelier

Pour débuter, il faut d'abord créer une première page qui permettra d'effectuer l'ouverture du jeux. Le listing 1.0 ci-dessous présente un exemple de ce à quoi pourrait ressembler une telle page:

Listing 1.0 Fichier de présetation du jeux
1. <HTML>
2. <HEAD>
3. <TITLE>Jeux DHTML IE 5+</TITLE>
4. <SCRIPT LANGUAGE="JavaScript">
5. <!--
6.  function ouvreJeux()
7.  {
8.   var maFenetre = window.open("jeuxdhtml.htm","fen","width=650,height=397");
9.  }
10. // -->
11. </script>
12. </HEAD>
13. <BODY>
14. Cliquez <A HREF="javascript:ouvreJeux();">ici</a> pour jouer.
15. </BODY>
16. </HTML>

Description du listing 1.0

Une page créé à partir de ce listing sera toute simple. Son seul rôle est de permettre l'ouverture de la fenêtre qui présentera le jeux. Tout ce qui apparaitra à l'écran du navigateur de l'utilisateur c'est la phrase 'Cliquez ici pour jouer.' dont le mot ici est en hyperlien (ligne 14). L'Hyperlien en question fait appel à la fonction 'ouvreJeux' qui est définit entre les lignes 6 et 9. La fonction ne possède qu'une seule ligne d'instruction (ligne 8). Sur cette ligne, ont d'éclare une variable 'maFenetre' qui recevra le résultat de la méthode open de l'objet window. C'est cette méthode qui permet d'ouvrir un e nouvelle fenêtre de navigateur. La méthode open comporte 3 arguments. Le premier permet de spécifier le nom d'un fichier sous forme d'URL. Dans le cas de cet exemple, le fichier contenant le code du jeux se nomme 'jeuxdhtml.htm" et doit être placé dans le même dossier que celui contenant le code du listing 1.0. Le second argument permet de spécifier un nom pour la fenêtre et le troisème argument permet de passer une série de peramètre pour la configuration de la nouvelle fenêtre. Dans le cas de cet exemple, les deux seul arguments utilisés sont 'width' qui permet d'initialiser la largeur de la fenêtre et 'height' qui permet de déterminer sa hauteur.

Création du jeux

Deux fichiers seront nécessaire à la création du jeux. Il faut d'abord faire la création d'un fichier html contenant le code html de base de mise en page du jeux. En second, lieu, il faut faire la création d'un fichier javaScript, lquel renfermera tout le code permettant au jeux d'entrer en fonction.

Première étape

Le listing 2.0 ci-dessous présente le code HTML à insérer dans le fichier de base (jeuxdhtml.htm).

Listing 2.0 Fichier jeuxdhtml.htm
1. <HTML>
2. <HEAD>
3. <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
4. <TITLE>BDFanz - Jeux de cartes</TITLE>
5. <STYLE>
6. BUTTON
7. {
8. background-color:darkblue;
9. color:white;
10. border-bottom-color:black;
11. border-left-color:cyan;
12. border-right-color:black;
13. border-top-color:cyan;
14. font-family:verdana;
15. font-size:8pt;
16. width:100;
17. }
18. TD
19. {
20. font-family:verdana;
21. font-size:8pt;
22. color:green;
23. }
24. </STYLE>
25. <script language="javascript" src="/programmation/jeuxdhtml.js"></script>
26. </HEAD>
27. <BODY topmargin="0" leftmargin="0" onload="melangeCartes(50);init(30);" >
28. <table width="650" border="0" cellspacing="0" cellpadding="0" height="397">
29.  <tr>
30.  <td width="26" background="/programmation/_images/hautgauche.jpg" height="26"> </td>
31.  <td colspan="2" background="/programmation/_images/ligne.jpg"> </td>
32.  <td width="26" background="/programmation/_images/hautdroit.jpg"> </td>
33.  <td width="26" background="/programmation/_images/hautgauche.jpg"> </td>
34.  <td width="146" background="/programmation/_images/ligne.jpg"> </td>
35.  <td width="26" background="/programmation/_images/hautdroit.jpg"> </td>
36.  </tr>
37.  <tr>
38.  <td rowspan="6" background="/programmation/_images/lignegauche.jpg"> </td>
39.  <td colspan="2" rowspan="6"><P ID="cartes"> </P></td>
40.  <td rowspan="6" background="/programmation/_images/lignedroite.jpg"> </td>
41.  <td rowspan="6" background="/programmation/_images/lignegauche.jpg"> </td>
42.  <td height="20" bgcolor="000000" align="center">
43.  <b>Votre pointage</b>
44.  </td>
45.  <td rowspan="6" background="/programmation/_images/lignedroite.jpg"> </td>
46.  </tr>
47. <tr>
48.  <td height="20" bgcolor="000000" align="center">
49.  <p ID="pointage"></p>
50.  </td>
51. </tr>
52.  <tr>
53.  <td height="20" bgcolor="000000" align="center">
54.  <b>Nombre d'essai</b>
55.  </td>
56.  </tr>
57.  <tr>
58.  <td bgcolor="000000" align="center" valign="top">
59.  <p ID="essai"></p>
60.  </td>
61.  </tr>
62.  <tr>
63.  <td height="20" bgcolor="000000" align="center"><BUTTON onclick="location.reload(false);" id=button2 name=button2>Recommancer</BUTTON></td>
64.  </tr>
65.  <tr>
66.  <td height="20" bgcolor="000000" align="center"><BUTTON onclick="window.close()" id=button1 name=button1>Quitter</BUTTON></td>
67.  </tr>
68.  <tr>
69. <td height="26" background="/programmation/_images/basgauche.jpg"> </td>
70. <td colspan="2" background="/programmation/_images/lignebas.jpg"> </td>
71. <td background="/programmation/_images/basdroit.jpg"> </td>
72. <td background="/programmation/_images/basgauche.jpg"> </td>
73. <td background="/programmation/_images/lignebas.jpg"> </td>
74. <td background="/programmation/_images/basdroit.jpg"> </td>
75.  </tr>
76. </table>
77. </BODY>
78. </HTML>

Description du listing 2.0

Ce fichier a pour but de faire la mise en page du jeux. Je ne m'attarderai donc pas réellement à décrire l'ensemble de celui-ci puisque je présume vous disposez déjà d'une base en matière de HTML. Les lignes 5 à 24 définisse le styles de certains éléments à travers la balise STYLE qui permet d'intégrer du style directement dans une page web plutot que d'appeller une feuille de style externe (css). La ligne 25 du fichier permet de faire l'appel du fichier Javascript qui contiendra le code du jeux. La balise BODY (ligne 27) contient l'attribut d'événement onload qui permettera d'exécuter deux fonction provenant du fichier jeuxdhtml.js dès que le fichier aura terminé d'être téléchargé. Il reste encore 3 lignes auxquel il faudrait porter une certaine attention soit les lignes 39, 49 et 59 lesquelles contiennent des balises avec des attributs ID. En dhtml, il est plus facile d'exécuter un traitement sur des balises qui contiennent un attribut ID.

Deuxième étape

Le listing 3.0 présente le contenu du fichier '/programmation/jeuxdhtml.js' qui contient tout le code java script nécessaire au bon fonctionnement de notre jeux.

Listing 3.0 Fichier jeuxdhtml.js
1. var ancienID1 = "";
2.  var ancienID2 = "";
3.  var ancienPointage = -1;
4.  var ancienNombreEssais = -1;
5.  var nbCartesTourne = 1;
6.  emplacementCartes = new Array(30);
7.  for(var x=0;x<30;x++)
8.  {
9.  emplacementCartes[x]=(x < 15)?x+1:x+1-15;
10.  }
11.  function additionGroupeNb(max,nb)
12.  {
13.  return (nb+nb)>max?(nb-(max-nb)):(nb+nb);
14.  }
15.  function nombreEntierAleatoire(max)
16.  {
17.  resultat = new String(Math.random() * max);
18.  var posPoint = resultat.indexOf('.');
19.  return (posPoint > -1)?eval(resultat.substring(0,posPoint))-1:eval(resultat)-1;
20.  }
21.  function melangeCartes(nombre)
22.  {
23.  var decalage = nombreEntierAleatoire(29);
24.  var temp = emplacementCartes[decalage];
25.  emplacementCartes[decalage] = emplacementCartes[0];
26.  emplacementCartes[0] = temp;
27.  for(var x=0;x<nombre;x++)
28.  {
29.  decalage = nombreEntierAleatoire(29);
30.  if (decalage > 0)
31.  {
32.  temp = emplacementCartes[decalage];
33.  emplacementCartes[decalage] = emplacementCartes[additionGroupeNb(29,decalage)];
34.  emplacementCartes[additionGroupeNb(29,decalage)] = temp;
35.  }
36.  }
37.  }
38.  function incrementationPointage()
39.  {
40.  ancienPointage++;
41.  document.all['pointage'].innerHTML = (ancienPointage == 15)?"Vous avez gagné!":ancienPointage;
42.  }
43.  function incrementationEssais()
44.  {
45.  ancienNombreEssais++;
46.  document.all['essai'].innerHTML = ancienNombreEssais;
47.  }
48.  function montreCartes(pointeurCarte)
49.  {
50.  if (nbCartesTourne == 2)
51.  {
52.  incrementationEssais();
53.  if (document.all['x' + pointeurCarte].style.visibility == 'visible')
54.  {
55.  document.all['x' + pointeurCarte].style.visibility = 'hidden';
56.  document.all['o' + pointeurCarte].style.visibility = 'visible';
57.  }
58.  nbCartesTourne = 1;
59.  ancienID2 = pointeurCarte;
60.  if(emplacementCartes[ancienID2] == emplacementCartes[ancienID1])
61.  {
62.  incrementationPointage();
63.  }
64.  else
65.  {
66.  setTimeout("document.all['o' + ancienID2].style.visibility = 'hidden'", 800);
67.  setTimeout("document.all['x' + ancienID2].style.visibility = 'visible'", 800);
68.  setTimeout("document.all['o' + ancienID1].style.visibility = 'hidden'", 800);
69.  setTimeout("document.all['x' + ancienID1].style.visibility = 'visible'", 800);
70.  }
71.  }
72.  else
73.  {
74.  nbCartesTourne++;
75.  ancienID1 = pointeurCarte;
76.  if (document.all['x' + pointeurCarte].style.visibility == 'visible')
77.  {
78.  document.all['x' + pointeurCarte].style.visibility = 'hidden';
79.  document.all['o' + pointeurCarte].style.visibility = 'visible';
80.  }
81.  }
82.  }
83.  function init(nbCartes)
84.  {
85.  var chaine = '';
86.  var indiceLeft = -1;
87.  var indiceTop = -1;
88.  for(var x=0;x<nbCartes;x++)
89.  {
90.  if(indiceLeft > 4)
91.  indiceLeft = 0;
92.  else
93.  indiceLeft++;
94.  if(indiceLeft == 0)
95.  indiceTop++;
96.  chaine += "<img id='x" + x + "' src='/programmation/_images/cartesBack.jpg' style='position:absolute;left:" + ((indiceLeft*70) +26) + ";top:" + ((indiceTop*70) + 26) + ";visibility:visible;' onclick='montreCartes(\"" + x + "\")'><img id='o" + x + "' src='/programmation/_images/" + emplacementCartes[x] + ".jpg' style='position:absolute;left:" + ((indiceLeft*70) + 26) + ";top:" + ((indiceTop*70) + 26) + ";visibility:hidden;'>";
97.  }
98.  document.all['cartes'].innerHTML = chaine;
99.  incrementationEssais();
100.  incrementationPointage();
101.  }

Description du listing 3.0

Lorsque le fichier est initialisé, quelques variables sont définies (ligne 1 à 6) et ensuite un vecteur nommé 'emplacementCartes' d'une longeur de 30 est initialisé. Selon la balise BODY du listing 2.0, suite au téléchargement du fichier, les fonctions 'melangeCartes()' et 'init()' seront appelées. Nous commencerons par discuter de la première (melangeCartes()) qui, dans le listing 3.0 est définie entre les 21 et 37. Le rôle de cette fonction est de mélanger l'emplacement des cartes de façon aléatoire en changeant les valeurs du vecteur 'emplacementCartes'. Pour l'obtention des nombres aléatoire, la fonction se sert d'une autre fonction nommée 'nombreEntierAleatoire' et définie aux lignes 15 à 20. Cette fonction accepte un argument. Celui-ci est un entier spécifiant le nombre entier aléatoire maximal renvoyé par la fonction. Dans le cas du présent projet, il y a 30 cartes donc, il faut passer 29 en argument à cette fonction. La fonction 'melangeCartes()' se sert aussi d'une autre fonction nommée 'additionGroupeNb' (lignes 11 à 14) pour obtenir une autre position aléatoire dans le vecteur. La fonction 'melangeCartes()' prend les nombres aléatoire fournis par les 2 fonctions et inverse les valeurs du vecteur à ces positions. La fonction exécute ce traitement dans une boucle (lignes 27 à 36). Le nombre de répétition de la boucle est défini par le paramètre passé à la fonction soit 50 dans le cas de cet exemple.

La seconde fonction appelé à la suite du téléchargement du fichier est init(). Celle-ci est décrite entre les lignes 83 et 101. Le but de cette fonction est d'ajouter du code HTML à la page après le téléchargement de celle-ci. Cette fonction utilise des méthodes propre à Internet Explorer version 5 et plus. Au moment où j'ai fais la création de ce jeux, il était encore impossible de modifier le code HTML d'une page web après son téléchargement dans un navigateur Netscape. La boucle définie entre les lignes 88 et 97 sert à affecter le contenu des images représentant les 30 cartes. Remarquez que dans la première balise IMG définie sur cette ligne, l'événement 'onclick' fait appel à la fonction 'montreCartes()'. À la sortie de la boucle, la balise P dont l'attribut ID possède la valeur 'cartes' est affecté du contenu de la variable 'chaine'.

La fonction 'montreCartes()' est définie entre les ligne 48 et 82. Son but, vous l'aurez trouvé, est de présenter l'endroit d'une carte lorsque le joueur clique sur le dos de l'une d'entre elles. La fonction compte le nombre de carte tournées par l'utilisateur. Si le nombre équivaut à 2, la fonction présente la seconde carte et indique au navigateur qu'il devra cacher les 2 cartes tourné dans 800 millisecondes (voir lignes 66 à 69). Si le nombre de carte tourné est inférieur à deux, la fonction présente la première carte à l'utilisateur.

Voilà en gros le fonctionnement de ce jeu. Il est à noter que le jeu ne comporte que des instructions de base et pourrait facilement être amélioré mais il représente une bonne base pour ceux qui débute dans le développement DHTML style Microsoft.

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2001-11-30

Aucun commentaire pour l'instant.