On va avoir les nouveaux fichiers menu.js et collisions.js, on va donc les charger dans index.html :

<!-- Load Crazy Bird -->
<script src="js/game.js"></script>
<script src="js/boot.js"></script>
<script src="js/particles.js"></script>
<script src="js/load.js"></script>
<script src="js/settings.js"></script>
<script src="js/utils.js"></script>
<script src="js/menu.js"></script>
<script src="js/collisions.js"></script>

D’autre part dans le fichier load.js on avait commenté les événements pour éviter de générer des erreurs, on va avoir besoin maintenant d’en dé-commenter quelques uns :

...
C.sprites.help.mousedown = C.menu.onHelp;
C.sprites.help.touchstart = C.menu.onHelp;
...
C.helpPannel.mousedown = C.menu.onHideHelp;
C.helpPannel.touchstart = C.menu.onHideHelp; 
...
C.sprites.play.mousedown = C.menu.onPlay;
C.sprites.play.touchstart = C.menu.onPlay;
...

Enfin dans le fichier game.js on va ajouter les propriétés nécessaires pour le jeu, on en est donc avec toutes ces propriétés :

// Properties
state: undefined,
stage: undefined,
renderer: undefined,
pannelHeight: 40,
sounds : {
    balloon: undefined,
    crash: undefined,
    crashPlane: undefined,
    life: undefined        
},
sprites: {
    loading : undefined,
    sky: undefined,
    land: undefined,
    title: undefined,
    play: undefined,
    help: undefined,
    bird: undefined,
    pannel: undefined,
    planes: [],
    balloons: [],
    gameOver: undefined,
    playAgain: undefined
},
helpPannel: undefined,
helpMessage: undefined,
highScoreText: undefined,
messageText: undefined,
nbrPlanes: 3,
nbrBalloons: 2,
elapsed: Date.now(),
level: 1,
balloonsDone: 0,
maxBalloons: 8,
lifes: 0,
score: 0,
speed: 5,

Le fichier menu.js

C’est ici qu’on a le code pour gérer le menu auquel on a abouti dans le précédent chapitre :

/* global PIXI, C */

C.menu = {
    
    // Properties
    scaleStep: 0.01,
    
    show: function () {
        C.sprites.title.scale.x += this.menu.scaleStep;
        C.sprites.title.scale.y += this.menu.scaleStep;
        if (C.sprites.title.scale.x > 1.1) {
            this.menu.scaleStep = -.01;
        } else if (C.sprites.title.scale.x < .9) {
            this.menu.scaleStep = .01;
        }
    },
    
    // Help event
    onHelp: function () {
        C.helpPannel.visible = true;
        C.helpMessage.visible = true;
    },
    
    // Hide help event
    onHideHelp: function () {
        C.helpPannel.visible = false;
        C.helpMessage.visible = false;
    },
    
    // Play event
    onPlay: function () {
        C.sprites.title.visible = false;
        C.sprites.play.visible = false;
        C.sprites.help.visible = false;
        C.highScoreText.visible = false;
        C.sprites.bird.visible = true;
        C.messageText.visible = true;
        C.sprites.pannel.visible = true;
        C.state = C.play.on;
    }
};

La fonction show

Le jeu est en place et il ne restera plus qu’à l’animer !

On va avoir besoin de gérer les collisions :

• entre l’oiseau et les avions,

• entre l’oiseau et les ballons,

• entre les avions entre eux pour éviter qu’ils soient empilés.

On a vu dans la première partie la librairie sat.js qu’on utilise pour cette gestion.

Voici le code complet du fichier collision.js :

/* global C, SAT */

// Aliases
var V = SAT.Vector;

C.collisions = {
    //Properties
    response: undefined,
    planePolygon: [
        new V(4, 128),
        new V(192, 8),
        new V(332, 68),
        new V(264, 201),
        new V(99, 212)
    ],
    balloonPolygon: [
        new V(10, 0),
        new V(20, 0),
        new V(20, 75),
        new V(30, 75)
    ],
    // Get plane box
    getPlaneBox: function (plane) {
        return new SAT.Box(new SAT.Vector(plane.x, plane.y), 356, 222).toPolygon();
    },
    // Get plane polygon
    getPlanePolygon: function (plane) {
        return new SAT.Polygon(new V(plane.x, plane.y), this.planePolygon);
    },
    // Get balloonn polygon
    getBalloonPolygon: function (balloon) {
        return new SAT.Polygon(new V(balloon.x, balloon.y), this.balloonPolygon);
    },
    // Get balloon circle
    getBalloonCircle: function (balloon) {
        return new SAT.Circle(new V(balloon.x, balloon.y - 35), 40);
    },
    // Get bird circle
    getBirdCircle: function () {
        return new SAT.Circle(new V(C.sprites.bird.x + 40, C.sprites.bird.y + 60), 38);
    },
    // Detect bird/plane collision
    birdPlane: function (plane) {
        return SAT.testPolygonCircle(this.getPlanePolygon(plane), this.getBirdCircle(), this.response);
    },
    // Detect bird/balloon circle collision
    birdBalloonCircle: function (balloon) {
        return SAT.pointInCircle(new V(C.sprites.bird.x + 133, C.sprites.bird.y + 83), this.getBalloonCircle(balloon), this.response);
    },
    // Detect bird/balloon polygon collision
    birdBalloonPolygon: function (balloon) {
        return SAT.pointInPolygon(new V(C.sprites.bird.x + 133, C.sprites.bird.y + 83), this.getBalloonPolygon(balloon), this.response);
    },
    // Check for free place for plane
    freeOfPlane: function (plane) {
        for (var i = 0; i < C.nbrPlanes; ++i) {
            if ((C.sprites.planes[i].state && SAT.testPolygonPolygon(this.getPlaneBox(C.sprites.planes[i]), this.getPlaneBox(plane), this.response))) {
                return false;
            }
        }
        return true;
    }
};

J’utilise un alias pour simplifier la syntaxe des vecteurs :

var V = SAT.Vector;

Les avions

Dans ce chapitre on a :

• mis en place la gestion du menu avec l’aide et le lancement du jeu

• mis en place la gestion des collisions