Introduction
Dans ce TP vous allez coder le squelette d'un jeu de type Mach-3 (à la Candy Crush). Nous verrons deux implémentations:
- une utilisant le DOM, des <div> et des <img> pour afficher les différentes pièces du jeu et interagir avec elles. C'est celle que je recommande aux débutants en JavaScript. On pourra déplacer les pièces (les "swapper") à l'aide de clicks souris ou du drag'n'drop.
- une utilisant le <canvas> de HTML5 et de l'animation à 60 images secondes. C'est cette méthode que je recommande à ceux qui connaissent déjà JavaScript, elle est un peu plus challengeante :-) Mais permettra de faire des animations plus fluides, au pixel près, notamment lors des chutes de pièces, des animations d'explosions etc.
1 - TP pour ceux qui ne connaissent pas très bien JavaScript, à l'aide de l'API du DOM
1.1 Installation d'un squelette du jeu, analyse du code
Travail à faire :
- Récupérer cette archive, la dezipper
- Ouvrir Visual Studio code sur le projet,
- Ouvrir le fichier index.html et click droit "Ouvrir avec Live Server", cela doit lancer le projet dans un onglet de votre navigateur.
- Etudier le code, notamment le code CSS, pour comprendre comment on a codé en CSS le dessin de la grille, et les effets de surlignage et zoom sur les deux images codées en dur dans le fichier index.html
- Regarder le contenu des fichiers JavaScript, notamment de script.js, qui contient le programme principal (fonction init)
- Regardez où se trouvent les images (dossier assets/images)
1.2 Coder un classe pour décrire les Cookies (les objets affichés dans chaque case)
On a six types de cookies (croissant, cupcake, danish, donut, macaroon, sugarCookie), chaque cookie a une position dans la grille (ligne, colonne), et deux images associées (une version normale et une version "surlignée" ("highlighted" en anglais).
Vous modifierez la classe Cookie pour que le constructeur prennent en paramètre : type (entre 0 et 5), ligne, colonne. Dans la classe Cookie, on a mis deux tableaux statiques pour décrire les URLs des images (normales, surlignees).
Un tableau statique n'est pas accédé à travers une instance mais à travers le nom de la classe. Par exemple : Cookie.urlsImagesNormales[this.type]; renverra l'url de l'image "normale" correspondant au type this.type.
Pour this.type = 0 ça donnera l'image d'un croissant.
Travail à faire :
- Ecrire un constructeur qui prend en paramètre type, ligne, colonne,
- Dans ce constructeur, initialiser les propriétés :
- Vous mettrez les paramètres type, ligne, colonne dans des propriétés (rappel : propriété/attributs c'est pareil) du même nom
- Vous créerez une propriété
this.htmlImage
qui sera crée à l'aide de l'API du DOM comme un élément HTML de type "img". Cette image aura comme source l'url de l'image correspondant au type de la cookie. - Vous modifierez les attributs de l'image pour indiquer une taille de 80x80 pixels,
- Vous ajouterez deux attributs via la dataset API. On veut stocker la ligne et la colonne dans l'objet DOM
this.htmlImage
.
2 - TP pour ceux qui connaissent JavaScript, à l'aide du canvas HTML5