Retour à la page principale du projet
WaoC
1. Affichage
L'interface c'est simplement un <div> du plateau (css = '#squareboard')
qui contient d'autres <div> qui sont les cases (css = '.square'). qui
sont générés par deux boucles imbriquées dans un fichier php
(index.php).
Chacun des <div> possède un nom (attribut id), que je peux récupérer lors
d'un clic dessus (onClick="fonction_qui_traite_le_clic(this)").
Les id en question ne sont pas choisis au hasard, il contiennent les
coordonnées X et Y de chaque case (genre case_X_Y). La premiere tâche de
la fonction qui traite le clic est donc de découper le nom de telle
sorte qu'elle puisse récupérer les X et Y sous forme de 'int', pour
pouvoir ensuite faire des calculs dessus.
Pour faire apparaitre des trucs dans les cases (couleurs de fond ou
piece de jeu) c'est simple, Ã partir d'un X, Y, on reconstruit le nom
"case_X_Y", et on fait un document.getElementById(...). Ce qui renvoie
un pointeur vers le <div> correspondant.
A partir de là , il suffit de modifier les attributs du <div> monDiv par un:
- monDiv.setAttribute('style',"classeX classeY");
- ou bien monDiv.style["border-color"]=red;
- je sais plus lequel, l'un des deux pose un probleme de synchro.
ou d'ajouter d'autres objets dedans:
2. Déplacement des pièces
Au chargement de la page (onload), un objet de la classe Chessboard est
construit, avec les positions initiales de chaque piece.
J'ai créé pour chaque piece une classe du même nom (en anglais), elle
héritent toute de la classe Piece.
Le Chessboard fournit les méthodes nécessaires pour savoir si une case
est vide ou non.
Chaque classe héritant de Piece redéfinit le nom de la piece, et
quelques méthode permettant de gérer les déplacements définis sur un
objet Move agrémenté de quelques paramètres.
Le déplacement en temps que tel et géré par une classe Move donc, qui
est donc le "père" de deux classes MoveLinear et MoveJump.
MoveLinear gère les déplacement rectilignes
horizontaux/verticaux/diagonaux (et refuse le mouvement s'il y a un
obstacle sur la ligne en moins de X cases).
MoveJump indique si un saut de X,Y cases est possible.
Donc chaque piece utilise un Move* avec les bonnes restrictions
(longueur du déplacement, déplacement vers l'avant, diagonales, etc...)
pour fournir ses infos de déplacement sur l'échiquier.