Visualiseur de parties d'échecs

JPBruneau

Cet article décrit une méthode simple pour générer et faire jouer sur une page Web, une partie d'échecs, en préservant une compatibilité avec la plupart des navigateurs, les fichiers exemples emploient un encodage Latin1.
Commentez

- Titre : Visualiseur de parties d'échecs

- Auteur : JPBruneau

- Parution : 5 juin 2013

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 JPBruneau. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. Liste des éléments de l'article

- III. Les sources

- IV. Remerciements

I - Avant-propos

S'adressant à tous ceux qui maîtrisent les « mécanismes d'interaction entre le JavaScript et le HTML », cet article vous explique la méthode pour un bon emploi de ce « moteur » que vous pouvez utiliser librement (libre de droits).

II - Liste des éléments de l'article

Avant d'expliquer l'utilisation de ce moteur, voici la liste des fichiers que vous aurez à utiliser pour chaque page Web possédant une partie d'échecs à exécuter :

echec134.htm : la page HTML d'une partie (disons la partie 134 ).
echec134.js : le JavaScript attaché à cette partie.

Et les éléments communs à toutes les parties d'échecs :

echec.css : la feuille de style commune à toutes les pages HTML contenant une partie d'échecs.
echec.js : le JavaScript commun à toutes les pages HTML contenant une partie d'échecs.

Le répertoire echec/ qui contient les images de l'échiquier, des pièces, etc.

Notez bien que le fichier echec134.htm contient le DOCTYPE et tout le haut de page dont l'échiquier et les pièces. Il va de soi que sur un site PHP vous auriez tout intérêt à placer tout ce code « haut de page » dans un PHP qui serait alors inclus dans chaque page !

III - Les sources

Vous pouvez télécharger les codes de la partie 134 ici.

Testez la partie echec134 exemple de cet article.

echec134.htm

Nous allons distinguer deux parties pour ce HTML propre à une partie d'échecs.
Avant tout, le DOCTYPE et, sur la gauche de l'écran, l'échiquier et toutes ses pièces. Partie classique ne méritant pas de commentaire.

