Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon Gamedev-Canvas-workshop/lesson5.html.

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger le paddle, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Ca serait bon, du point de vue gameplay de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

Intégrer un GameOver

Essayons d'intégrer un GameOver dans le jeu . Voyons une partie du code vu dans la troisième leçon, où nous faisions rebondir la balle contre les murs:

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

Au lieu de permettre à la balle de rebondir sur les quatre murs, n'en autorisons que trois désormais (gauche, haut et droite). Toucher le mur du bas mettra fin à la partie.

Nous allons  donc modifier le second "if bloc" (l'axe vertical, y) en y ajoutant un "else if" qui déclenchera un GameOver si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple et afficher un message d'alerte et redemarrer le jeu en rechargeant la page.

Remplacez la seconde instruction if par le code suivant:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("GAME OVER");
    document.location.reload();
}

Faire rebondir la balle sur le paddle

La dernière chose à faire dans cette leçon est de créer une sorte de detection de collision entre le paddle et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se  trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme indiqué de la manière qui suit:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("GAME OVER");
        document.location.reload();
    }
}

Si la balle rentre en collision avec le mur du bas, nous devons vérifier si elle frappe le paddle. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

Comparez votre code

Voici les codes fonctionnels avec lesquels vous pouvez comparer les vôtres:

Exercice: Faites en sorte que la balle accélère quand elle touche le paddle.

Prochaine étape

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre! Mais il manque encore l'essentiel! Rendons nous au sixième chapitre —Fabriquer le champs de briques — et créons quelques briques que la balle pourra détruire.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : wbamberg, GaryJULIEN
Dernière mise à jour par : wbamberg,