Cette activité détaille les différentes étapes pour concevoir un jeu d'échecs interactif dans une page web en utilisant le logiciel Dreamweaver.

Différentes technologies seront utilisées dans la page web et notamment :

• le langage HTML et ses balises pour la structure de la page
• le langage CSS pour définir les différents styles utilisés
• le langage JavaScript pour réaliser une action sur la page

Le jeu d'échecs va ici évoluer selon différrentes versions :

• Version 1 : l'échiquier de base
• Version 2 : le tableau cliquable
• Version 3 : le jeu d'échecs interactif
• Version 4 : remise à zéro du plateau
• Version 5 : affichage des pions éliminés
• Version 6 : interdiction d'éliminer ses propres pions
• Version 7 : obligation d'alterner les joueurs
• Version 8 : reconnaissance des pièces et rappel des mouvement autorisés

L'échiquier est créé dans une nouvelle page web sous Dreamweaver. Le plateau sera un tableau de dimension 8x8 sans bordure, avec les cellules vides en un premier temps.

Afin que les cellules apparaîssent vide, on va y mettre seulement le caractère "espace insécable" de code HTML  

Pour cela, chacune des 64 balises <td> ne doivent contenir que le caractère &nbsp; (sans paragraphe <p> ni conteneur générique <div> ou <span>) :

<td>&nbsp;</td>

Pour créer automatiquement ce tableau vide dans Dreamweaver on clique sur Tableau dans le menu Insertion, puis on configure le tableau voulu :

• 8 lignes
• 8 colonnes
• largeur de 800 pixels
• sans bordure ni marge ni espacement

Afin que le plateau reste carré ainsi que chacune de ses 64 cases il faut leur imposer leur taille. La taille du tableau doit être un multiple de 8, et sa largeur doit être égale à sa hauteur. Or le générateur de tableau de Dreamweaver nous a demandé seulement la largeur du tableau (et pas la hauteur). Nous obtenons donc un tableau rectangulaire pour l'instant, et avec des cellules "souple" (sans taille fixe) :

Pour imposer une taille de 800x800 pixels au tableau il faut utiliser les 2 attributs width="800" et height="800" à la balise <table> :

<table width="800" height="800" border="0" cellpadding="0" cellspacing="0">

Pour atteindre les propriétés globales du tableau dans Dreamweaver il faut cliquez sur la balise <table> en bas de la zone de travail. En ajoutant la valeur 800 pour la hauteur, Dreamweaver ajoute l'attribut height à la balise ouvrante <table> et le tableau devient carré :

Pour imposer une taille de 100x100 pixels à chacune des 64 cellules du tableau afin de le rigidifier il faut ajouter les 2 attributs suivants à chacune des 64 balises <td> :

width="100" height="100"

Pour configurer la taille d'une cellule dans Dreamweaver il faut cliquer dans une cellule et remplir ses propriétés en bas de l'écran :

Mais il faudrait répéter cette opération pour chacune des 64 cellules du tableau si on veut le rigidifier entièrement.

Afin de modifier d'un seul coup les 64 balises <td> du tableau nous allons utiliser la fonction Rechercher et remplacer de Dreamweaver :

1. ouvrez la boîte de dialogue "Rechercher et remplacer" en cliquant sur Rechercher et remplacer dans le menu Edition (ou en utilisant le raccourcis clavier Ctrl-F)
2. saisir <td> dans le texte à rechercher afin de modifier toutes les balises ouvrante <td> sans attribut
3. saisir <td width="100" height="100"> dans le texte de remplacement afin de leur ajouter les 2 attributs width et height
4. cliquez sur le bouton Remplacer tout pour modifier toutes les occurences de <td> trouvées dans le code source
5. les 64 balises <td> sont instantanément modifiées dans le code source HTML !

Ainsi configuré, le tableau est désormais totalement rigide, carré, et possède 64 cellules également carrées.

Pour centrer horizontalement les caractères dans chacune des 64 cellules du tableau il faut ajouter l'attribut align à chacune des 64 balises <td> :

align="center"

Ceci peut se faire à nouveau instantanément grâce à la fonction Rechercher et remplacer de Dreamweaver en remplaçant toutes les occurences de <td width="100" height="100"> dans le Code source :

Il faut ensuite colorer alternativement les cases en clair et en foncé. Afin ne n'inscrire la couleur de fond des cellules qu'une seule fois dans le code, nous allons utiliser les classes CSS :

• les 32 cases claires seront de classe "clair" en ajoutant à leur balise <td> l'attribut class="clair"
• les 32 cases foncées seront de classe "fonce" en ajoutant à leur balise <td> l'attribut class="fonce"

Au final, voici à quoi ressemble la balise <td> complète d'une case claire (case vide pour l'instant : elle contient le caractère &nbsp;) :

<td width="100" height="100" align="center" class="clair">&nbsp;</td>

Et voici la balise <td> complète d'une case foncée (case vide pour l'instant : elle contient le caractère &nbsp;) :

<td width="100" height="100" align="center" class="fonce">&nbsp;</td>

Dans l'entête du fichier HTML (juste avant la balise fermante </head>) on ajoute ensuite le code CSS suivant qui impose la couleur pour chacune des 2 classes :

<style type="text/css">
.clair {
    background-color:#F6F6F6;
}
.fonce {
    background-color:#D39F50;
}
</style>

