Finitions

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

var lives = 3;

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

function drawLives() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

lives--;
if (!lives) {
  alert("GAME OVER");
  document.location.reload();
  clearInterval(interval); // Needed for Chrome to end game
} else {
  x = canvas.width / 2;
  y = canvas.height - 30;
  dx = 2;
  dy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
}

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

drawLives();

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. requestAnimationFrame aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant setInterval(). Remplacez la ligne suivante :

var interval = setInterval(draw, 10);

avec simplement :

draw();

et supprimez chaque occurence de :

clearInterval(interval); // Needed for Chrome to end game

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

requestAnimationFrame(draw);

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

C'est tout — la version finale du jeu est prête et prête à être lancée !

Exercice: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

• « Précédent