TP6-7

Organisation

Le TP est à réaliser par groupe de 2 personnes (appartenant au même sous-groupe de TP). Il est à rendre au plus tard pour le vendredi 9 octobre 23h59, sous la forme d'une archive de nom "nom1_nom2.zip" qui sera envoyé par mail avec pour objet "[ISia2A4][Internet] Rendu TP". Tout projet rendu en retard sera considéré comme non rendu.

Contexte

Nous allons réaliser une page web permettant à deux utilisateurs de jouer une partie du jeu puissance 4. Le principe de ce jeu est le suivant : la grille de jeu est une grille de 6 rangées et 7 colonnes. Le but du jeu est d'aligner une suite de 4 pions de même couleur sur la grille. Chaque joueur dispose de 21 pions d'une couleur (par convention, en général jaune ou rouge). Tour à tour, les deux joueurs placent un pion dans la colonne de leur choix, le pion coulisse alors jusqu'à la position la plus basse possible dans la dite colonne à la suite de quoi c'est à l'adversaire de jouer. Le vainqueur est le joueur qui réalise le premier un alignement (horizontal, vertical ou diagonal) consécutif d'au moins quatre pions de sa couleur. Si, alors que toutes les cases de la grille de jeu sont remplies, aucun des deux joueurs n'a réalisé un tel alignement, la partie est déclarée nulle.

Travail demandé

Créez un site web qui :

• - Affiche une grille de jeu Puissance 4
• - Demande à chacun des joueurs de saisir un pseudo avant de commencer la partie et affiche à chaque tour "C'est à .... de jouer" en utilisant les pseudos entrés.
• - Propose une page affichant un rappel des règles
• - Permets aux deux joueurs de jouer une partie de puissance 4 (en gérant le tour par tour, l'affichage, le placement des pions peu importe où le joueur clique, etc...)
• - Détecte automatiquement la victoire d'un joueur et affiche un message en conséquence

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.