Remarque : le code CSS décrivant tous les styles utilisés dans la page web se place à la fin de l'entête du fichier HTML (juste avant la balise fermante </head>) et sont encadrées entre une balise ouvrant <style type="text/css"> et une balise fermante </style>.

Nous disposons maintenant d'un plateau vide, avec les cases parfaitement carrées et colorées :

Il faut maintenant y mettre les pièces du jeu d'échecs en utilisant les caractères unicode correspondant :

• en décimal les codes des pièces du jeu d'échecs vont de 9812 à 9823
• en hexadécimal les codes des pièces du jeu d'échecs vont de 2654 à 265F

Voici les codes unicode des 6 pions blancs :

Et voici les codes unicode des 6 pions noirs :

Le code HTML &#1234; permet d'afficher sur une page web le caractère unicode de point de code 1234 (en décimal).

Le code HTML &#xABCD; permet d'afficher sur une page web le caractère unicode de point de code ABCD (en hexadécimal).

Voici par exemple la balise <td> complète d'une cellule contenant une tour noire (avec ici le code en décimal) :

<td width="100" height="100" class="clair" align="center">&#9820;</td>

Et voici comme autre exemple la balise <td> contenant le roi blanc (avec ici le code en hexadécimal) :

<td width="100" height="100" class="fonce" align="center">&#x2654;</td>

La taille par défaut des caractères est trop faible. Pour imposer une taille à tous les caractères et dans chacune des 64 cases du plateau, on ajoute la propriété CSS font-size aux 2 classes clair et fonce :

.clair {
    background-color:#F6F6F6;
    font-size: 70px;
}

.fonce {
    background-color:#D39F50;
    font-size: 70px;
}

Et voici à quoi doit ressembler le plateau complet en position de départ si le joueur noir est en haut et le joueur blanc en bas :

Remarques au sujet de la position des pions sur l'échiquier :

• la case supérieure gauche du plateau est une case claire (et non foncée)
• les dames sont en face une de l'autre
• les rois sont en face un de l'autre
• la dame est sur sa couleur : la dame blanche est sur une case claire, et la dame noire est sur une case foncée
• les pions du haut peuvent être aussi bien les blancs que les noirs

Voici par exemple une autre présentation correcte du plateau en position de départ, mais avec cette fois le joueur blanc en haut et le joueur noir en bas :

Voilà, vous disposez maintenant de la version 1 du jeu d'échecs, c'est-à-dire un simple tableau HTML de dimension 8x8 contenant des caractères unicode centrés horizontalement et verticalement.

Remarque : dans cette version 1 si on déplace le curseur de la souris sur le plateau du jeu d'échecs il se transforme en curseur de texte (barre verticale), car pour le navigateur le plateau d'échecs n'est qu'un simple tableau contenant des caractères.

Cliquez ici pour ouvrir la version 1 de l'échiquier dans un nouvel onglet

Dans cette version nous allons rendre le tableau cliquable, en effectuant une action si on clique dans une des 64 cases.

Commençons par modifier le curseur de la souris si on survole le tableau afin qu'il se transforme en pointeur pour indiquer à l'utilisateur que les cases de l'échiquier sont cliquables.

La propriété CSS cursor permet de modifier l'apparence du curseur lorsque la souris survole un élément de la page web. Ici nous voulons que le curseur change au survol de chacune des 64 cases du tableau. On pourrait très bien ajouter la propriété CSS cursor dans chacune des 64 cellules (soit dans les 64 balises <td>), ou bien seulement dans chacune des 2 classes clair et fonce.

Mais le plus simple est de rajouter la propriété CSS cursor une seule fois directement dans la balise ouvrante <table> : ainsi le curseur de la souris sera modifié au survol de la totalité du tableau. En ajoutant un attribut style à la balise ouvrante <table> elle devient :

<table width="800" height="800" border="0" style="cursor:pointer;">

Testez votre nouvelle page dans un véritable navigateur (ou actualisez simplement le navigateur avec la touche F5 si la page est déjà ouverte) après avoir enregistré les modifications dans votre fichier HTML, et observer le curseur de la souris au survol du tableau.

Mais pour distinguer individuellement les 64 cases du tableau il va falloir leur donner un nom unique à chacune. Pour cela il faut ajouter un attibut id à chacune des 64 balises <td>. De plus, les lignes du tableau seront numérotées de 1 à 8 et les colonnes de A à H. Chacune des 64 cases sera alors identifiée par un code à 2 caractères (par exemple B3) que nous appellerons identifiant.

Commençons par ajouter une nouvelle ligne et une nouvelle colonne au tableau contenant les repères (1 à 8 pour les lignes, A à H pour les colonnes). Comme toutes les autres cellules du tableau ces 16 nouvelles cellules auront une dimension de 100x100 pixels : le nouveau tableau a donc une dimension totale de 900x900 pixels ce qui garantit que toutes les cases restent bien carrées, et le tableau bien rigide. Voici à quoi ressemble le nouvel échiquier (le curseur de la souris est changé en pointeur au survol du tableau, mais pour l'instant aucune action n'est réalisée si on clique dans une case) :

Remarque : pour aligner verticalement vers le haut les lettres dans la ligne du bas il faut utiliser l'attribut valign dans chacune des 8 balises <td> concernées. Exemple :

<td align="center" valign="top">A</td>

