Département MMI M3206
DUT 2ème année Intégration web
Travaux pratiques n°8-9-10
Le morpion
Principe du jeu [Wikipedia]
Le Tic-tac-toe se joue sur une grille carrée de 3x3 cases. Deux joueurs
s'affrontent. Ils doivent remplir chacun à leur tour une case de la grille avec le
symbole qui leur est attribué : O ou X. Le gagnant est celui qui arrive à aligner
trois symboles identiques, horizontalement, verticalement ou en diagonale.
Dans cette version du jeu, l’utilisateur (le joueur) va jouer contre l’ordinateur.
Les prototypes en JavaScript
La notion de classe n’existe pas en JavaScript. Il faut donc avoir recours à une
fonctionnalité particulière du langage : le prototype.
En JavaScript, on ne fait pas de distinction entre la classe et l’objet. Il n’y a que des
objets. Tout objet peut définir ses propres propriétés, que ce soit à l'écriture ou pendant
l'exécution. De plus, il peut posséder aussi ses propres méthodes.
This
Le mot clé this fait référence à l'objet en cours. De ce fait, il est possible d'avoir accès
à tous les attributs et toutes les méthodes de l'objet dans le code d'une fonction.
Créer sa propre classe
Nous allons définir une classe/protoype maClasse définie dans un fichier [Link] :
// Définition des champs/attributs de la classe
function maClasse() {
this.attribut1 = val1;
this.attribut2 = val2;
// Définition de la 1ère méthode de la classe
[Link] = function() {
// code
}
// Définition de la 2nde méthode de la classe
[Link] = function() {
// code
}
}
DUT MMI 2ère année - Module M3206 – Intégration web 2019-2020
Mélanie COURTINE ([Link]@[Link]) Rodolphe TALLEC ([Link]@[Link])
Conseil : pour débugger votre code, pensez à utiliser la commande
[Link]. Elle vous permet d’affichant les valeurs de vos variables dans la
console de votre navigateur.
1. L’architecture de votre projet sera le suivant :
/
[Link] (MH)
css/
[Link] (MC)
js/
[Link] (CJ)
[Link] (MJ)
img/
Créer un répertoire et des fichiers correspondant à cette arborescence.
Remarque : les 2 lettres notées à côté du nom de chaque fichier vous
permettent d’identifier dans les questions suivantes le fichier que vous devez
modifier.
2. (MH)Définir la page web [Link]. Elle est définie en HTML5 et contient
toutes les informations de base utiles à une page web. Elle fait appel à son
fichier de style et à ses scripts JS (même si pour l’instant ces fichiers sont
vides).
3. (MH & MC)Ajouter un canevas dans la page [Link]. Ce canevas est
encadré d’un trait noir. Le style du canevas est défini dans son fichier CSS.
4. Au chargement de la page, une méthode init() définie dans le fichier
[Link] est appelée.
5. (MJ) Définir les variables globales suivantes :
− monCanvas : variable qui contiendra une référence sur le canevas
− gc : variable qui contiendra le contexte graphique associé au canevas
Initialiser ces deux variables globales dans la méthode init.
6. (CJ) Définir les constantes suivantes :
− CASEW : constante contenant la largeur d’une case (de valeur 100)
− CASEH : constante contenant la hauteur d’une case (de valeur 100)
7. (CJ) Définir le prototype Case, qui sera utilisé pour modéliser l’ensemble des
cases du jeu de morpion.
Le prototype Case contient les constantes suivantes :
− VIDE = -1 : une constante qui symbolise le fait que la case soit vide ;
− ORDI = 0 : une constante qui symbolise le fait que la case appartienne à
l’ordinateur ;
− JOUEUR = 1 : une constante qui symbolise le fait que la case appartienne
à la machine.
Le prototype Case contient les propriétés suivantes :
− posX et posY : deux propriétés qui vont contenir les coordonnées (x,y)
auxquelles la case va être affichée dans le canevas ;
− joueur : une propriété qui contient un entier. Cet entier modélise le
joueur à qui cette case appartient : VIDE si la case est vide, ORDI pour
l’ordinateur et JOUEUR pour l’utilisateur. Par défaut, la case est vide.
Le prototype Case prend en paramètre une variable v. Cet argument est la
valeur associée au joueur à qui appartient la case. Elle sera donc enregistrée
dans la propriété joueur.
DUT MMI 2ère année - Module M3206 – Intégration web 2019-2020
Mélanie COURTINE ([Link]@[Link]) Rodolphe TALLEC ([Link]@[Link])
Il contient aussi trois méthodes :
− getJoueur(). Cette méthode permet de retourner la valeur de la
propriété joueur.
− setJoueur(j). Cette méthode permet de modifier le joueur à qui
appartient cette case avec la valeur de j.
− afficheMoi(). Cette méthode affiche dans le canevas un rectangle bleu
partant de la position (posX, posY) et de taille (CASEW, CASEH).
8. (MJ) Ajouter une variable globale maCase, qui « instancie » le prototype
Case que vous venez de créer. Cette instanciation se fait dans la méthode
init. Vérifier que votre case s’affiche bien à l’écran.
Attention : n’oubliez pas de passer les bons paramètres lors de la création de la
case.
Une fois que cela fonctionne, supprimer l’instanciation de la variable globale
maCase de la méthode init, puisque cette variable globale va maintenant nous
servir à garder en mémoire la case dans laquelle le joueur aura cliquée.
9. (MJ) Ajouter une variable globale tableau, qui va contenir le plateau de jeu :
la grille de 3x3 cases. L’instanciation de ce tableau se fait dans la méthode
init.
Vous allez créer 3*3 cases. Chaque case est identifiée par ses coordonnées dans
le canevas et le fait qu’elle soit VIDE (donc n’appartient ni au joueur, ni à
l’ordinateur). A chaque fois que vous créez une case, n’oubliez pas de l’ajouter à
votre tableau.
Comment créer un tableau en JS ?
Pour créer un tableau vide en JS : tableau = [];
Ou : tableau = new Array ();
Pour ajouter une case à un tableau : [Link](quelquechose) ;
quelquechose peut être une valeur, une variable ou un tableau.
Comment parcourir un tableau en JS ?
Cas d’un tableau à 1 dimension :
Pour parcourir un tableau à 1 dimension, il faut faire une
boucle, qui va parcourir une à une toutes les cases du
tableau.
for (var i=0; i<[Link]; i++) {
// instructions
}
DUT MMI 2ère année - Module M3206 – Intégration web 2019-2020
Mélanie COURTINE ([Link]@[Link]) Rodolphe TALLEC ([Link]@[Link])
Cas d’un tableau à 2 dimensions :
Pour parcourir un tableau à 2 dimensions, il faut faire
une boucle en i, qui parcourt chaque ligne du tableau,
dans laquelle vous allez mettre une boucle en j, qui
parcourt chaque case de la ligne sélectionné (la ième,
soit tableau[i]).
for (var i=0; i<[Link]; i++) {
for (var j=0; j<tableau[i].length; j++) {
// instructions
}
}
Remarque : le nombre de cases par ligne dans un tableau à 2 dimensions peut différer
d’une ligne à l’autre, même si, en général, ce n’est pas le cas.
10. (MJ) Ajouter la méthode afficherPlateau, qui affiche la grille du jeu,
ainsi que le contenu de tout le plateau de jeu en demandant à chacune des
cases, qui compose le tableau, de s’afficher. Cette fonction est appelée dans
la fonction init après l’initialisation du tableau.
11. (CJ) Modifier le code de la méthode afficheMoi : au lieu d’afficher des
rectangles de couleur, afficher l’image qui représente l’état de la variable
joueur. Toutes les images appartiennent au répertoire img défini dans
l’arborescence de votre projet.
12. (MJ) Ajouter une variable globale jeJoue, qui va contenir l’entier
représentant le joueur qui est en train de jouer. Cette variable globale est
initialisée dans la fonction init. Le premier joueur, qui va jouer, est choisi
aléatoirement entre le joueur et l’ordinateur.
13. (MJ) Ajouter une fonction changerJoueur, qui permet de passer d’un
joueur à l’autre. Lorsque c’est l’ordinateur, qui est en train de jouer, alors on
« passe la main » au joueur et inversement.
14. (MJ) Afin d’ajouter de l’interactivité à votre jeu, nous allons gérer le clic
souris. Pour cela, ajouter un écouteur de souris sur le canevas dans la
méthode init. Lorsque le clic de souris est « entendu » par le canevas,
appeler une fonction choisirCase.
Définir la fonction choisirCase, qui récupère les coordonnées du clic souris
(Attention aux marges du canevas, les offset). Elle vérifie dans quelle case le
clic a eu lieu (chaque case connaît son point d’origine, ainsi que ses
dimensions).
Si le clic est bien dans une case, alors maCase prend la valeur du joueur, qui
est en train de jour et le plateau de jeu se réaffiche.
Remarque : n’oubliez pas qu’elle prend en paramètre un événement.
15. (MJ) Ajouter les fonctions suivantes :
- la fonction faireJouerOrdi : choisit aléatoirement un numéro de colonne
entre 0 et 2 et un numéro de ligne entre 0 et 2, elle vérifie si la case est
vide : si oui, elle affecte la case à l’ordinateur, sinon elle rechoisit
aléatoirement une nouvelle case ;
Conseil : la boucle while ne serait elle pas utile ??
- la fonction trouveAlignement : retourne 0 s’il existe un alignement de 3
cases appartenant à l’ordinateur, 1 si cet alignement appartient au joueur
et -1 sinon. Cette fonction est appelée dans la fonction choisirCase ;
DUT MMI 2ère année - Module M3206 – Intégration web 2019-2020
Mélanie COURTINE ([Link]@[Link]) Rodolphe TALLEC ([Link]@[Link])
-
la fonction gagner(u) : qui prend en paramètre l’entier désignant le
joueur qui a gagné et qui affiche un message textuel du type
« L’ordinateur a gagné » ou « Le joueur a gagné » ;
- la fonction matchNul : affiche un message expliquant au joueur qu’il y a
match nul ;
- Expliquez comment gérer la fin de jeu. Donnez le code associé en
indiquant où ce code sera placé.
- (MJ) Ajouter les fonctions suivantes :
16. Compléter le jeu afin de le finaliser et de le rendre « ergonomiquement »
beau et « utilisable » par un joueur.
17. Nous souhaitons maintenant faire un jeu de puissance 4.
Principe du jeu de puissance 4 [Wikipedia]
Le but du jeu est d'aligner 4 pions sur une grille comptant 6 rangées et 7 colonnes.
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 ladite 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) 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.
Expliquez en français dans un fichier Word comment réutiliser le code précédent
afin de réaliser ce nouveau jeu.
Attention : aucun code ne vous est demandé dans cette question.
Améliorations possibles :
− Emettre un son à chaque fois qu’un joueur joue ou lorsqu’un joueur a
gagné ;
− Faire un effet graphique lorsqu’un alignement est trouvé ;
− Faire un « joli » écran lorsque le joueur gagne ;
− Permettre au joueur de « relancer » une partie ;
− Faire une « intelligence artificielle » pour l’ordinateur ;
− …
Le jeu de memory est à faire individuellement sur machine et à rendre pour le mardi 16
octobre minuit.
Vous devez personnaliser le graphisme de votre page HTML et de votre jeu afin de le rendre le
plus convivial possible et de donner envie aux joueurs de jouer avec.
Le rendu se fera :
- sous format électronique dans un fichier ZIP sue l’ENT. Cette archive est le résultat de la
compression d’un répertoire nommé Nom_Prenom.r1 (personnalisé avec les
informations vous concernant) et il doit contenir l'ensemble de vos fichiers.
- ET sous format papier (document agrafé avec l’ensemble de votre code imprimé) à donner au
début du TP du mercredi 17 octobre 9h.
Conseil : Votre code doit être commenté et bien présenté, car cela comptera dans la notation.
Tout rendu en retard équivaut à un 0.
Dicton de l’étudiant : il est toujours préférable de rendre un travail inachevé dans les délais,
plutôt que de ne rien rendre du tout ….
DUT MMI 2ère année - Module M3206 – Intégration web 2019-2020
Mélanie COURTINE ([Link]@[Link]) Rodolphe TALLEC ([Link]@[Link])
