docJeu d`aventure simplifié
download 
Plainte Transcription
Jeu d`aventure simplifié
Jeu d’aventure simplifié
Étape 1 - Préparation du projet javascript
Avant de commencer, il faut bien choisir l’architecture du miniprojet. Une architecture pour un
programme est l’organisation des dossiers et des fichiers. L’idée est de ne pas avoir un dossier
qui contient tout ce dont le programme à besoin. Le fichier gabarit.zip comporte un début
d’architecture pour un projet HTMLjavacript.
1. Télécharger et extraire le contenu du fichier gabarit.zip. Ce gabarit est une architecture
qui peut être réutilisé pour n’importe quel projet javascript.
2. Ranger les images du fichier exerciceFinalImages.zip dans votre projet.
3. Créer les fichiers javascript et les déclarer dans le fichier HTML :
map.js, qui permettra contiendra tous les comportements pour la carte.
mapsDescription.js, qui contiendra la définition des cartes.
game.js, qui contiendra les comportements du jeu.
hero.js, qui contiendra les comportements du héros.
Note : Les images sont tirés d’un jeu zelda, et sont donc la propriété de Nintendo.
Étape 2 - Canvas
Il existe une balise HTML nommé canvas. Cette balise permet de déterminer une zone sur
laquelle on peut dessiner. Il est possible de superposer plusieurs canvas pour faire un système
de calque.
1. Déclarer une balise canvas dans votre HTML.
2. Dans le style CSS, mettre padding et margin à 0 sur la balise body pour bénéficier de
toute la place de la fenêtre. puis mettre position à absolute sur les balises canvas pour
pouvoir les superposer.
Étape 3 - Carte
Le canvas fait précédemment va nous servir à dessiner le décor. On va considérer le décor,
comme étant un assemblage de tuile/carrelage (en anglais tile).
1. Mettre un identifiant pour désigner le canvas du décors (carte, fond, sol, decors, ...etc)
2. Dans map.js, définir 3 constantes pour définir 3 types de sol (GRASS, FLOWER,
FENCE) pour l’herbe, les fleurs et les barrières
On peut les définir des objets comme suit :
var GRASS = {walkable:true} ; // walkable veut dire qu’on peut marcher
dessus
3. Dans maps.js, créer une constante WORLD qui est un tableau à deux dimensions pour
représenter la carte.
IAE Licence 1
1
Exemple :
var WORLD = [
[GRASS, GRASS, FLOWER],
[GRASS, FENCE, FLOWER],
[GRASS, GRASS, FLOWER]
] ;
4. Dans game.js, créer une fonction initGame(), qui charge le fichier tiles/image1.png du
décor. Afficher un popup d’alerte dès que l’image est chargée.
// Pour charger une image
var image = new Image() ;
// Appel d’une fonction quand l’image est chargée
// mais cela fonctionne uniquement si jQuery est utilisé pour la page
$(image).load(onImageLoaded) ;
// Donner le chemin de l’image
img.src = "img/monImage.png" ;
// Appelée dès qu'une image est chargée
function onImageLoaded(event) {
alert("Image chargée") ;
}
Note : Il est possible de dire que la fonction initGame doit être appelée une fois que la page HTML est
complètement chargée : <body onload="initGame();">
5. Dans map.js, créer une fonction drawMap(tab) qui dessine une carte dans le canvas à
partir du tableau. Elle sera appelée à la place du alert quand l’image est chargée. Dans le
fichier tiles/image1.png, chaque tuile du décor fait 16x16 pixels. L’idée est de récupérer
une portion de l’image et de les placer dans le canvas.
L’herbe est la tuile en (0, 0), la fleur en (1, 0) et la barrière en (15, 10). Il faudra donc ajouter ces
coordonnées pour chacune des constantes.
Exemple :
var GRASS = {walkable:true, tileX:0, tileY:0} ;
Pour dessiner une tuile on peut faire :
var TILE_WIDTH = 16 ;
// Largeur d’une tuile
var TILE_HEIGHT= 16 ;
// Hauteur d’une tuile
var positionImgX = GRASS.tileX * TILE_WIDTH ; // Position x dans l’image
var positionImgY = GRASS.tileY * TILE_HEIGHT; // Position y dans l’image
var TILE_WIDTH_CANVAS = TILE_WIDTH * 2;
// Largeur d’une tuile dans le
canvas
var TILE_HEIGHT_CANVAS = TILE_HEIGHT * 2; // Hauteur d’une tuile dans le
canvas
IAE Licence 1
2
var positionCanvasX = 0 ;
var positionCanvasY = 0 ;
var image = new Image() ;
image.src = "img/tiles/image1.png" ;
context.drawImage(image, positionImgX, positionImgY, TILE_WIDTH ,
TILE_HEIGHT, positionCanvasX, positionCanvasY, TILE_WIDTH_CANVAS,
TILE_HEIGHT_CANVAS ) ;
Pour tester, il est possible de faire drawMap(WORLD), une fois l’image chargée.
Conseil : Afficher d’abord les trois premiers éléments de la carte sans faire de boucle, pour comprendre ce
que doit faire la boucle.
Étape 4 - Affichage du jeu
Comme pour un jeu, il faut mettre à jour l’écran régulièrement.
1. Dans game.js, créer une variable currentMap qui contiendra la carte que l’on dessine
actuellement. Au départ, il y a
var currentMap = WORLD ;
2. Dans game.js, créer une fonction updateGame() qui appelle la fonction
drawMap(currentMap).
3. Une fois l’image chargée, remplacer drawMap(WORLD) par un setInterval de la fonction
updateGame toutes les 40 ms (40ms = 25 fois par secondes)
// Appel d’une fonction toutes les 20 millisecondes
setInterval(maFonction, 20) ;
// Exécution d’un bout de code toutes les 2 secondes
setInterval("alert('message');", 2000) ;
Étape 5 - Le héros
1. Il est possible d’avoir un deuxième canvas par dessus le premier qui permet de dessiner
ce qu’il y a sur la carte. Créer un deuxième canvas d’identifiant obj pour ce qu’il y a sur la
carte.
2. Modifier la fonction initGame() dans game.js pour charger également l’image
img/hero/link1.png. Attention, bien attendre que toutes les images soient chargées pour
appeler la fonction updateGame.
3. Dans le fichier hero.js, créer les variables xHero et yHero pour définir la position du
héros. Puis créer une fonction drawHero() qui dessine le héros à cette position, dans le
canvas pour les éléments par dessus la carte. Puis ajouter l’appel à la fonction
updateGame() dans game.js.
Note : Dans l’image le héros mesure 16x25 pixels.
4. Dans hero.js, il faut ajouter les déplacements du personnage lorsqu’on appui sur une
IAE Licence 1
3
flèche du clavier.
$(document).keydown(function(event) {
if(event.keyCode == 37) alert("gauche appuyée") ;
if(event.keyCode == 38) alert("haut appuyée") ;
if(event.keyCode == 39) alert("droite appuyée") ;
if(event.keyCode == 40) alert("bas appuyée") ;
});
$(document).keyup(function(event) {
if(event.keyCode == 37) alert("gauche relâchée") ;
if(event.keyCode == 38) alert("haut relâchée") ;
if(event.keyCode == 39) alert("droite relâchée") ;
if(event.keyCode == 40) alert("bas relâchée") ;
});
5. Il faut maintenant que le personnage se tourne selon la dernière touche appuyée. De la
même façon que les tuiles pour le sol il faut récupérer une portion de l’image link1.png.
L’image du personnage tourné vers le haut est en (0, 0), vers le bas en (1, 0), vers la
gauche en (2, 0) et vers la droite en (3, 0). Changer la fonction drawHero() pour dessiner
la bonne image en fonction de la touche appuyée.
6. Pour que le personnage soit animé, il faut changer l’image à chaque appel de la fonction
drawHero(). Nous avons donc besoin d’une variable numImageToTake pour dire qu’on
quelle image parmis celle disponible pour l’animation. Il y a 8 images différentes pour
chaque direction. On peut donc incrémenter (augmenter de 1) la variable à chaque appel
de la fonction drawHero() si on a appuyer sur une touche, sinon on reste sur l’image 0.
Changer la fonction drawHero() pour pouvoir animer le héros.
IAE Licence 1
4
