TP6-7

Organisation

Le TP est à réaliser par groupe de 2 personnes. Il est à rendre au plus tard pour le vendredi 28 mars 23h59, sous la forme d'une archive de nom "nom1_nom2.zip" qui sera envoyé par mail avec pour objet "[IS2A4][Internet] Rendu TP" à votre enseignant en TP. Tout projet rendu en retard sera considéré comme non rendu.

Contexte

Nous allons réaliser une page web permettant à un utilisateur de jouer au jeu Flood it. Le principe est le suivant : le jeu se compose d'une grille carrée de LxL cases (par exemple L=50 cases de largeur et de longueur). Au lancement du jeu, les cases de la grille sont chacune coloriée d'une couleur aléatoire, parmi une palette de N couleurs. La palette est fixée à l’avance et ne change jamais. Vous obtenez donc une grille colorée.

Le joueur peut choisir une des couleurs de la palette. Puis, en cliquant sur une case, il la transforme et lui donne la couleur qu’il a choisi, à elle ainsi qu’à toutes les cases adjacentes de la même couleur. S’il touche un carré de 4x4 cases vertes avec du rouge, il obtient un carré de 4x4 cases rouges.

Le but est de colorier toute la grille avec le moins de coups possibles.

Travail demandé

Créez un site web qui :

• - Demande à un joueur la taille de grille et le nombre de couleur avec lesquels il veut jouer.
• - Affiche la grille en affectant une couleur aléatoire à chaque case.
• - Permet à un joueur de séléctionner une couleur en cliquant sur une case puis d'affecter cette couleur à une autre case en cliquant dessus, puis de sélectionner une nouvelle couleur, etc. La couleur actuellement sélectionnée devra être affichée.
• - Affiche le nombre de coups joués.
• - Affiche un message de victoire lorsque la grille est remplie.
• - Propose un mode défi où le joueur doit remplir la grille en moins de 2L coups.

Vous devez creéez l'interface la plus conviviale et ergonomique possible. Vous apporterez un soin particulier à la structure de votre fichier HTML, au fichier CSS pour soigner la présentation de votre jeu et à l'utilisation des composants Bootstrap pour créer l'interface.