TP2 L3 Miage JavaScript introduction

Introduction

Vous allez continuer à coder le jeu du TP1 en intégrant le swap des cookies, la détection de suites (une correction a été donnée en cours et figure dans le repository github dans TPs/TP1/... correction pour le groupe 1), puis en ajoutant l'implémentation des chutes après suppression de cookies.

Travail à faire

1 - Récupérer une version à jour du repository github, examiner la correction proposée (qui n'est certainement pas la meilleure), et intégrer dans votre propre code les fonctionnalités de swap par click et par drag'n'drop, la détection de suites via un bouton situé dans la page index.html.

2 - Vous ajouterez un second bouton pour tester l'implémentation de l'algorithme de chute que vous allez essayer de coder. Ce bouton supplémentaire appellera la méthode grille.chuteColonne(0) qui va essayer de faire tomber les cookies après en avoir supprimé un certain nombre.

CEUX QUI ONT DEJA TERMINE, OU QUI AURONT TERMINE AVANT LA FIN, voir section "pour aller plus loin" à la fin de cette page...

Je vous propose, pour y arriver, de procéder pas à pas.

Voici les étapes que vous ferez pour tester :

• Cliquez sur le bouton qui détecte les suites. Modifier le code appelé pour que les cookies faisant partie de suites "disparaissent" et laissent des trous. Pour cela appelez la méthod cachee() de la classe Cookie au lieu d'appeler "selectionnee()" dans les méthodes de détection de suites. Une fois le bouton cliqué on doit voir des trous dans la grille. Faites en sorte qu'on ai des trous dans la première colonne (colonne 0). Au besoin swappez des cookies jusqu'à ce qu'il y ait une suite puis cliquez ce bouton. On doit avoir un résultat comme ceci :

Si on regarde précisément la première colonne, in peut commencer à réfléchir à un algorithme :

• On part de la case (0, this.lignes-1), et on remonte verticalement... dès qu'on trouve un "trou" (une cookie dont l'état est "cachee", il faudra peut-être positionner une nouvelle propriété dans la méthode cachee() de la classe Cookie), on sait qu'on va devoir faire autre chose. Si on remontre jusqu'à la case (0, 0) et qu'on n'a pas trouvé de cookie cachée, alors on a fini.
• Si on est tombé sur un trou (par exemple dans l'image de droite, à la case (0, 7) juste au-dessus du croissant. Alors on mémorise cet index de lignes (le 7) et on remonte tant qu'on a des trous... on s'arrête soit si on est à la ligne 0, soit si on tombe sur une cookie non cachée. Dans l'exemple de l'image de droite, on s'arrêtera sur le macaron vert situé en (0, 4).
• Donc, si on est en train de remonter les trous et qu'on tombe sur une cookie non cachée, on mémorise cet index. On a donc un index de début et un index de fin pour la suite (dans notre cas 7 et 4. On va faire "tomber" les cookies 0, 1, 2, 3, 4 (celles au-dessus de l'index 5 du trou le plus haut de la suite qu'on est en train de traiter). 
• Avant d'aller plus loin vous testerez le calcul de ces indexs en cliquant sur bouton et en faisant des consoles.log, testez plusieurs cas. A titre d'exercice essayer aussi d'utiliser le debugger pas à pas en mettant un point d'arrêt sur les lignes qui calculent les indexs, et vérifiez les valeurs dans le debugger.
• On a détecté des indexs délimitant une zone à supprimer. On va implémenter une chute. Pour cela je vous propose d'écrire une méthode "supprimeTrousColonne(colonne, indexDebut, indexFin) qui va déplacer dans notre cas nb élements vers le bas (nb = indexFin-IndexDebut), c'est-àdire tous les éléments à entre indexDebut et 0 en allant du bas vers le haut. On déplace un élement vers le bas, puis un autre etc.
• Avant d'aller plus loin vous testerez cette fonctionnalité en cliquant sur bouton.

Voilà, une fois une chute détectée, il faudra prendre en compte le fait qu'après avoir réalisé une chute, il faudra repartir de l'index de début et remonter encore en cherchant des trous. Si on re-détecte une zone à supprimer, on recommence. Si en remontant des trous on arrive à la ligne 0 (en haut de la grille), alors il faudra remplir avec des cookies cachées les cases qui deviennent vide en haut de la colonne. Et encore une fois détecter les suites depuis l'index de début.

Voilà, cela devrait vous occuper un moment.... :-)

Pour aller plus loin

Ahah, on est encore loin d'avoir un vrai jeu... Je vous propose de réfléchir aux fonctionnalités suivantes :

• S'assurer que lors du remplissage initial du tableau on n'a pas de suites. Différentes stratégies sont possibles : la plus naive consiste à remplir le tableau, detecter les suites, et s'il y en a au moins une recommencer. Avec 5/6 couleurs ça va, en une vingtaine d'essais maximum ça fonctionne. Mais avec 4 couleurs, ça devient plus long.... 
• Ajouter des musiques et des effets sonores (explosions, click, plops, etc.) et musique. Je vous conseille pour cela de regarder la librairie "howlerjs" ou de regarder comment un "asset loader" prenant en compte images, musiques et sons est intégré au TP3 (dans le repo), cet assez loader sera expliqué lors de la prochaine séance de cours.
• Essayer de faire des "animations" pour que l'on voit les cookies trembler pendant quelques millisecondes, avant qu'elles n'explosent (remplacer leurs images par une suite d'images), et que la chute se fasse, idem, on veut voir les étapes très rapidement. Pour cela l'utilisation des fonctions setTimeout et setInterval de JavaScript est recommandée. Pour une animation fluide de la chute, vous pourrez jouer sur position:absolute et propriétés top et left des images....
• Bien évidemment c'est plus facile de faire une animation fluide avec un canvas HTML5 qu'avec le DOM... sinon attendez le TP3...