Il faut maintenant donner un identifiant unique à chacune des 64 cases de l'échiquier. Pour cela on va ajouter un attribut id à chacune des 64 balises <td>. De plus, afin de déclencher une action si on clique dans une case particulière, on ajoute également à chacune des 64 balise <td> un attribut onclick qui applle une fonction en JavaScript que nous allons créer plus tard. Cette fonction en JavaScript s'appellera changeText() et doit recevoir en paramètre l'identifiant de la case concernée : elle aura pour mission d'afficher l'identifiant de la case cliquée sur la page web.

Voici par exemple à quoi ressemble la balise <td> de la case A8 contenant la tour noire :

<td width="100" height="100" class="clair" id="A8" onclick="javascript:changeText('A8')" align="center">&#9820;</td>

Et voici le code source HTML complet de ce nouveau tableau dans lequel les 64 balises <td> de l'échiquier ont les deux nouveaux attributs id et onclick précisant l'identifiant unique de chacune des 64 cases :

<table width="900" height="900" border="0" style="cursor:pointer;">
<tr>
<td width="100" height="100" class="clair" id="A8" onclick="javascript:changeText('A8')" align="center">&#9820;</td>
<td width="100" height="100" class="fonce" id="B8" onclick="javascript:changeText('B8')" align="center">&#9822;</td>
<td width="100" height="100" class="clair" id="C8" onclick="javascript:changeText('C8')" align="center">&#9821;</td>
<td width="100" height="100" class="fonce" id="D8" onclick="javascript:changeText('D8')" align="center">&#9819;</td>
<td width="100" height="100" class="clair" id="E8" onclick="javascript:changeText('E8')" align="center">&#9818;</td>
<td width="100" height="100" class="fonce" id="F8" onclick="javascript:changeText('F8')" align="center">&#9821;</td>
<td width="100" height="100" class="clair" id="G8" onclick="javascript:changeText('G8')" align="center">&#9822;</td>
<td width="100" height="100" class="fonce" id="H8" onclick="javascript:changeText('H8')" align="center">&#9820;</td>
<td width="100" height="100">8</td>
</tr>
<tr>
<td width="100" height="100" class="fonce" id="A7" onclick="javascript:changeText('A7')" align="center">&#9823;</td>
<td width="100" height="100" class="clair" id="B7" onclick="javascript:changeText('B7')" align="center">&#9823;</td>
<td width="100" height="100" class="fonce" id="C7" onclick="javascript:changeText('C7')" align="center">&#9823;</td>
<td width="100" height="100" class="clair" id="D7" onclick="javascript:changeText('D7')" align="center">&#9823;</td>
<td width="100" height="100" class="fonce" id="E7" onclick="javascript:changeText('E7')" align="center">&#9823;</td>
<td width="100" height="100" class="clair" id="F7" onclick="javascript:changeText('F7')" align="center">&#9823;</td>
<td width="100" height="100" class="fonce" id="G7" onclick="javascript:changeText('G7')" align="center">&#9823;</td>
<td width="100" height="100" class="clair" id="H7" onclick="javascript:changeText('H7')" align="center">&#9823;</td>
<td width="100" height="100">7</td>
</tr>
<tr>
<td width="100" height="100" class="clair" id="A6" onclick="javascript:changeText('A6')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="B6" onclick="javascript:changeText('B6')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="C6" onclick="javascript:changeText('C6')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="D6" onclick="javascript:changeText('D6')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="E6" onclick="javascript:changeText('E6')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="F6" onclick="javascript:changeText('F6')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="G6" onclick="javascript:changeText('G6')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="H6" onclick="javascript:changeText('H6')" align="center">&nbsp;</td>
<td width="100" height="100">6</td>
</tr>
<tr>
<td width="100" height="100" class="fonce" id="A5" onclick="javascript:changeText('A5')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="B5" onclick="javascript:changeText('B5')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="C5" onclick="javascript:changeText('C5')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="D5" onclick="javascript:changeText('D5')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="E5" onclick="javascript:changeText('E5')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="F5" onclick="javascript:changeText('F5')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="G5" onclick="javascript:changeText('G5')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="H5" onclick="javascript:changeText('H5')" align="center">&nbsp;</td>
<td width="100" height="100">5</td>
</tr>
<tr>
<td width="100" height="100" class="clair" id="A4" onclick="javascript:changeText('A4')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="B4" onclick="javascript:changeText('B4')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="C4" onclick="javascript:changeText('C4')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="D4" onclick="javascript:changeText('D4')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="E4" onclick="javascript:changeText('E4')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="F4" onclick="javascript:changeText('F4')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="G4" onclick="javascript:changeText('G4')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="H4" onclick="javascript:changeText('H4')" align="center">&nbsp;</td>
<td width="100" height="100">4</td>
</tr>
<tr>
<td width="100" height="100" class="fonce" id="A3" onclick="javascript:changeText('A3')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="B3" onclick="javascript:changeText('B3')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="C3" onclick="javascript:changeText('C3')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="D3" onclick="javascript:changeText('D3')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="E3" onclick="javascript:changeText('E3')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="F3" onclick="javascript:changeText('F3')" align="center">&nbsp;</td>
<td width="100" height="100" class="fonce" id="G3" onclick="javascript:changeText('G3')" align="center">&nbsp;</td>
<td width="100" height="100" class="clair" id="H3" onclick="javascript:changeText('H3')" align="center">&nbsp;</td>
<td width="100" height="100">3</td>
</tr>
<tr>
<td width="100" height="100" class="clair" id="A2" onclick="javascript:changeText('A2')" align="center">&#9817;</td>
<td width="100" height="100" class="fonce" id="B2" onclick="javascript:changeText('B2')" align="center">&#9817;</td>
<td width="100" height="100" class="clair" id="C2" onclick="javascript:changeText('C2')" align="center">&#9817;</td>
<td width="100" height="100" class="fonce" id="D2" onclick="javascript:changeText('D2')" align="center">&#9817;</td>
<td width="100" height="100" class="clair" id="E2" onclick="javascript:changeText('E2')" align="center">&#9817;</td>
<td width="100" height="100" class="fonce" id="F2" onclick="javascript:changeText('F2')" align="center">&#9817;</td>
<td width="100" height="100" class="clair" id="G2" onclick="javascript:changeText('G2')" align="center">&#9817;</td>
<td width="100" height="100" class="fonce" id="H2" onclick="javascript:changeText('H2')" align="center">&#9817;</td>
<td width="100" height="100">2</td>
</tr>
<tr>
<td width="100" height="100" class="fonce" id="A1" onclick="javascript:changeText('A1')" align="center">&#9814;</td>
<td width="100" height="100" class="clair" id="B1" onclick="javascript:changeText('B1')" align="center">&#9816;</td>
<td width="100" height="100" class="fonce" id="C1" onclick="javascript:changeText('C1')" align="center">&#9815;</td>
<td width="100" height="100" class="clair" id="D1" onclick="javascript:changeText('D1')" align="center">&#9813;</td>
<td width="100" height="100" class="fonce" id="E1" onclick="javascript:changeText('E1')" align="center">&#9812;</td>
<td width="100" height="100" class="clair" id="F1" onclick="javascript:changeText('F1')" align="center">&#9815;</td>
<td width="100" height="100" class="fonce" id="G1" onclick="javascript:changeText('G1')" align="center">&#9816;</td>
<td width="100" height="100" class="clair" id="H1" onclick="javascript:changeText('H1')" align="center">&#9814;</td>
<td width="100" height="100">1</td>
</tr>
<tr>
<td align="center" valign="top">A</td>
<td align="center" valign="top">B</td>
<td align="center" valign="top">C</td>
<td align="center" valign="top">D</td>
<td align="center" valign="top">E</td>
<td align="center" valign="top">F</td>
<td align="center" valign="top">G</td>
<td align="center" valign="top">H</td>
</tr>
</table>

