Jeu d'échecs

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 : amélioration du projet

Version 1 : l'échiquier de base

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   (sans paragraphe <p> ni conteneur générique <div> ou <span>) :

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> :

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 :

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)
saisir <td> dans le texte à rechercher afin de modifier toutes les balises ouvrante <td> sans attribut
saisir <td width="100" height="100"> dans le texte de remplacement afin de leur ajouter les 2 attributs width et height
cliquez sur le bouton Remplacer tout pour modifier toutes les occurences de <td> trouvées dans le code source
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  ) :

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

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 :

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 :

Les 6 pions blancs	Représentation	Code unicode en décimal	Code unicode en hexadécimal
la tour	♖	9814	2656
le cavalier	♘	9816	2658
le fou	♗	9815	2657
la dame	♕	9813	2655
le roi	♔	9812	2654
le pion	♙	9817	2659

Et voici les codes unicode des 6 pions noirs :

Les 6 pions noirs	Représentation	Code unicode en décimal	Code unicode en hexadécimal
la tour	♜	9820	265C
le cavalier	♞	9822	265E
le fou	♝	9821	265D
la dame	♛	9819	265B
le roi	♚	9818	265A
le pion	♟	9823	265F

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

Le code HTML ꯍ 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) :

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

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

Version 2 : le tableau cliquable

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 :

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) :

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟	♟	♟	♟	♟	♟	7
								6
								5
								4
								3
♙	♙	♙	♙	♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
A	B	C	D	E	F	G	H

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 :

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 :

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 :

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> :

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 :

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

Version 3 : le jeu d'échecs interactif

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 :

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 :

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

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   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 :

La ligne en rouge ci-dessus écrit   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   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 :

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 :

Dans le code JavaScript ci-dessus :

le test if (document.getElementById(c).innerHTML==' ') teste si la case cliquée est vide
le test if (document.getElementById('ma_balise').innerHTML==' ') 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 :

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

Version 4 : amélioration du projet

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

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
faire en sorte que si un pion est "mangé", il reste apparent dans une zone externe au plateau

Réalisé par Jean-Christophe MICHEL

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟




♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

♖	♘	♗	♔	♕	♗	♘	♖
♙	♙	♙	♙	♙	♙	♙	♙




♟	♟	♟	♟	♟	♟	♟	♟
♜	♞	♝	♚	♛	♝	♞	♜

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟	♟	♟	♟	♟	♟	7
								6
								5
								4
								3
♙	♙	♙	♙	♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
A	B	C	D	E	F	G	H

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟




♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

♖	♘	♗	♔	♕	♗	♘	♖
♙	♙	♙	♙	♙	♙	♙	♙




♟	♟	♟	♟	♟	♟	♟	♟
♜	♞	♝	♚	♛	♝	♞	♜

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟	♟	♟	♟	♟	♟	7
								6
								5
								4
								3
♙	♙	♙	♙	♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
A	B	C	D	E	F	G	H

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟




♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

♖	♘	♗	♔	♕	♗	♘	♖
♙	♙	♙	♙	♙	♙	♙	♙




♟	♟	♟	♟	♟	♟	♟	♟
♜	♞	♝	♚	♛	♝	♞	♜

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟	♟	♟	♟	♟	♟	7
								6
								5
								4
								3
♙	♙	♙	♙	♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
A	B	C	D	E	F	G	H