TD8 - Un jeu mortel en javascript

HTML/CSS
2004-2005
IMAC 1

---

Le dessin bitmap en HTML+javascript ne faisant plus peur à personne, nous allons aujourd'hui implémenter le jeu de la vie ! Ce n'est pas vraiment un jeu au sens classique du terme néanmoins il est plutôt amusant de jouer avec.

Les règles en sont simples:

• on dispose d'un plateau à NxN cases,
• chaque case peut contenir une pierre, dans ce cas on dit que la case est vivante, sinon elle est morte,
• chaque case du tableau a jusqu'à 8 voisines qui sont les cases autour d'elle,
• pour jouer, on dispose un certain nombre de pierres sur le plateau puis on applique itérativement les règles suivantes:
  • une case morte qui a 3 voisines vivantes nait (devient vivante),
  • une case vivante qui a exactement 2 voisines vivantes survit (reste vivante),
  • dans tous les autres cas une case qui était vivante meurt (devient morte).

---

Exercice 1. Le tableau noir.

En vous aidant des résultats obtenus au TD précédent, créez un tableau de 13x13 cases noires de 32x32 pixels. Cette fois vous utiliserez des boites positionnées de façon absolues plutôt qu'un tableau.

Exercice 2. Les pierres.

Ecrivez les scripts javascripts nécessaires pour changer la couleur d'une case en blanc (vivante) si elle est morte et en noir (morte) si elle est vivante en cliquant sur la case.

Exercice 3. Le jeu de la vie.

Pour l'algorithme expliqué au début du sujet vous allez avoir besoin de 2 tableaux de taille 13x13. Le premier contiendra l'état courant du plateau et le second servira à stocker l'état suivant.

Pour créer un tableau à deux dimensions on peut utiliser par exemple le code suivant:

a = new Array(13);
for(i=0; i<13; i++) {
	a[i] = new Array(13);
}

On peut alors l'utiliser par exemple de la façon suivante:

for(i=0; i<13; i++) {
	for(j=0; j<13; j++) {
		a[i][j] = i+j;
	}
}
a[4][4] = 13;
a[5][5] = a[3][1] + a[1][3];

Question 1. Ecrivez une fonction permettant de récupérer l'état du plateau et de le stocker dans un tableau qui sera retourné par la fonction.

Question 2. Ecrivez une fonction prenant en paramètre un tableau à 2 dimensions de taille 13x13 qui changera l'état du plateau en fonction des valeurs dans le tableau.

Question 3. Ecrivez une fonction récupérant le contenu du plateau, calculant l'itération suivante du jeu de la vie et stockant le résultat obtenu dans le plateau.

Question 4. Ajoutez un bouton itération à votre page. Liez ce bouton à la fonction de la question 3. Amusez vous bien avec votre jeu de la vie.