# Construire un jeu de l'espace Partie 6: Fin et redémarrage
# Construire un jeu de l'espace Partie 6: Fin et redémarrage
## Quiz de prélecture
## Quiz de prélecture
[Quiz de prélecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=fr)
[Quiz de prélecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=fr)
Il existe différentes façons d'exprimer une "condition de fin" dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent:
Il existe différentes façons d'exprimer et de terminer une condition dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent:
- **`N`Les navires ennemis ont été détruits**: Si vous divisez un jeu en plusieurs niveaux, il est assez fréquent que vous deviez détruire `N` vaisseaux ennemis pour terminer un niveau.
- **`N`Les navires ennemis ont été détruits**: Si vous divisez un jeu en plusieurs niveaux, il est assez fréquent que vous deviez détruire `N` vaisseaux ennemis pour terminer un niveau.
- **Votre navire a été détruit**: Il y a certainement des jeux où vous perdez la partie si votre vaisseau est détruit. Une autre approche commune est que vous avez le concept de vies. Chaque fois que votre vaisseau est détruit, une vie est déduite. Une fois que toutes les vies ont été perdues, vous perdez la partie.
- **Votre navire a été détruit**: Il y a certainement des jeux où vous perdez la partie si votre vaisseau est détruit. Une autre approche commune est que vous avez le concept de vies. Chaque fois que votre vaisseau est détruit, une vie est déduite. Une fois que toutes les vies ont été perdues, vous perdez la partie.
- **Vous avez collecté `N` points**: Une autre condition de fin commune est que vous accumuliez des points. La façon dont vous obtenez des points dépend de vous, mais il est assez courant d'attribuer des points à diverses activités comme la destruction d'un navire ennemi ou la collecte d'objets que les objets *laissent tomber* lorsqu'ils sont détruits.
- **Vous avez collecté `N` points**: Une autre condition de fin commune est que vous accumuliez des points. La façon dont vous obtenez des points dépend de vous, mais il est assez courant d'attribuer des points à diverses activités comme la destruction d'un navire ennemi ou la collecte d'objets que les objets *laissent tomber* lorsqu'ils sont détruits.
- Compléter un niveau** : Cela peut impliquer plusieurs conditions telles que `X` navires ennemis détruits, `Y` points collectés ou peut-être qu'un objet spécifique a été collecté.
- **Compléter un niveau**: Cela peut impliquer plusieurs conditions telles que `X` navires ennemis détruits, `Y` points collectés ou peut-être qu'un objet spécifique a été collecté.
## Redémarrage
## Redémarrage
@ -20,14 +20,14 @@ Si les gens apprécient votre jeu, ils auront probablement envie d'y rejouer. Lo
## Ce qu'il faut construire
## Ce qu'il faut construire
Vous allez ajouter ces règles à votre jeu:
Vous allez ajouter ces règles à votre jeu:
1. **Gagner la partie**. Une fois que tous les navires ennemis ont été détruits, vous gagnez la partie. Affichez en outre une sorte de message de victoire.
1. **Gagner la partie**. Une fois que tous les navires ennemis ont été détruits, vous gagnez la partie. Affichez en outre une sorte de message de victoire.
1. **Démarrer**. Une fois que toutes les vies sont perdues ou que la partie est gagnée, vous devez proposer un moyen de redémarrer la partie. N'oubliez pas! Vous devrez réinitialiser le jeu et l'état précédent du jeu devra être effacé.
1. **Démarrer**. Une fois que toutes les vies sont perdues ou que la partie est gagnée, vous devez proposer un moyen de redémarrer la partie. N'oubliez pas! Vous devrez réinitialiser le jeu et l'état précédent du jeu devra être effacé.
## Mesures recommandées
## Mesures 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:
Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants:
```bash
```bash
-| assets
-| assets
@ -40,7 +40,7 @@ Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire
-| package.json
-| package.json
```
```
Vous démarrez votre projet dans le dossier `your_work` en tapant:
Vous démarrez votre projet dans le dossier `your_work` en tapant:
```bash
```bash
cd your-work
cd your-work
@ -49,11 +49,11 @@ 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. Votre jeu devrait être dans un état jouable.
Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse. Votre jeu devrait être dans un état jouable.
> astuce: pour éviter les avertissements dans Visual Studio Code, modifiez la fonction `window.onload` pour appeler `gameLoopId` tel quel (sans `let`), et déclarez le gameLoopId en haut du fichier, indépendamment: `let gameLoopId;`
> astuce: pour éviter les avertissements dans Visual Studio Code, modifiez la fonction `window.onload` pour appeler `gameLoopId` tel quel (sans `let`), et déclarez le gameLoopId en haut du fichier, indépendamment: `let gameLoopId;`
### Ajouter du code
### Ajouter du code
1. **Condition de fin de parcours**. Ajoutez du code qui garde la trace du nombre d'ennemis, ou si le vaisseau du héros a été détruit en ajoutant ces deux fonctions:
1. **Condition de fin de parcours**. Ajoutez du code qui garde la trace du nombre d'ennemis, ou si le vaisseau du héros a été détruit en ajoutant ces deux fonctions:
```javascript
```javascript
function isHeroDead() {
function isHeroDead() {
@ -66,7 +66,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
}
```
```
1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions:
1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions:
```javascript
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@ -100,7 +100,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
});
});
```
```
1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constantes:
1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constants:
```javascript
```javascript
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_LOSS: "GAME_END_LOSS",
@ -109,7 +109,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
1. **Ajouter le code de redémarrage** code qui redémarre le jeu à la pression d'un bouton sélectionné.
1. **Ajouter le code de redémarrage** code qui redémarre le jeu à la pression d'un bouton sélectionné.
1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression:
1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression:
```javascript
```javascript
else if(evt.key === "Enter") {
else if(evt.key === "Enter") {
@ -117,17 +117,17 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
}
```
```
1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante de messages :
1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante Messages:
```javascript
```javascript
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```
```
1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes:
1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes:
1. **Condition de victoire du joueur**. Lorsque tous les navires ennemis sont détruits, affichez un message de victoire.
1. **Condition de victoire du joueur**. Lorsque tous les navires ennemis sont détruits, affichez un message de victoire.
1. Tout d'abord, créez une fonction `displayMessage()`:
1. Tout d'abord, créez une fonction `displayMessage()`:
```javascript
```javascript
function displayMessage(message, color = "red") {
function displayMessage(message, color = "red") {
@ -138,7 +138,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
}
```
```
1. Créez une fonction `endGame()`:
1. Créez une fonction `endGame()`:
```javascript
```javascript
function endGame(win) {
function endGame(win) {
@ -165,7 +165,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
1. **Logique de redémarrage**. Lorsque toutes les vies sont perdues ou que le joueur a gagné la partie, affichez que le jeu peut être redémarré. En outre, redémarrez le jeu lorsque la touche *redémarrage* est enfoncée (vous pouvez décider quelle touche doit être affectée au redémarrage).
1. **Logique de redémarrage**. Lorsque toutes les vies sont perdues ou que le joueur a gagné la partie, affichez que le jeu peut être redémarré. En outre, redémarrez le jeu lorsque la touche *redémarrage* est enfoncée (vous pouvez décider quelle touche doit être affectée au redémarrage).
1. Créez la fonction `resetGame()`:
1. Créez la fonction `resetGame()`:
```javascript
```javascript
function resetGame() {
function resetGame() {
@ -202,13 +202,13 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
}
```
```
👽 💥 🚀 Félicitations, capitaine! Ton jeu est terminé! Bien joué! 🚀 💥 👽
👽 💥 🚀 Félicitations, capitaine! Ton jeu est terminé! Bien joué! 🚀 💥 👽
---
---
## 🚀 Défi
## 🚀 Défi
Ajoutez un son! Pouvez-vous ajouter un son pour améliorer votre jeu, par exemple lorsqu'un laser est touché, ou lorsque le héros meurt ou gagne? Jetez un coup d'œil à ce [bac à sable](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pour apprendre à jouer un son en utilisant JavaScript.
Ajoutez un son! Pouvez-vous ajouter un son pour améliorer votre jeu, par exemple lorsqu'un laser est touché, ou lorsque le héros meurt ou gagne? Jetez un coup d'œil à ce [bac à sable](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pour apprendre à jouer un son en utilisant JavaScript.