Ajoutons au dessus du tableau une nouvelle balise portant un identifiant unique ma_balise. Cette balise permettra d'afficher l'identifiant de la cellule cliquée. Il s'agit ici d'une balise <b> à l'intérieur d'une balise <p> à placer dans le code source HTML juste avant la balise ouvrant du tableau <table> :

<p align="center"><b id='ma_balise'>---</b></p>

Voici la position de cette nouvelle ligne dans le code HTML de la page Web :

Enfin, voici la fonction changeText() écrite en JavaScript. Cette fonction reçoit en paramètre l'identifiant de la case cliquée (dans la variable c), et grâce à la méthode innerHTML de JavaScript elle va modifier le contenu de la balise unique ayant pour identifiant ma_balise :

<script type="text/javascript">
function changeText(c){
    document.getElementById('ma_balise').innerHTML = "Vous avez cliqué dans la case "+c;
    }
</script>

Remarque : les fonctions écrites en JavaScript se placent à la fin de l'entête du fichier HTML (juste avant la balise fermante </head>) et sont encadrées entre une balise ouvrant <script type="text/javascript"> et une balise fermante </script>.

La fonction document.getElementById('ma_balise').innerHTML de JavaScript permet aussi bien de connaître que de modifier le contenu de la balise unique de la page ayant pour identifiant 'ma_balise' (c'est-à-dire la balise possédant l'attribut id="ma_balise").

Voilà, la version 2 de l'échiquier est terminée. Désormais, si on clique dans une des 64 cases du plateau, cette case est repérée et son identifiant est clairement affiché sur la page web grâce au langage JavaScript.

Cliquez ici pour ouvrir la version 2 de l'échiquier dans un nouvel onglet afin de la tester

Voici le résultat final que l'on veut obtenir dans cette version du jeu :

• si on clique sur une case pleine, la pièce concernée est extraite du plateau et positionnée dans une zone externe
• si on clique dans une case vide, la pièce mise de côté est replacée sur le plateau dans la case visée

La zone de la page web externe au plateau et sur laquelle sera positionnée provisoirement une pièce sera appellée zone d'attente.

Pour obtenir ce résultat, faites évoluer progressivement la version 2 du jeu d'échecs (décrite et donnée ci-dessus) en effectuant chacune des 6 étapes suivantes.

Étape 1 :

Dans la version 2, si on clique sur une case c'est l'identifiant de la case qui est affiché dans la balise dont l'attribut id vaut 'ma_balise'.

Nous allons faire en sorte ici que ce soit le pion présent dans la case cliqué qui soit recopié dans la balise d'identifiant ma_balise.

Pour cela, faites évoluer comme ceci la fonction changeText() en Javascript afin qu'elle recopie le contenu de la balise d'identifiant c dans la balise d'identifiant ma_balise :

<script type="text/javascript">
function changeText(c){
    document.getElementById('ma_balise').innerHTML = document.getElementById(c).innerHTML;
    }
