web_2024/R1.02/tp/tp5

TP Js 1

Récupérez les fichiers sources utilisés pour le tp ici.

Exercices

Le TP est une implantation en javasript du jeu de la vie. Il s'agit d'un automate cellulaire, dont les règles sont les suivantes :

• Une cellule morte possédant exactement trois voisines vivantes devient vivante.
• Une cellule vivante possédant deux ou trois voisines vivantes reste vivante, sinon elle meurt.

Une cellule est une unité de la grille (carrée). Un tour est appelé une génération.

Pour plus d'informations, voir la page Wikipédia

Le jeu est déjà codé, vous allez ajouter de nouvelles fonctionnalités au jeu dans ce TP.

Exercice 1 : Inclure du JS

Chargez le fichier script.js dans la page html index.html

Il faut utiliser la balise <script> avec l'attribut src
Attention ! Chargez le fichier une fois que le DOM (la page HTML) est chargée.

Vous devez avoir le résultat suivant :

Exercice 2 : Ajouter un bouton reset

Ajoutez un bouton reset dans le HTML. Dans la fonction main() ajoutez ce qui est nécessaire pour pourvoir remettre à zéro le jeu.

Pour remettre à zéro, il faut s'abonner à l'événement click sur le bouton reset, regardez comment le code est fait pour les autres boutons.
Il faut ensuite:

• stopper autoplayInterval, un timer est démarré avec la fonctionnalité auto play
• détruire la grille courante avec la fonction gridManager.destroyGrid();
• créer un nouvel object GridManager avec gridManager = new GridManager(gridSize, DIV_CONTAINER_ID)
• initialiser le jeu avec gridManager.setInitialState(INITIAL_STATE)
  
  

Vous avez des exemples dans le code.

Exercice 3 : Changer la taille de la grille

Vous allez ajouter un bouton qui permet d'afficher lors du clic une popin. Vous allez pouvoir renseigner la taille de la grille.

• Vous aurez besoin de la fonction prompt.
• La valeur que vous récupérer est un type string (équivalent à char[] en C), il faut donc parser le type string en integer avec la fonction parseInt()
• Vous allez réutiliser la fonction reset que vous avez écrite précédemment.

La grille est d'une taille minimum de 30.

Exercice 4 : Afficher la taille de la grille dans l'interface

Vous allez afficher la taille à côté de la chaine de caractères Taille de la grille:.

• Utilisez document.getElementById(GRID_SIZE_VAL_ID)
• Utilisez la propriété element.textContent = 'Hello World!

Exercice 5 : Afficher la génération courante

Vous allez afficher le numéro de la génération courante à côté de la chaine de caractères Génération numéro:.

• Ajoutez ce qu'il manque dans la fonction computeNextGeneration(gridManager, generation)
• Pensez à incrémenter la variable génération

Exercice 6 : Vitesse d'execution du jeu

Vous allez créer un bouton :

• x1
• x2
• x10
• x100

Lorsque le jeu est en mode auto play, il faut changer la vitesse à laquelle il faut appeler la fonction computeNextGeneration(gridManager, generation). Si le jeu n'est pas en mode auto play mettre à jour la valeur de interval

• Il faut pensez à stopper le setInterval et le démarrer avec la nouvelle vitesse de jeu
• La vitesse normale du jeu est défini par la variable GENERATION_INTERVAL
• x2 = GENERATION_INTERVAL/2, x10 = GENERATION_INTERVAL/10, etc.

Exercice 7 : (Bonus) Export de l'état de la grille

On veut pouvoir sauvegarder la partie pour la reprendre plus tard. Pour cela il faut enregistrer l'état du jeu.

Créez une fonction d'export qui permet de :

• récupérez la taille de la grille, connaitre les coordonnées des cellules actives, la génération courante et la vitesse d'éxecution du jeu si mode auto play
• sauvegardez l'état du jeu en localStorage lorsque l'on clique sur un bouton Sauvegarder

• Réutilisez la fonction logCurrentGridState qui permet d'afficher les coordonnées des cellules actives dans la console
• Un peu d'aide sur le localStorage

Exercice 8 : (Bonus) Reprendre une partie

A partir de l'exercice 7, écrire une fonction qui permet de reprendre une partie lorsque l'on clique sur un bouton Reprendre et si des données sont stockées en localStorage.