6.9 KiB

Raw Blame History

Construire un jeu de l'espace - Partie 5 : scores et vies

Quiz de pré-lecture

Dans cette leçon, vous apprendrez à ajouter des points à un jeu et à calculer des vies.

Dessiner du texte à l'écran

Pour pouvoir afficher un score de jeu à l'écran, vous devez savoir comment placer du texte à l'écran. La réponse est d'utiliser la méthode fillText() sur l'objet canvas. Vous pouvez également contrôler d'autres aspects comme la police à utiliser, la couleur du texte et même son alignement (gauche, droite, centre). Vous trouverez ci-dessous du code permettant d'afficher du texte à l'écran.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ En savoir plus sur comment ajouter du texte à un canvas , et n'hésitez pas à rendre le vôtre plus sophistiqué !

La vie, comme concept de jeu

Le concept d'avoir une vie dans un jeu n'est qu'un nombre. Dans le contexte d'un jeu spatial, il est courant d'attribuer un ensemble de vies qui sont réduites une par une lorsque votre vaisseau subit des dégâts. C'est bien si vous pouvez montrer une représentation graphique de ceci comme des mini vaisseaux ou des cœurs au lieu d'un nombre.

Ce qu'il faut construire

Ajoutons les éléments suivants à votre jeu :

Score de jeu : Pour chaque navire ennemi détruit, le héros devrait recevoir quelques points, nous suggérons 100 points par navire. Le score du jeu devrait être affiché en bas à gauche.
Vie : Votre navire a trois vies. Vous perdez une vie chaque fois qu'un navire ennemi entre en collision avec vous. Un score de vie devrait être affiché en bas à droite et être composé du graphique suivant image de vie.

Étapes recommandées

Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire your-work. Il devrait contenir les éléments suivants :

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Vous démarrez votre projet dans le dossier your_work en tapant :

cd your-work
npm start

Ce qui précède va démarrer un serveur HTTP sur l'adresse http://localhost:5000. Ouvrez un navigateur et entrez cette adresse, pour l'instant il devrait afficher le héros et tous les ennemis, et lorsque vous appuyez sur vos flèches gauche et droite, le héros se déplace et peut abattre les ennemis.

Ajouter du code

Copiez les éléments nécessaires du dossier solution/assets/ dans le dossier your-work ; vous allez ajouter un élément life.png. Ajoutez l'image lifeImg à la fonction window.onload :
```
lifeImg = await loadTexture("assets/life.png");
```

Ajoutez le lifeImg à la liste des éléments :

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Ajoutez des variables. Ajoutez le code qui représente votre score total (0) et les vies restantes (3), affichez ces scores sur un écran.

Étendre la fonction updateGameObjects(). Étendre la fonction updateGameObjects() pour gérer les collisions avec les ennemis :

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Ajouter life et points.

Initialiser les variables. Sous this.cooldown = 0 dans la classe Hero , définissez la vie et les points :
```
this.life = 3;
this.points = 0;
```

Dessinez les variables à l'écran. Dessinez ces valeurs à l'écran :

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Ajouter des méthodes à la boucle de jeu. Assurez-vous d'ajouter ces fonctions à votre fonction window.onload sous updateGameObjects():
```
drawPoints();
drawLife();
```

Mettre en œuvre les règles du jeu. Mettez en œuvre les règles du jeu suivantes :

Pour chaque collision entre héros et ennemis, retirez une vie.

Étendez la classe Hero pour faire cette suppression:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Pour chaque laser qui touche un ennemi, augmentez le score du jeu de 100 points.

Étendez la classe Hero pour faire cet ajout :

  incrementPoints() {
    this.points += 100;
  }

Ajoutez ces fonctions à vos émetteurs d'événements de collision :

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Faites une petite recherche pour découvrir d'autres jeux créés à l'aide de JavaScript/Canvas. Quels sont leurs points communs ?

À la fin de ce travail, vous devriez voir les petits vaisseaux de "vie" en bas à droite, les points en bas à gauche, et vous devriez voir votre compte de vie diminuer lorsque vous entrez en collision avec des ennemis et vos points augmenter lorsque vous tirez sur des ennemis. Bien joué ! Votre jeu est presque terminé.

🚀 Challenge

Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes ?

Quiz post-lecture

Révision et autoformation

Recherchez des moyens d'incrémenter et de décrémenter les scores et les vies. Il existe des moteurs de jeu intéressants comme PlayFab. Comment l'utilisation de l'un d'eux pourrait-elle améliorer votre jeu ?

Travail à faire

Construire un jeu de score

6.9 KiB Raw Blame History