</script>

Testez votre nouvelle page en l'actualisant dans le navigateur (touche F5) après avoir enregistré les modifications dans votre fichier HTML.

Problème : en recopiant une pièce dans la balise <b> d'identifiant ma_balise, le plateau s'est déplacé vers le bas. De plus, la pièce étant écrite dans une balise <b>, elle est affichée en gras c'est-à-dire différemment des pièces présentes sur le plateau.

Passez à l'étape 2 pour résoudre ce problème.

Étape 2 :

Pour que la zone d'attente (zone à l'extérieur du plateau où la pièce extraite sera placée) ne décale pas toute la page web il faut que ce soit dès le départ un tableau contenant une seule cellule de dimention 100x100 pixels (comme les 64 cellules de l'échiquier).

Pour cela, remplacer la balise <p> contenant la balise <b> d'identifiant ma_balise par un tableau vide contenant une seule cellule et dont la balise <td> porte l'identifiant ma balise.

Dans le code HTML on remplace donc la ligne :

<p align="center"><b id='ma_balise'>---</b></p>

par le tableau suivant (contenant une seule cellule et centré horizontalement) :

<center>
<table width="100" height="100">
<tr>
<td width="100" height="100" align="center" id="ma_balise" style="font-size:70px;">&nbsp;</td>
</tr>
</table>
</center>

Testez votre nouvelle page en l'actualisant dans le navigateur (touche F5) après avoir enregistré les modifications dans votre fichier HTML.

Cette fois, si on clique sur une case pleine, la pièce concernée est recopiée dans la zone d'attente, c'est-à-dire dans la balise unique portant l'identifiant ma_balise : il s'agit de la seule cellule d'un tableau de dimansion 100x100 pixels.

Problème : si on clique sur une pièce elle est bien recopiée dans la zone d'attente, mais elle n'est pas supprimée du plateau.

Passez à l'étape 3 pour résoudre ce problème.

Étape 3 :

Pour que la pièce soit supprimée du plateau il faut mettre un espace insécable de code HTML &nbsp; dans la case cliquée (d'identifiant c) à la place du code HTML de la pièce.

Pour cela faites évoluer la fonction changeText() écrite en Javascript comme ceci :

<script type="text/javascript">
function changeText(c){
    document.getElementById('ma_balise').innerHTML = document.getElementById(c).innerHTML;
    document.getElementById(c).innerHTML='&nbsp;';
    }
</script>

La ligne en rouge ci-dessus écrit &nbsp; dans la balise unique dont l'identifiant est c : il s'agit de la case de l'échiquier sur laquelle on vient de cliquer.

Testez votre nouvelle page en l'actualisant dans le navigateur (touche F5) après avoir enregistré les modifications dans votre fichier HTML.

Problème : au fur et à mesure que l'on clique sur des cases pleines de l'échiquier, les pièces sont bien déplacées dans la zone d'attente mais elle disparaîssent petit à petit du plateau. Si on clique dans une case vide, la pièce mise de côté dans la zone d'attente n'est pas replacée sur le plateau.

Passez à l'étape 4 pour résoudre ce problème.

Étape 4 :

Pour que la pièce mise de côté dans la zone d'attente soit replacée sur le plateau, il faut faire évoluer la fonction changeText() en Javascript afin qu'elle recopie le contenu de la balise d'identifiant ma_balise dans la balise d'identifiant c.

Mais attention : l'action réalisée dépend de l'état de la case sur laquelle on a cliqué :

• si on clique sur une case pleine, la pièce doit être déplacé du plateau vers la zone d'attente
• si on clique sur une case vide, la pièce doit être déplacée de la zone d'attente vers le plateau

La fonction changeText() doit donc tester l'état de la case cliquée afin de déterminer l'action à réaliser.

Pour détecter une case vide il suffit de comparer le contenu de la balise (donné par document.getElementById(c).innerHTML) au caractère &nbsp; présent dans les cases vides.

Pour cela, la fonction changeText() commence par un test if afin de savoir si on vient de cliquer sur une case vide ou sur une case pleine :

<script type="text/javascript">
function changeText(c){
if (document.getElementById(c).innerHTML=='&nbsp;')
  { // la case cliquée sur le plateau est vide
    document.getElementById(c).innerHTML=document.getElementById('ma_balise').innerHTML; // zone vers plateau
    document.getElementById('ma_balise').innerHTML='&nbsp;'; // vide la zone d'attente
  }
else
  { // la case cliquée sur le plateau est pleine
    document.getElementById('ma_balise').innerHTML = document.getElementById(c).innerHTML; // plateau vers zone
    document.getElementById(c).innerHTML='&nbsp;'; // vide la case du plateau
  }
}
</script>

Faites évoluer la fonction changeText() comme indiqué ci-dessus puis testez votre nouvelle page en l'actualisant dans le navigateur (touche F5) après avoir enregistré les modifications dans votre fichier HTML.

Problème :

• si une pièce est sur la zone d'attente et qu'on clique sur une case vide, la pièce est bien replacée sur le plateau dans la case vide cliquée
• mais si une pièce est sur la zone d'attente et qu'on clique sur une case pleine, une nouvelle pièce est supprimée du plateau et la pièce qui était sur la zone d'attente est définitivement perdue

Or il faudrait que la pièce présente sur la zone d'attente remplace la pièce présente dans la case pleine qui est cliquée, ce qui correspond à "manger une pièce" lors d'une partie de jeu d'échecs.

Passez à l'étape 5 pour résoudre ce problème.

Étape 5 :

En réalité si on clique sur une case pleine, la fonction changeText() doit réaliser deux actions différentes selon l'état de la zone d'attente :

• si la zone d'attente est vide, alors la pièce cliquée est sortie du plateau vers la zone d'attente
• mais si la zone d'attente contient une pièce, alors elle doit remplacer la pièce cliquée sur le plateau

Voici la version de la fonction changeText() qui remplace les pièces si on clique dans une case pleine :

<script type="text/javascript">
function changeText(c){
if (document.getElementById(c).innerHTML=='&nbsp;')
{ // la case cliquée est vide : déplacement d'un pion de la zone d'attenteu vers le plateau :
document.getElementById(c).innerHTML=document.getElementById('ma_balise').innerHTML;
document.getElementById('ma_balise').innerHTML='&nbsp;';
}
else
{ // la case cliquée est pleine
   if (document.getElementById('ma_balise').innerHTML=='&nbsp;')
   { // zone d'attente vide : déplacement d'un pion du plateau vers la zone d'attente :
   document.getElementById('ma_balise').innerHTML = document.getElementById(c).innerHTML;
   document.getElementById(c).innerHTML='&nbsp;';
   }
   else
   { // zone d'attente pleine : remplacement d'un pion par un autre :
   document.getElementById(c).innerHTML=document.getElementById('ma_balise').innerHTML;
   document.getElementById('ma_balise').innerHTML = '&nbsp;';
   }
}
}
</script>

Dans le code JavaScript ci-dessus :

• le test if (document.getElementById(c).innerHTML=='&nbsp;') teste si la case cliquée est vide
• le test if (document.getElementById('ma_balise').innerHTML=='&nbsp;') teste si la zone d'attente est vide

Mainenant si on clique sur une case pleine alors qu'il y a une pièce mise de côté dans la zone d'attente, alors la pièce cliquée sur le plateau est remplacée par la pièce mise de côté.

Problème : l'utilisateur ne sait pas trop ce qu'il faut faire. Faut-il cliquer sur une case pleine ou sur une case vide ?

Passez à l'étape 6 pour résoudre ce problème.

Étape 6 :

Afin de donner les consignes de jeu à l'utilisateur nous allons rajouter sur la page web une balise <p> d'identifiant 'texte' juste au dessus du tableau représentant la zone d'attente :

<p align="center" id='texte'>Cliquez dans une case <b>pleine</b> de l'échiquier pour sortir une pièce</p>

Voici la position de cette nouvelle ligne dans le code HTML de la page Web :

La consigne affichée dans cette balise devra alterner entre les 2 messages suivants :

• Cliquez dans une case pleine de l'échiquier pour sortir une pièce
• Cliquez dans une case vide de l'échiquier pour y replacer la pièce sortie

Pour cela on fait évoluer la fonction changeText() afin qu'elle mette à jour le contenu de la balise unique d'identifiant 'texte'.

Et voici la version finale de la fonction changeText() qui affiche une consigne à l'utilisateur :

<script type="text/javascript">
function changeText(c){
if (document.getElementById(c).innerHTML=='&nbsp;')
{ // la case cliquée est vide : déplacement d'un pion de la zone d'attenteu vers le plateau :
document.getElementById(c).innerHTML=document.getElementById('ma_balise').innerHTML;
document.getElementById('ma_balise').innerHTML='&nbsp;';
document.getElementById('texte').innerHTML = "Cliquez dans une case <b>pleine</b> de l'échiquier pour sortir une pièce";
}
else
{ // la case cliquée est pleine
   if (document.getElementById('ma_balise').innerHTML=='&nbsp;')
   { // zone d'attente vide : déplacement d'un pion du plateau vers la zone d'attente :
   document.getElementById('ma_balise').innerHTML = document.getElementById(c).innerHTML;
   document.getElementById(c).innerHTML='&nbsp;';
   document.getElementById('texte').innerHTML = "Cliquez dans une case <b>vide</b> de l'échiquier pour y replacer la pièce sortie";
   }
   else
   { // zone d'attente pleine : remplacement d'un pion par un autre :
   document.getElementById(c).innerHTML=document.getElementById('ma_balise').innerHTML;
   document.getElementById('ma_balise').innerHTML = '&nbsp;';
   document.getElementById('texte').innerHTML = "Cliquez dans une case <b>pleine</b> de l'échiquier pour sortir une pièce";
   }
}
}
</script>

Faites évoluer la fonction changeText() comme indiqué ci-dessus puis testez votre nouvelle page en l'actualisant dans le navigateur (touche F5) après avoir enregistré les modifications dans votre fichier HTML.

Pour finir voici un extrait de l'entête du fichier HTML du jeu d'échecs version 3, avec le code CSS des styles utilisés (dans la balise <style>) et le code JavaScript de la fonction changeText() (dans la balise <script>) :

Bonne partie d'échecs !

Cliquez ici pour ouvrir la version 3 de l'échiquier dans un nouvel onglet afin de la tester

Voici l'amélioration que nous allons apporter à notre jeu d'échecs dans cette version 4 :

• ajouter un lien permettant de remettre la partie à zéro (repositionnement des 32 pions dans leur places initiales)
• ajouter un lien qui inverse, en position de départ, la position des pions blancs et des pions noirs

Voilà à quoi ressemble ces 2 liens en haut de la page web de l'échiquier :

Pour remettre les 32 pièces du jeu en position de départ, il faut commencer par créer une nouvelle fonction en JavaScript qui va imposer le contenu de chacune des cases de l'échiquier en fonction de leur identifiant.

Cette fonction s'appellera depart() et sera écrite juste après la fonction ChangeText() (toujours dans la même balise <script> qui est dans l'en-tête <head> de la page HTML).

Voici le début de cette fonction depart() qui impose un pion dans chacune des cases. Cet exemple montre comment repositionner :

• la tour noire dans la case A8
• le cavalier noir dans la case B8
• le fou noir dans la case C8
• et la reine noire dans la case D8

function depart() {
      document.getElementById('A8').innerHTML = '&#9820;';
      document.getElementById('B8').innerHTML = '&#9822;';
      document.getElementById('C8').innerHTML = '&#9821;';
      document.getElementById('D8').innerHTML = '&#9819;';
}

Pour l'instant cette fonction n'a que 4 lignes. Évidemment pour replacer les 32 pièces du jeu d'échecs il faudra écrire 32 instructions document.getElementById dans la fonction depart().

De plus, les 32 cases du plateau qui n'ont pas de pièce en position de départ (les lignes 3, 4, 5 et 6) devront contenir un espace insécable de code HTML &nbsp; grâce à une ligne de type document.getElementById('H6').innerHTML = '&nbsp;'; dans la fonction depart().

Conclusion : au final la fonction depart() devra contenir 64 lignes de code de la forme document.getElementById('xx').innerHTML = '&xxxxx;'; : une ligne pour chacune des 64 cases de l'échiquier, que la case soit pleine ou vide en position de départ.

Pour lancer cette fonction Javascript à partir d'un simple lien texte, il faut écrire javascript:depart() comme destination du lien :

Pour replacer les pions en position de départ mais en inversant les joueurs (pions blancs en haut et pions noirs en bas) on va écrire une nouvelle fonction en JavaScript qui s'appelle depart_inverse(). Son principe est le même que la fonction depart(), et l'écriture de depart_inverse() peut être assez rapide si on part du code de depart() dans lequel on ne modifie que certaines lignes.

Cette fonction depart_inverse() sera appelée par un second lien sur la page :

Voici la page du jeu d'échecs dans cette version 4 avec les 2 nouveaux liens en haut de la page. Si on clique sur le premier lien, les pions sont remis en position de départ avec le joueur noir en haut de l'échiquier :

Et si on clique sur le second lien, les pions sont remis en position de départ avec le joueur blanc en haut de l'échiquier :

Enfin, il ne faut pas oublier de vider la zone d'attente lorsqu'on clique sur un des deux liens afin de bien remettre à zéro la totalité du jeu. Voici par exemple à quoi ressemble la fin de la fonction depart() :

Cliquez ici pour ouvrir la version 4 de l'échiquier dans un nouvel onglet afin de la tester

Voici l'amélioration que nous allons apporter à notre jeu d'échecs dans cette version 5 :

• pour l'instant si on pion est "mangé" il disparaît immédiatement du plateau et donc de la page web
• il faut faire en sorte que si un pion est "mangé", il reste apparent dans une zone externe au plateau
• cela permettra aux joueurs de garder sous les yeux la totalité des pièces qui ont déjà été éliminées

Pour celà il faut créer une nouvelle zone sur la page, initialement vide, dans laquelle on va ajouter petit à petit tous les pions qui sont éliminés du plateau.

Cette zone sera une nouvelle colonne à droite du tableau de l'échiquier, et aura comme identifiant id="supprime"

Voici une illustration du contenu de cette zone supprime en cours de partie. Dans cet exemple 3 pièces ont déjà été "mangées" : elles sont éliminées du plateau mais apparaissent dans la zone supprime :

• un pion blanc
• un cavalier noir
• une tour noire

Afin de ne pas décaler le plateau, on fera en sorte que lorsque beaucoup de pièces sont éliminées elles soient affichées 4 par 4 sur chaque ligne de la zone supprime :

Enfin, pour ajouter petit à petit les pièces dans la zone supprime, il faut faire évoluer la seconde partie de la fonction changeText(c) en s'inspirant du code JavaScript suivant :

Remarque : la variable n qui compte le nombre de pièces sorties du plateau doit être initialisée à 0 au début du script, en dehors de la fonction changeText(). De plus, certains messages ne seront affichés que si n est différent de 31, c'est-à-dire s'il reste encore plusieurs pièces sur le plateau :

Cliquez ici pour ouvrir la version 5 de l'échiquier dans un nouvel onglet afin de la tester

Voici l'amélioration que nous allons apporter à notre jeu d'échecs dans cette version 6 :

• actuellement on peut jouer n'importe quel pion qui peut manger n'importe lequel
• il faut faire en sorte qu'un joueur ne puisse manger que les pions de son adversaire : un pion blanc ne peut pas éliminer un pion blanc, et un pion noir ne doit pas pouvoir remplacer un autre pion noir
• de plus il faut être plus précis dans les consigne de jeu affichées dans la balise 'texte', et afficher un message en rouge si l'utilisateur ne respecte pas les consignes

La consigne de base au début du jeu est la suivante :

Si on clique sur une case pleine, la pièce est sortie du plateau et le jeu continue normalement.

Mais si on clique sur une case vide, rien ne se passe au niveau du plateau mais la consigne doit évoluer pour montrer que le programme c'est apperçu que l'utilisateur n'a pas respecté la consigne de jeu demandée :

Lorsqu'une pièce, noire dans cet exemple, est sortie du plateau, la consigne est la suivante :

Si l'utilisateur clique dans une case vide, tout va bien et la pièce sortie est replacée dans sur la plateau dans la nouvelle case.

Si l'utilisateur clique dans une case pleine contenant un pion blanc, tout va bien et la pièce sortie va éliminer le pion blanc (qui sort alors du plateau).

Mais si l'utilisateur clique dans une case pleine contenant un pion noir alors qu'il a sortie un autre pion noir, la consigne n'est pas respectée. On effet aux échecx un pion noir ne peut pas remplacer un autre pion noir. Il faut alors indiquer en rouge à l'utilisateur la consigne suivante :

Pour détecter si on a cliqué sur un pion blanc ou un pion noir on va commencer par créer une liste contenant les codes unicode des 9 pion noir au début du script :

La méthode indexOf de JavaScript liée aux listes renvoie l'index d'une valeur si elle est présente dans la liste, et renvoie -1 si la valeur recherchée n'est pas dans la liste. Celà permet de savoir, lorsqu'on clique sur une case pleine, si la pièce présente est noire ou pas. Si le code de la pièce cliquée n'est pas dans la liste liste_pions_noirs alors c'est forcément un pion blanc.

Grâce à une variable couleur que l'on fixe à blanc ou à noir, il est alors possible de personnaliser la consigne affichée lorsqu'on a sortie une pièce du plateau :

Remarque : en JavaScript l'opérateur && réalise un ET logique et l'opérateur || réalise un OU logique. Bien utilisés ils permette d'écrire des conditions logiques précises afin de détecter des cas bien particuliers

Cliquez ici pour ouvrir la version 6 de l'échiquier dans un nouvel onglet afin de la tester

Voici l'amélioration que l'on va apporter à notre jeu d'échecs dans cette version 7 :

• actuellement on peut jouer plusieurs fois de suite les pions noirs, ou plusieurs fois de suite les pions blancs
• il faut faire en sorte que les joueurs jouent alternativement : déplacement d'un pion blanc, puis déplacement d'un pion noir, puis d'un blanc, etc. alternativement en interdisant qu'un joueur joue deux fois de suite

La consigne de base 'Cliquez dans une case pleine de l'échiquier pour sortir une pièce' doit être plus précise et doit afficher alternativement une des deux consignes suivantes :

• Cliquez dans une case contenant un pion noir pour sortir une pièce
• Cliquez dans une case contenant un pion blanc pour sortir une pièce

Si ces consignes ne sont pas respectées, on affichera en rouge et en gras une des consignes suivantes pour rappeler à l'utilisateur ce que l'on attend (toujours dans le paragraphe d'identifiant texte qui affiche les consignes de jeu) :

• C'est aux noirs de jouez : cliquez dans une case pleine contenant un pion noir !
• C'est aux blancs de jouez : cliquez dans une case pleine contenant un pion blanc !

Cliquez ici pour ouvrir la version 7 de l'échiquier dans un nouvel onglet afin de la tester

Voici quelques idées d'amélioration que l'on pourrait encore apporter à notre jeu d'échecs :

AMÉLIORATION 1 :

Actuellement si une pièce est sortie du plateau puis remise à la même place sur le plateau le joueur passe son tour. Or, si la pièce est remise au même endroit sur le plateau le coup doit être annulé et le joueur doit rejouer. Il faut alors détecter un tel coup nul et afficher le message suivant :

• Pièce replacée au même endroit : le coup est annulé

AMÉLIORATION 2 :

De plus, lorsqu'une pièce est dans la zone d'attente il faut clairement l'identifier ("Tour noire", "Cavalier blanc", etc) et indiquer une consigne rappelant le mouvement autorisé de cette pièce. Les consignes de déplacement seront par exemple les suivantes :

• Pion noir : il se déplace verticalement d'une seule case
• Tour noire : elle se déplace en ligne droite (horizontalement ou verticalement)
• Cavalier noir : il se déplace en L et peut sauter par dessus les autres pièces
• Fou blanc : il se déplace en diagonale
• Reine blanche : elle peut se déplacer dans les 8 directions (horizontal, vertical et diagonales)
• Roi blanc : il se déplace d'une seule case dans les 8 directions

Tous les nouveaux messages de cette version 8 qui concernent le déplacement des pièces seront affichés dans un nouveau paragraphe d'identifiant deplacement qui sera placée dans la page web immédiatement en dessous du paragraphe d'identifiant texte qui affiche déjà les consignes de jeu :

La version 8 suivante apporte ces 2 nouvelles améliorations :

Cliquez ici pour ouvrir la version 8 de l'échiquier dans un nouvel onglet afin de la tester

AMÉLIORATION 3 :

Une autre amélioration possible serait de limiter le mouvement des pièces aux seuls déplacements autorisés par les règles du jeu d'échecs. Pour celà, il faut comparer les coordonnées des cases de départ et d'arrivée pour analyser si le mouvement est autorisé ou pas.

Réalisé par Jean-Christophe MICHEL

© Mars 2024