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 iciTELECHERGEZ.
Testez la partie echec134 exemple de cet articleTESTEZ.
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.
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.
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 :
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 blancsLorsque 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 :
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
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.
IV. Remerciements▲
Je remercie Zoom61Zoom61 , VermineVermine et auteurauteur pour leurs relectures attentives. Je remercie également ceux qui m'ont aidé pour cet article.