jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Débuter > Jouer à Shanghaï

Jouer à Shanghaï

samedi 9 septembre 2006, par Fil

Chacun connaît le jeu de solitaire appelé Shanghaï, qui se joue avec des pièces de Mah-jong qu’on doit retirer du plateau, par paires. On en programme ici une version (très limitée) en jQuery.


L’objectif, sur le plan technique, est double :
— faire une interface qui ne se limite pas à des effets visuels ;
— gérer des données qui sont présentes dans la page HTML, et pas dans des globales javascript.

Installation du plateau de jeu

Notre script d’initialisation se lance dès que la page est prête, et compose le code HTML décrivant l’ensemble des pièces du jeu. Dès que ce HTML est composé, la structure des pièces (leur emplacement, leur valeur A, B, C ou D) est exclusivement dans le HTML.

De manière amusante, cette partie du script, bien qu’étant la plus longue, pourrait donc être totalement supprimée et remplacée par un script côté serveur qui créerait et enverrait le plateau initial du jeu.

for (z=0; z<shanghai.length; z++) {
 $("<div id='shanghai-"+z+"'><"+"/div>")
 .appendTo("#shanghai");
 for (y=0; y<shanghai[z].length; y++) {
   $("<div id='shanghai-"+z+"-"+y+"'><"+"/div>")
   .appendTo("#shanghai-"+z);
   for (x=0; x<shanghai[z][y].length; x++) {
     if (shanghai[z][y][x]) {
       $("<a>"+shanghai[z][y][x]+"<"+"/a>")
       .appendTo("#shanghai-"+z+"-"+y)
       .css({
         'left': (3*x)+'em',
         'top': (3*y)+'em'
       });
     }
   }
 }
}

Je ne détaille pas tout ce code : il installe les rangées de pièces — telles qu’elles sont décrites dans le tableau var shanghai — dans des <div/> qui correspondent à leur hauteur dans le jeu. Les pièces représentées par une chaîne vide ne sont pas créées : elles ne servent qu’à décaler les pièces suivantes vers la droite.

A noter, la construction suivante :
$("<balise html/>").appendTo("code jquery");
qui permet de créer une balise et de l’ajouter dans un élément de la page.

A la fin de l’installation des pièces sur le plateau, le script d’initialisation fait trois choses :

 $("#shanghai a").click(shanghai_click);
 selected = null;
 $("#shanghai").slideDown('slow');

Ici toutes les pièces du jeu (les <a></a>) sont rendues clicables, et la fonction associée est shanghai_click(). Ensuite on initialise la valeur selected, une globale javascript qui mémorise le nœud du DOM correspondant à la pièce sélectionnée par le joueur. Enfin, on révèle le plateau (que la CSS avait créé comme étant invisible), avec un effet de déroulement.

Gérer les actions du joueur

Grâce au code d’initialisation décrit ci-dessus, la fonction shanghai_click() est appelée à chaque clic sur une pièce.

Tout d’abord, on teste si la pièce est « libre » ou « bloquée » : la règle du jeu de Mah Jong dit qu’une pièce est libre si elle peut coulisser vers la droite ou vers la gauche. Comme cela correspond à la structure de notre plateau de jeu en HTML, ce test consiste à vérifier que la pièce n’est pas enserrée par deux voisins. Si tel est le cas, on ne peut pas la cliquer, et la fonction n’agit pas :

 if (this.nextSibling
 && this.previousSibling)
   return;

Si la pièce est libre, il faut vérifier différents cas :
— aucune pièce n’est sélectionnée, et il faut sélectionner la pièce cliquée ;
— une pièce est sélectionnée, et c’est celle qu’on vient de cliquer : il faut alors la désélectionner ;
— une pièce est sélectionnée, ce n’est pas la même ; alors, si elle porte la même lettre, on supprime les deux pièces (... et on vérifie ensuite si la partie est terminée, pour féliciter le joueur).

Le premier cas (sélectionner la pièce cliquée) s’écrit :

 if (!selected) {
   $(this).addClass("selected");
   selected = this;
 }

le deuxième (désélectionner la pièce si on la reclique) :

 else if (this == selected) {
   $(this).removeClass("selected");
   selected = null;
 }

le dernier cas (vérifier si la pièce cliquée a le même contenu que la pièce sélectionnée) :

 else if (this.innerHTML == selected.innerHTML) {
   $(this).add(selected).remove('slow');
   selected = null;
   if (!$("#shanghai a").size()) {
     alert(":-)");
     shanghai_init();
   }
 }

Ne reste qu’à ajouter un peu de CSS, et le jeu est fonctionnel.

P.-S.

Merci à Renato pour la compatibilité avec MSIE.

Documents joints

Répondre à cet article


Derniers commentaires