echec134.htm

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Moteur de parties d echecs</title>
<meta name='keywords' content='Moteur de parties d echecs' />
<meta name='description' content='Moteur de parties d echecs' />
<meta name='robots' content='all' />
<meta http-equiv='content-language' content='fr, en' />
<meta name='expires' content='never' />
<meta name='rating' content='general' />
<meta name='revisit-after' content='30 days' />
<link rel='shortcut icon' type='image/x-icon' href='http://www.votre site/favicon.ico' />
<link rel='stylesheet' href='echec.css' type='text/css' media='all'  />
</head><body onload=Allez()>
<div  class='LechecX'>
<table><tr><td class='Le160'>
<a href='../index.php' class='LesA' ><img alt=' '  src='echec/home.gif'   /></a><br />
<a class='LesBoutons'  href='javascript:FAIT(0);'><img alt=' '  id='echec01' src='echec/ctdeb.jpg' /></a>
<a class='LesBoutons'  href='javascript:FAIT(1);'><img alt=' '  id='echec02' src='echec/ctgau.jpg' /></a>
<a class='LesBoutons'  href='javascript:FAIT(2);'><img alt=' '  id='echec03' src='echec/ctdro.jpg' /></a>
<a class='LesBoutons'  href='javascript:FAIT(3);'><img alt=' '  id='echec04' src='echec/ctfin.jpg' /></a><br />
</td></tr><tr><td class='Le0'>
<img alt=' '  id='le73' src='echec/vd32.gif' /><img alt=' '  id='le0' src='echec/tn32.gif' /><img alt=' '  id='le1' src='echec/cn32.gif' />
<img alt=' '  id='le2' src='echec/fn32.gif' /><img alt=' '  id='le3' src='echec/dn32.gif' /><img alt=' '  id='le4' src='echec/rn32.gif' />
<img alt=' '  id='le5' src='echec/fn32.gif' /><img alt=' '  id='le6' src='echec/cn32.gif' /><img alt=' '  id='le7' src='echec/tn32.gif' /><br />
<img alt=' '  id='le74' src='echec/vd32.gif' /><img alt=' '  id='le8' src='echec/pn32.gif' /><img alt=' '  id='le9' src='echec/pn32.gif' />
<img alt=' '  id='le10' src='echec/pn32.gif' /><img alt=' '  id='le11' src='echec/pn32.gif' /><img alt=' '  id='le12' src='echec/pn32.gif' />
<img alt=' '  id='le13' src='echec/pn32.gif' /><img alt=' '  id='le14' src='echec/pn32.gif' /><img alt=' '  id='le15' src='echec/pn32.gif' /><br />
<img alt=' '  id='le75' src='echec/vd32.gif' /><img alt=' '  id='le16' src='echec/vd32.gif' /><img alt=' '  id='le17' src='echec/vd32.gif' />
<img alt=' '  id='le18' src='echec/vd32.gif' /><img alt=' '  id='le19' src='echec/vd32.gif' /><img alt=' '  id='le20' src='echec/vd32.gif' />
<img alt=' '  id='le21' src='echec/vd32.gif' /><img alt=' '  id='le22' src='echec/vd32.gif' /><img alt=' '  id='le23' src='echec/vd32.gif' /><br />
<img alt=' '  id='le76' src='echec/vd32.gif' /><img alt=' '  id='le24' src='echec/vd32.gif' /><img alt=' '  id='le25' src='echec/vd32.gif' />
<img alt=' '  id='le26' src='echec/vd32.gif' /><img alt=' '  id='le27' src='echec/vd32.gif' /><img alt=' '  id='le28' src='echec/vd32.gif' />
<img alt=' '  id='le29' src='echec/vd32.gif' /><img alt=' '  id='le30' src='echec/vd32.gif' /><img alt=' '  id='le31' src='echec/vd32.gif' /><br />
<img alt=' '  id='le77' src='echec/vd32.gif' /><img alt=' '  id='le32' src='echec/vd32.gif' /><img alt=' '  id='le33' src='echec/vd32.gif' />
<img alt=' '  id='le34' src='echec/vd32.gif' /><img alt=' '  id='le35' src='echec/vd32.gif' /><img alt=' '  id='le36' src='echec/vd32.gif' />
<img alt=' '  id='le37' src='echec/vd32.gif' /><img alt=' '  id='le38' src='echec/vd32.gif' /><img alt=' '  id='le39' src='echec/vd32.gif' /><br />
<img alt=' '  id='le78' src='echec/vd32.gif' /><img alt=' '  id='le40' src='echec/vd32.gif' /><img alt=' '  id='le41' src='echec/vd32.gif' />
<img alt=' '  id='le42' src='echec/vd32.gif' /><img alt=' '  id='le43' src='echec/vd32.gif' /><img alt=' '  id='le44' src='echec/vd32.gif' />
<img alt=' '  id='le45' src='echec/vd32.gif' /><img alt=' '  id='le46' src='echec/vd32.gif' /><img alt=' '  id='le47' src='echec/vd32.gif' /><br />
<img alt=' '  id='le79' src='echec/vd32.gif' /><img alt=' '  id='le48' src='echec/pb32.gif' /><img alt=' '  id='le49' src='echec/pb32.gif' />
<img alt=' '  id='le50' src='echec/pb32.gif' /><img alt=' '  id='le51' src='echec/pb32.gif' /><img alt=' '  id='le52' src='echec/pb32.gif' />
<img alt=' '  id='le53' src='echec/pb32.gif' /><img alt=' '  id='le54' src='echec/pb32.gif' /><img alt=' '  id='le55' src='echec/pb32.gif' /><br />
<img alt=' '  id='le80' src='echec/vd32.gif' /><img alt=' '  id='le56' src='echec/tb32.gif' /><img alt=' '  id='le57' src='echec/cb32.gif' />
<img alt=' '  id='le58' src='echec/fb32.gif' /><img alt=' '  id='le59' src='echec/db32.gif' /><img alt=' '  id='le60' src='echec/rb32.gif' />
<img alt=' '  id='le61' src='echec/fb32.gif' /><img alt=' '  id='le62' src='echec/cb32.gif' /><img alt=' '  id='le63' src='echec/tb32.gif' /><br />
<img alt=' '  id='le64' src='echec/vd32.gif' /><img alt=' '  id='le65' src='echec/vd32.gif' /><img alt=' '  id='le66' src='echec/vd32.gif' />
<img alt=' '  id='le67' src='echec/vd32.gif' /><img alt=' '  id='le68' src='echec/vd32.gif' /><img alt=' '  id='le69' src='echec/vd32.gif' />
<img alt=' '  id='le70' src='echec/vd32.gif' /><img alt=' '  id='le71' src='echec/vd32.gif' /><img alt=' '  id='le72' src='echec/vd32.gif' /><br />
</td></tr></table></div>

