On va réaliser avec le framework Phaser 
un mini jeu dont voici le cahier des charges.
Le jeu aura :
Pour créer un jeu avec phaser, il suffit d'avoir :
Télécharge le dossier compressé contenant les différentes ressources nécessaires : TÉLÉCHARGER
Le dossier assets contient 3 images (le décor du jeu, la page d'accueil et l'obstacle) et 1 feuille de sprites (spritesheet).
<div id="gameDiv"></div> :La page html doit contenir les liens vers les 2 fichiers .js et une div pour contenir le jeu.
phaser.min.js :Le fichier indispensable pour utiliser les méthodes de Phaser.
main.js :Le fichier main.js qui est le coeur du projet, contient le lien avec la div de la page html en première ligne et les 4 fonctions nécessaire à Phaser (en fait que 3 la fonction render est un debugger).
A ce stade, seule la taille de la fenêtre de jeu a été programmé dans le fichier main.js. Si on lance le fichier index.html dans le navigateur, on obiendrait un cadre noir.
Ouvre main.js dans ton éditeur de code Notepad++.
Nous allons définir les trois fonctions du fichier main.js : preload, create et update.
Nous allons appeler les ressources du dossier assets.
function preload() {
game.load.image('background', 'assets/fond1.jpg');
game.load.image('accueil', 'assets/background.jpg');
game.load.spritesheet('dragon', 'assets/DragonRouge.png', 96, 96);
game.load.image('cactus', 'assets/cactus.png');
}Recopie le code dans ton fichier main.js. Rien ne se passe...
Nous allons placer les ressources dans la fenêtre du jeu.
var decor;
var cactus;
var accueil;
var player;
function create() {
decor=game.add.image(0, 0, 'background');
cactus = game.add.sprite(750, 170, 'cactus');
accueil = game.add.sprite(0, 0, 'accueil');
player = game.add.sprite(200, 250, 'dragon');
player.anchor.setTo(0.5, 0.5);
player.scale.setTo(1, 1);
player.animations.add('down', [0, 1, 2, 3], 10, true);
player.animations.add('saut', [4, 5, 6, 7], 10, true);
player.animations.add('right', [8, 9, 10, 11], 10, true);
player.animations.add('up', [12,13,14,15], 10, true);
player.animations.add('pause', [0], 10, true);
}Recopie le code dans ton fichier main.js.
On a placé d'abord le décor à partir du point (0 ; 0) en haut à gauche, puis le cactus, puis la page d'accueil et enfin le sprite.
La page d'accueil recouvre donc le décor et le cactus.
Pour le sprite player, on a fixé le point de référence au centre de l'image (player.anchor.setTo(0.5, 0.5)) et conserver son échelle (player.scale.setTo(1, 1)). On a aussi défini les différentes animations à partir de la feuille de sprite.
On va instaurer 2 états de jeu : la page d'accueil (état=0) et le jeu (état=1). IL faut donc créer la variable etat.
var etat=0;
function update() {
if (etat==1){
accueil.kill();
}
if (etat==0){
accueil.revive();
if (game.input.keyboard.isDown(Phaser.Keyboard.ENTER))
{
etat= 1;
}
}
}Recopie le code dans ton fichier main.js.
On va animer tout ça, en rajoutant 4 lignes dans la fonction update.
function update() {
if (etat==1){
accueil.kill();
player.animations.play('right');
decor.x=(decor.x-2)%750;
cactus.x=(cactus.x-4);
if (cactus.x<0){cactus.x=750}
}
if (etat==0){
accueil.revive();
if (game.input.keyboard.isDown(Phaser.Keyboard.ENTER))
{
etat= 1;
}
}
}Modifie la fonction update dans ton fichier main.js.
On va définir la fonction sauter(), qui va faire sauter notre dragon.
Pour cela, on aura besoin de 3 nouvelles variables saut, monte et hauteursaut.
var saut=0;
var monte=0;
var hauteursaut=200;
function sauter(){
player.animations.play('saut');
if (player.y>250-hauteursaut && monte==1){player.y-=4}
else {monte=0}
if (player.y<250 && monte==0){player.y+=4 }
if (player.y==250) {saut=0}
}Rajoute ceci après la fonction render par exemple.
Cela ne suffira pas, il faut encore déclencher le saut et l'executer. Pour le début du saut, nous allons utiliser la touche S ou le clic de la souris. Attention au choix des touches, la barre d'espace et les flèches sont utilisées pour le défilement des pages web...
Il faut juste créer 2 nouveaux statuts saute ou ne saute pas. On va modifier etat==1 dans la fonction update.
if (etat==1){
accueil.kill();
if (saut==0){
player.animations.play('right');
}
else {sauter()}
decor.x=(decor.x-2)%750;
cactus.x=(cactus.x-4);
if (cactus.x<0){cactus.x=750}
if ((game.input.keyboard.isDown(Phaser.Keyboard.S) || game.input.activePointer.isDown) && saut ==0){
saut=1;
monte=1;
}
}Modifie la fonction update.
Dernière étape : la gestion des collisions entre le dragon et le cactus.
Phaser peut gérer les collisions, mais il fera des collisions avec les rectangles contenant les images :
Il n'y a pas de collision entre le dragon et le cactus dans ce cas de figure...
Pour info, voici les lignes qu'il faudrait rajouter.
Dans la fonction create :
game.physics.enable(cactus, Phaser.Physics.ARCADE);
game.physics.enable(player, Phaser.Physics.ARCADE);Dans la fonction update.
if (game.physics.arcade.overlap(player,cactus)){
etat=0;
}
On va gérer les collisions par une simple relation mathématique, comme l'explique le dessin :
On cherche une relation entre le point bleu et le segment orange. Et voici la relation que l'on rajoute dans la fonction update à la fin de etat==1
if (cactus.x<player.x && cactus.x+75>player.x && player.y+48> 4/15*cactus.x+350/3){
etat=0;
}Il faut juste encore modifier etat==0 pour avoir le dragon animé dans la page d'accueil et réinitialiser le jeu.
Voici la modification :
if (etat==0){
accueil.revive();
player.animations.play('down');
if (player.scale.x ==1 || player.scale.x>3){
player.y=150;
player.scale.x=0.05;
player.scale.y=0.05;
}
player.scale.x+=0.005;
player.scale.y+=0.005;
player.y+=0.1;
if (game.input.keyboard.isDown(Phaser.Keyboard.ENTER)){
etat= 1;
player.scale.x=1;
player.scale.y=1;
cactus.x=750;
saut=0;
player.y=250
}
}
create :
lescore = game.add.text(650, 38, score, { font: "30pt Courier", fill: "red", stroke: "orange", strokeThickness: 2 });update :
lescore.setText(score);