Réalisation d'un jeu d'échecs

Objectif

Il s'agit de pouvoir déplacer les pièces d'un jeu d'échec en cliquant dessus. Le premier clic sert à désigner la pièce à déplacer et le deuxième, la case où on veut la poser.

Pour cela, on va créer une nouvelle classe nommée Case, qui représentera le contenu d'une case de l'échiquier.

Cet exercice est très proche de l'exemple présenté dans le cours. Vous pouvez donc vous en inspirer.

Représentation HTML

Le fichier HTML de cet exercice (à ne pas modifier) est Echecs.html.

Il utilise le fichier javascript Echecs.js.

Vous aurez à complèter certaines fonctions javascript de ce fichier de manière à faire fonctionner le jeu.

En ouvrant le fichier Echecs.html vous constaterez que:

En fait, les cellules du tableau sont générées automatiquement au chargement de la page par la fonction GenererEchiquierVideHTML qui appelée au début de la fonction Initialiser: 

function Initialiser ()
{ 
  GenererEchiquierVideHTML ();  
  GenererEchiquierVideJS (); 
  PoserLesPieces();  
  Prendre=true;
}

Après l'exécution de cette fonction, chaque ligne contiendra les balises HTML de huit cellules. Chaque balise est de la forme suivante: 

 <td bgcolor="couleur" width=60 id="i-j" 
     onClick="ClicSurCase(i,j)"> <td>

où:

Par exemple, la case de la deuxième ligne (i=1), quatrième colonne (j=3) est blanche. Elle sera donc représentée par la balise: 

<td bgcolor="white" width=60 id="1-3" 
     onClick="ClicSurCase(1,3)"> <td>

Représentation Javascript des données

La représentation Javascript des données est basée sur la classe Case dont vous aurez à écrire le constructeur.

Propriétés de la classe Case

Les propriétés de la classe Case sont les suivantes:

Méthodes de la classe Case

Les méthodes associées à la classeCase sont les suivantes:

L'échiquier

L'échiquier est un tableau à deux dimensions de huit lignes et huit colonnes. Il est généré par la fonction GenererEchiquierVideJS qui est appelée par la fonction Initialiser juste après la fonction GenererEchiquierVideHTML: 

function Initialiser ()
{ 
  GenererEchiquierVideHTML ();  
  GenererEchiquierVideJS (); 
  PoserLesPieces();  
  Prendre=true;
}

Voici le code de cette fonction : 

01 function GenererEchiquierVideJS ()
02 {
03  var i,j;
04  Echiquier = new Array (8);
05  for (i=0; i<=7; i++) Echiquier[i]=new Array(8);
06  
07  for (i=0;i<=7;i++)
08    for (j=0;j<=7;j++)
09      Echiquier[i][j]= new Case(i,j);      
10 }

Les ligne 4 et 5 servent à générer le tableau Echiquier.

Les lignes 7 à 9 servent à affecter une case vide à chaque élément du tableau Echiquier. Vous remarquerez que cette fonction fait appel au constructeur de la classe Case. Elle ne pourra donc fonctionner que si votre constructeur fait bien ce qu'il est censé faire.

La fonction ClicSurCase

La fonction ClicSurCase, déjà écrite, est appelée lorsque l'utilisateur clique sur une case de l'échiquier. Voici son code: 

01 function ClicSurCase (i,j)
02 {
03  var p, c;
04   
05  if (Prendre)
06  {
07      LigneDepart=i; ColonneDepart=j;
08  }
09  else
10  {
11    p=Echiquier[LigneDepart][ColonneDepart].piece;
12    c=Echiquier[LigneDepart][ColonneDepart].couleur;
13      
14    Echiquier[LigneDepart][ColonneDepart].EnleverPiece();
15
16    Echiquier[i][j].PoserPiece(p,c);  
17  }
18  
19  Prendre=!Prendre;  
20 }

Le comportement de cette fonction dépend de la valeur du booléen Prendre:

Question1: placement initial des pièces

L'objectif de cette question est de faire fonctionner le placement initial des pièces sur l'échiquier, c'est à dire la fonction PoserLesPieces appelée au chargement de la page: 

function Initialiser ()
{ 
  GenererEchiquierVideHTML ();  
  GenererEchiquierVideJS (); 
  PoserLesPieces();  
  Prendre=true;
}

Pour cela, il vous faudra tout d'abord écrire un peu de code à l'intérieur du constructeur de la classe Case.

Question 1-a: Initialisation des propriétés

Pour que les propriétés d'une nouvelle case soient définies, vous devez les initialiser à l'intérieur du constructeur:

Question 1-b: La méthode ImagePiece

Ecrivez la méthode ImagePiece(). Vous pouvez pour cela vous inspirer de la méthode ImagePiece de l'exemple.

Question 1-c: La fonction PoserLesPieces

A ce stade, vous pouvez considérer que le tableau Echiquier est déjà rempli de cases vides, puisque la fonction GenererEchiquierVideJS (qui devrait fonctionner à présent) est exécutée juste avant l'appel de PoserLesPieces. Vous pouvez donc:

Vous pouvez donc à présent écrire le code de la fonction PoserLesPieces de manière placer les pièces comme suit:


Question2: déplacement des pièces

Il s'agit ici d'écrire les méthodes EnleverPiece() et PoserPiece(p,c) de l'objet Case de manière à faire fonctionner le déplacement des pièces.