Notons juste les quatre boutons de navigation qui appellent :

- FAIT(0), pour revenir au départ de la partie ;

- FAIT(1), pour revenir au coup précédent ;

- FAIT(2), pour jouer le coup suivant ;

- FAIT(3), pour aller directement au dernier coup.

La deuxième partie décrit :

- les JavaScript à charger, notez à ce sujet que le JavaScript de la partie doit être appelé avant le JavaScript « moteur de visualisation » ;

- les coups joués dans cette partie ainsi que les commentaires et variantes. Inutile de mettre les 200 coups de cette partie… Vous les retrouverez dans les fichiers sources.

echec134.htm

<script type='text/javascript' src='echec/echec134.js'></script>
<script type='text/javascript' src='echec.js'></script>

<div style='Z-INDEX: 80; POSITION: absolute; TOP: 170px; LEFT: 340px'
id=FenetreTxt class=echec1 name='FenetreTxt'>
<div class=lui>
<div class='centre2'>
<br />
&nbsp;&nbsp;
<u>PARTIE ANALYSÉE N</u><SUP>o</SUP> <u>134</u>
&nbsp;&nbsp; <br />
<span class=LaFonte_2_ff8800>Mis à jour : Février 2009 &nbsp;</span>
<span class=LaFonte_2_993333>Aronian, Levon (2750) -<br />
Ivanchuk, Vassily (2779) [E92] <br />
XXVI SuperGM Linares <br />ESP (7), 26.02.2009 </span><br /><br />
</div>
<br /><br /><br /><br />
Est-Indienne, Système Gligoric-Taimanov (7.Be3) [E92]
<br /><br />
<a id=X0 class=e0  href='javascript:g0(0);' name=X0>1.d4</a>
<a id=X1 class=e0  href='javascript:g0(1);' name=X1>Nf6</a>
<a id=X2 class=e0  href='javascript:g0(2);' name=X2>2.c4</a>
<a id=X3 class=e0  href='javascript:g0(3);' name=X3>g6</a>
<a id=X4 class=e0  href='javascript:g0(4);' name=X4>3.Nc3</a>
<a id=X5 class=e0  href='javascript:g0(5);' name=X5>Bg7</a>
<a id=X6 class=e0  href='javascript:g0(6);' name=X6>4.e4</a>
<a id=X7 class=e0  href='javascript:g0(7);' name=X7>d6</a>
<a id=X8 class=e0  href='javascript:g0(8);' name=X8>5.Nf3</a>
<a id=X9 class=e0  href='javascript:g0(9);' name=X9>0-0</a>
<a id=X10 class=e0 href='javascript:g0(10);' name=X10>6.Be2</a>
<a id=X11 class=e0 href='javascript:g0(11);' name=X11>e5</a>
<a id=X12 class=e0 href='javascript:g0(12);' name=X12>7.Be3</a>
<br /><br />
7.0-0 et 7.d5 sont les réponses les plus habituelles. Le coup choisi par Aronian
constitue précisément le système Gligoric-Taimanov.
<br /><br />
<a id=X13 class=e0 href='javascript:g0(13);' name=X13>7...c6</a>
<br /><br />
Cette réponse flexible, renforçant le contrôle du centre,
semble avoir été introduite par Donner contre Olafson en 1992.
<br /><br />
[ La ligne principale continue, comme vous savez, par :
<a id=X14 class=e1 href='javascript:g0(14);' name=X14>7...Ng4</a>
<a id=X15 class=e1 href='javascript:g0(15);' name=X15>8.Bg5</a>
<!-- =============Puis la fin du HTML==================== &#8594;
<br /><br />Il n'y a rien à sauver : les Noirs gagnent ! <br /><br />0-1
</div>
</div>
</BODY></HTML>

Vous aurez davantage de travail dans votre JavaScript, cependant travaillez avec rigueur :
chaque coup est un lien type ANCHORE qui va déclencher une action.

En plein milieu de la partie, vous pouvez insérer une variante, lorsque vous jouerez la partie, celle-ci sera sautée, la couleur des coups de cette variante (il peut y en avoir plusieurs) est différente, (voyez ici, les coups de base ont un style class=e0 alors que la première variante a une autre couleur : class=e1 par exemple !

Regardez bien, tous les coups sont dans l'ordre. Leur id=Xxx et l'action g0(xx), y compris les variantes. Ainsi vous pouvez avoir les coups 1 à 12, une partie classique, puis les coups 13 à 16, une variante, et reprendre les coups 17 à etc., la suite de la partie classique (donc son coup 13 en réalité).

Analysons son JavaScript. Pourquoi ce JavaScript si tordu qu'est notre Moteur (echec.js) va-t-il devoir être remanié pour en faire un outil simple et efficace ?

Tout simplement parce qu'à l'origine ce moteur répondait à une demande : utiliser de façon fiable le JavaScript généré par le superbe programme Allemand ChessBase 8,0. Si vous comprenez comment réaliser pour l'une de vos parties un *.js répondant aux règles de CheesBase, alors c'est gagné !

Si vous êtes utilisateur de ChessBase alors sa fonction d'exportation d'une partie vous donnera directement ce JavaScript que vous n'aurez qu'à renommer.

Voici comment réaliser ce fichier vous-même, vous jouez et notez la partie principale dans les arrays m0[0] m1[0] m2[0] m3[0]. Au lieu de mentionner les pièces et le déplacement conventionnel, nous mentionnons chaque coup joué par deux chiffres. Le numéro de la case de départ et le numéro de la case d'arrivée en utilisant la numérotation des cases partant des noirs à gauche vers la droite comme ceci :

échiquier

0     1     2     3     4     5     6     7   //===les noirs

8     9    10    11    12    13    14    15

16    17    18    19    20    21    22    23

24    25    26    27    28    29    30    31

32    33    34    35    36    37    38    39

40    41    42    43    44    45    46    47

48    49    50    51    52    53    54    55

56    57    58    59    60    61    62    63 //===les blancs

Lorsque vous regardez le premier array m0[0], vous lisez Array(51,35,6,21,50,34,.
Regardez l'échiquier, le pion situé en 51 va en 35 soit 1.d4.
Le numéro du coup est mis dans m1[0] new Array(0,1,2,3.
Pas besoin d'être savant pour comprendre que les arrays m1 seront deux fois plus petits que m0.

Si vous téléchargez les sources, vous pourrez disposer ces deux arrays ainsi pour mieux les suivre :

echec134.js

langage="text" titre="ARRAY">m0[0]  = new Array(51,35,6,21,50,34,14,22,57,42,
m1[0]  = new Array(  0,   1,    2,    3,    4,
m2[0]  = 0;
m3[0]  = 0;

Le cinquième coup (4) est bien le cavalier de 57 à 42 3.Nc3.
Il en va de même pour les variantes qui utiliseront m1[0],m1[2],m1[3], m1[4], etc. Ah mais ceux qui dominent les échecs vont dire comment je roque (mouvement croisé du ROI et de l'une de ses TOURS) ?
Il y a donc deux mouvements de pièces en un seul coup. Alors tout simplement nous écrirons deux fois le même numéro de coup et utiliserons un code, c'est le cas du 10em coup (9 en base 0). Regardez, il est présent deux fois et contient 4,6,71,5. Le roi va bien de la case 4 à 6 et 79 est le code du petit roque des noirs. Finalement, 5 est la case que prend la tour.

Vous avez de même les codes 127 pour le petit roque des blancs.
De même 64 et 120 représentent les grands roques noirs et blancs.

Regardons à la loupe un dernier détail dans notre m1[0]. Nous voyons après le coup 13 que nous passons au coup 72 !
Oui bien sûr, petit rappel, la série [0] est la partie principale qui peut être interrompue par des variantes. En effet, le coup 14 (le quinzième) se trouve en m1[1][0], 1er coup de la première variante. Dans chaque série (principale ou variante), les valeurs m2 et m3 contiennent le point de départ de cette variante. Le plus souvent, m2 est vaut « 0 » puisque le départ de la variante est souvent la partie principale. M3 contient le rang du coup dans m1.

Voilà l'essentiel ! Bon courage.

echec134.js

echec134.js

/*=====generation=============*/
//Table Generated with ChessBase 8.0 un vrais fouilli...
var f;
var m1 = new Array(1);
var m2 = new Array(1);
var m3 = new Array(1);
var m0 = new Array(1)
m0[0]  = new Array(51,35,6,21,50,34,14,22,57,42,5,14,52,36,11,19,62,45,4,6,71,5,61,52,12,28,58,44,10,18,35,27,21,38,44,30,13,21,30,39,18,26,60,62,127,61,15,31,45,60,38,23,53,45,23,13,56,57,14,23,39,53,1,16,48,40,9,17,49,33,21,29,36,29,22,29,45,37,23,37,52,31,2,11,57,41,3,30,33,25,16,10,31,13,5,13,42,52,13,14,52,37,30,37,53,26,37,23,26,44,29,37,44,58,11,38,59,51,0,5,60,43,10,4,43,37,5,37,61,37,23,37,51,37,28,37,58,37,14,13,54,46,13,12,55,47,38,47,62,53,4,21,46,38,47,38,41,44,21,36,53,60,6,13,40,32,36,26,60,51,12,44,51,44,13,12,44,35);
m1[0]  = new Array(0,1,2,3,4,5,6,7,8,9,9,10,11,12,13,72,73,74,75,76,77,78,78,79,80,81,82,83,94,95,96,97,98,99,100,101,102,110,111,112,113,114,115,116,117,150,151,152,153,154,155,156,157,158,173,174,175,176,177,178,179,180,181,192,193,194,195,196,197,198,199,200,201,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,0);
m2[0]  =0;
m3[0]  =0;
m0[1]  = new Array(21,38,44,30,13,21,30,39,1,18,35,27,18,12,45,51,38,23,53,45,10,26,27,18,74,74,9,18,49,33,2,20,51,41,19,27,39,53,27,35,42,32,22,30,32,26,20,2,60,62,127,61,12,22,54,46,2,47,61,60,3,2,59,51,23,13,52,61,13,19,41,24,47,61,60,61,15,31,51,52,21,29,36,29,2,29,26,36,19,36,45,36,29,47,53,60,5,61,52,61,47,38,61,54,31,39,46,39,38,20,60,51,30,38,62,63,22,39);
m1[1]  = new Array(14,15,16,17,18,19,20,21,22,23,24,25,25,26,27,28,29,30,31,32,33,34,35,36,37,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,61,62,63,64,65,66,67,68,69,70,71,0);
m2[1]  =0;
m3[1]  =14;
m0[2]  = new Array(24,18);
m1[2]  = new Array(60,0);
m2[2]  =1;
m3[2]  =47;
m0[3]  = new Array(22,30,39,53,21,29,36,29,23,29,60,50,29,35,50,35,28,35,42,36);
m1[3]  = new Array(84,85,86,87,88,89,90,91,92,93,0);
m2[3]  =0;
m3[3]  =27;
m0[4]  = new Array(60,43,16,10,59,60,2,11,36,29,11,29,42,36);
m1[4]  = new Array(103,104,105,106,107,108,109,0);
m2[4]  =0;
m3[4]  =36;
m0[5]  = new Array(60,43,37,44,33,26,16,26,43,26,44,26,53,26,17,26,42,36,29,36,41,46);
m1[5]  = new Array(118,119,120,134,143,144,145,146,147,148,149,0);
m2[5]  =0;
m3[5]  =44;
m0[6]  = new Array(42,25,11,25,34,25,26,34,43,28,44,53,61,53,34,41,28,13,30,44,13,19,16,10,19,34);
m1[6]  = new Array(121,122,123,124,125,126,127,128,129,130,131,132,133,0);
m2[6]  =5;
m3[6]  =2;
m0[7]  = new Array(44,53,43,53,16,26,42,36,26,36,53,36,29,36,41,46);
m1[7]  = new Array(135,136,137,138,139,140,141,142,0);
m2[7]  =5;
m3[7]  =3;
m0[8]  = new Array(37,34,26,19,11,25,41,25,34,25,19,28,10,27,61,29,0,5,29,5,6,5,28,14,5,14,59,35);
m1[8]  = new Array(159,160,161,162,163,164,165,166,167,168,169,170,171,172,0);
m2[8]  =0;
m3[8]  =53;
m0[9]  = new Array(43,53,38,29,41,46,5,13,61,60,4,21,46,14,13,14,51,52,28,36);
m1[9]  = new Array(182,183,184,185,186,187,188,189,190,191,0);
m2[9]  =0;
m3[9]  =62;
m0[10] = new Array(41,44,12,44,37,44,38,52,62,53,52,34,44,37,34,27,53,44,6,13);
m1[10] = new Array(202,203,204,205,206,207,208,209,210,211,0);
m2[10] =0;
m3[10] =72;
m0[11] = new Array(41,57,38,52,57,58,12,36,58,60,52,43,60,36,43,36,62,53,36,43);
m1[11] = new Array(212,213,214,215,216,217,218,219,220,221,0);
m2[11] =0;
m3[11] =72;
var m4 = new Array(1);
var m5 = 12;
m4[2]  =  1;
m4[1]  = 59;
m4[3]  = 10;
m4[4]  =  7;
m4[6]  = 13;
m4[7]  =  8;
m4[5]  = 11;
m4[8]  = 14;
m4[9]  = 10;
m4[10] = 10;
m4[11] = 10;
m4[0]  = 89;
var jipi= new Array(1)
jipi[0] = new Array(88,11, 1, 5, 3, 9, 5, 1,11, 7, 7, 7, 7, 7, 7, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8,12, 2, 6, 4,10, 6, 2,12 );

Vous retrouverez la feuille de style echec.css dans le zip à télécharger contenant les sources.

Pour terminer, analysons rapidement echec.js, notre moteur. En premier (onload) la fonction Allez(); va lire les éléments de CheesBase ou de votre JavaScript fait par vous aux normes CheesBase.

Alors tout simplement il va créer un tableau qui ne changera plus, organisé par des Arrays en lignes représentant pour chaque ligne la position dans les 64 cases des pièces en jeu notées selon la convention : 1 = cavalier noir, 2 = cavalier blanc, 3 = dame noir, 4 = dame blanche, 5 = fou noir, 6 = fou blanc, 7 = pion noir, 8 = pion blanc, 9 = roi noir, 10 roi blanc.

Vous comprenez qu'une partie de 200 coups avec ses variantes ne fera qu'un tableau de 200*64 soit 12.800 octets, ce qui est dérisoire et qui facilite alors totalement le jeu. En effet, si un visiteur clic 7.Be3 (le coup numéro 12), cela lancera g0(12); qui tout simplement affichera les 64 cases décrites dans tableau[12][zz] (zz de 0 à 63).
Chaque case a une image (une pièce ou, si =0, un gif transparent) !

Reste à notre fonction g0(x) à défaire la couleur rouge du coup précédent pour la mettre sur l'anchore dont id=X12.
Vraiment tout simple.

Par ailleurs si les touches de navigation sont employées, la fonction FAIT(); va simplement jouer le coup actuel +1 ou -1 selon la touche !

À vous de plonger un peu dans le code pour suivre cela, mais je vous ai donné tous les éléments. ;-) Amusez-vous bien.

echec.js

/*===========moteur commun=============*/
/* === version du Javascript d analyse == */
/* Copyright 2004  fox-infographie Christele_R */
/* libre de droit mais laissez ce commentaire */

var LaPiece = new Array(14);
var tableau = new Array(1000);
var xx,zz,Index_Txt_Rouge,lui,lafin,sp,LaPieceNum,i,xtxt;
var lecoup;
var nbrvar,nbrcoup,sondepart,zz1;
var memorise;
var fzz;
var ferz;
var flag;
var unseul;
var LeLef;
var rhhr;
var workcal;
var Tf;
var fza;
var workbuf;
var workfin;
var arhh;
Index_Txt_Rouge=999;
memorise=0;
lecoup=0;
lafin=0;
unseul=0;
for ( var i=0; i< 13; i++) LaPiece[i]= new Image();
LaPiece[0].src = "echec/vd32.gif";
LaPiece[1].src = "echec/cn32.gif";
LaPiece[2].src = "echec/cb32.gif";
LaPiece[3].src = "echec/dn32.gif";
LaPiece[4].src = "echec/db32.gif";
LaPiece[5].src = "echec/fn32.gif";
LaPiece[6].src = "echec/fb32.gif";
LaPiece[7].src = "echec/pn32.gif";
LaPiece[8].src = "echec/pb32.gif";
LaPiece[9].src = "echec/rn32.gif";
LaPiece[10].src = "echec/rb32.gif";
LaPiece[11].src = "echec/tn32.gif";
LaPiece[12].src = "echec/tb32.gif";
for (zz=0;zz<1000;zz++)   tableau[zz] = new Array(70);
function Allez()
{
nbrvar= m5;
for (zz=0;zz<70;zz++) tableau[999][zz]=0;
tableau[999][0]=11;
tableau[999][1]=1;
tableau[999][2]=5;
tableau[999][3]=3;
tableau[999][4]=9;
tableau[999][5]=5;
tableau[999][6]=1;
tableau[999][7]=11;
for (zz=8;zz<16;zz++) tableau[999][zz]=7;
for (zz=48;zz<56;zz++) tableau[999][zz]=8;
tableau[999][56]=12;
tableau[999][57]=2;
tableau[999][58]=6;
tableau[999][59]=4;
tableau[999][60]=10;
tableau[999][61]=6;
tableau[999][62]=2;
tableau[999][63]=12;
tableau[999][69]=999;
tableau[999][68]=0;
if (jipi[0][0]==88)
{
for (zz=0;zz<69;zz++)
{
zz1=zz+1;
tableau[999][zz]=jipi[0][zz1];
}
}
flag=0;
for (lavar=0;lavar<nbrvar;lavar++)
{
nbrcoup=m4[lavar];
for (coup=0;coup<nbrcoup;coup++)
{
rhhr=0;
if (coup!=0)
{
sp=nbrcoup-1;
lui=m1[lavar][coup];
if(lavar==0 && coup==sp) lafin=lui;
for (zz=0;zz<70;zz++) tableau[lui][zz]=tableau[memorise][zz];
tableau[lui][69]=memorise;
tableau[memorise][68]=lui;
tableau[lui][68]=999;
tableau[lui][67]=lavar;
memorise=lui;
}
if (coup==0)
{
if (lavar!=0)
{
xjipi0=m2[lavar];
xjipi1=m3[lavar];
xjipi=m1[xjipi0][xjipi1];
sondepart=tableau[xjipi][69];
}
if (lavar==0) sondepart=999;
lui=m1[lavar][0];
for (zz=0;zz<70;zz++) tableau[lui][zz]=tableau[sondepart][zz];
tableau[lui][69]=sondepart;
tableau[lui][68]=999;
tableau[lui][67]=lavar;
memorise=lui;
}
LaPieceNum=coup*2;
luix=m0[lavar][LaPieceNum];
LaPieceNum++;
luiy=m0[lavar][LaPieceNum];
Tf=luix;
fza=luiy;
fzz=tableau[lui][luiy];

if(tableau[lui][luix]==8)
{
if (tableau[lui][luiy]==0)
{
if(luiy>15 && luiy<24)
{
workcal=luix-8;
if(luiy != workcal )
{
workcal=luiy+8;
tableau[lui][workcal]=0;
}
}
}
}
if(tableau[lui][luix]==7)
{
if (tableau[lui][luiy]==0)
{
if(luiy>39 && luiy<48)
{
workcal=luix+8;
if(luiy != workcal )
{
workcal=luiy-8;
tableau[lui][workcal]=0;
}
}
}
}
tableau[lui][luiy]=tableau[lui][luix];
tableau[lui][luix]=0;
LaPieceNum++;
luirock=m0[lavar][LaPieceNum];
if (luirock==64)
{
tableau[lui][3]=tableau[lui][0];
tableau[lui][0]=0;
coup++;
}
if(luirock==71)
{
tableau[lui][5]=tableau[lui][7];
tableau[lui][7]=0;
coup++;
}
if (luirock==120)
{
tableau[lui][59]=tableau[lui][56];
tableau[lui][56]=0;
coup++;
}
if (luirock==127)
{
tableau[lui][61]=tableau[lui][63];
tableau[lui][63]=0;
coup++;
}
if(Tf>100)
{
ferz=0;
if(fza>50) ferz=-8;
if(fza<50) ferz=8;
if(fzz==0)
{
workbuf=fza+ferz;
Tf=Tf-workbuf;
if(ferz==-8 && Tf>100) workfin=3;
if(ferz==8 && Tf>100) workfin=4;
if(ferz==-8 && Tf>254) workfin=1;
if(ferz==8 && Tf>254) workfin=2;
if(ferz==-8 && Tf>380) workfin=5;
if(ferz==8 && Tf>380) workfin=6;
if(ferz==-8 && Tf>510) workfin=11;
if(ferz==8 && Tf>510) workfin=12;
tableau[lui][workbuf]=0;
tableau[lui][fza]=workfin;
}
if(fzz!=0)
{
arhh=0;
workbuf=fza+ferz;
if(arhh==0 && workbuf==8) {workbuf=9;arhh=99;}
if(arhh==0 && workbuf==15) {workbuf=14;arhh=99;}
if(arhh==0 && workbuf==48) {workbuf=49;arhh=99;}
if(arhh==0 && workbuf==55) {workbuf=54;arhh=99;}
if(arhh!=99)
{
workbuf=workbuf+1;
if(tableau[lui][workbuf]==8 && ferz==8 ){ arhh=99;}
if(tableau[lui][workbuf]==7 && ferz==-8 ){ arhh=99;}
}
if(arhh!=99)
{
workbuf=workbuf-2;
if(tableau[lui][workbuf]==8 && ferz==8 ){ arhh=99;}
if(tableau[lui][workbuf]==7 && ferz==-8 ){ arhh=99;}
}

Tf=Tf-workbuf;
if(ferz==-8 && Tf>100) workfin=3;
if(ferz==8 && Tf>100) workfin=4;
if(ferz==-8 && Tf>254) workfin=1;
if(ferz==8 && Tf>254) workfin=2;
if(ferz==-8 && Tf>380) workfin=5;
if(ferz==8 && Tf>380) workfin=6;
if(ferz==-8 && Tf>510) workfin=11;
if(ferz==8 && Tf>510) workfin=12;
tableau[lui][workbuf]=0;
tableau[lui][fza]=workfin;

}
}

}
}
FAIT(0);
}
function FAIT(a)
{
if (a==0)
{
afficher(999);
if (Index_Txt_Rouge !=999) document.anchors[Index_Txt_Rouge].style.background="";
Index_Txt_Rouge=999;
}
if (a==1)
{
sp=999;
if (Index_Txt_Rouge!=999 && Index_Txt_Rouge!=0) sp=tableau[Index_Txt_Rouge][69];
if(sp!=999)
{
afficher(sp);
document.anchors[Index_Txt_Rouge].style.background="";
Index_Txt_Rouge=sp;
document.anchors[Index_Txt_Rouge].style.background="#FF0000";
}
}
if (a==2)
{
if (Index_Txt_Rouge!=999) sp=tableau[Index_Txt_Rouge][68];
if (Index_Txt_Rouge==999) sp=0;
if(sp!=999)
{
afficher(sp);
if (sp!=0) document.anchors[Index_Txt_Rouge].style.background="";
Index_Txt_Rouge=sp;
document.anchors[Index_Txt_Rouge].style.background="#FF0000";
}
}
if (a==3)
{
afficher(lafin);
if (Index_Txt_Rouge!=999) document.anchors[Index_Txt_Rouge].style.background="";
Index_Txt_Rouge=lafin;
document.anchors[Index_Txt_Rouge].style.background="#FF0000";
}
}
function g0(Num_Coup)
{

if (Index_Txt_Rouge!=999) document.anchors[Index_Txt_Rouge].style.background="";
Index_Txt_Rouge=Num_Coup;
afficher(Num_Coup);
document.anchors[Index_Txt_Rouge].style.background="#FF0000";
}
function afficher(Numero_Coup)
{
var Id_Case_Echiquier;

for (zz=0;zz<64;zz++)
{
Id_Case_Echiquier="le"+zz;
LaPieceNum=tableau[Numero_Coup][zz];
document.getElementById(Id_Case_Echiquier).src=LaPiece[LaPieceNum].src;
}
}

IV - Remerciements

Je remercie Zoom61 , Vermine et auteur pour leurs relectures attentives. Je remercie également ceux qui m'ont aidé pour cet article.