mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-09-03 03:32:55 +02:00
Update Translations
This commit is contained in:
Lee Stott
GitHub
@@ -1,214 +0,0 @@
|
||||
# Construye un juego espacial Parte VI: Finalizar y reiniciar
|
||||
|
||||
|
||||
|
||||
## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
|
||||
|
||||
Hay diferentes formas de expresar y *condición final* en un juego. Depende de usted, como creador del juego, decir por qué ha terminado. Aquí hay algunas razones, si asumimos que estamos hablando del juego espacial que has estado construyendo hasta ahora:
|
||||
|
||||
- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves `N` Enemy para completar un nivel
|
||||
- **Tu nave ha sido destruida**: Definitivamente hay juegos en los que pierdes el juego si tu nave es destruida. Otro enfoque común es que tienes el concepto de vidas. Cada vez que un barco es destruido, se descuenta una vida. Una vez que se hayan perdido todas las vidas, perderá el juego.
|
||||
- **Has acumulado `N` puntos**: Otra condición final común es que acumules puntos. La forma de obtener puntos depende de usted, pero es bastante común asignar puntos a diversas actividades, como destruir una nave enemiga o tal vez recolectar elementos que los elementos *sueltan* cuando son destruidos.
|
||||
- **Completa un nivel**: Esto puede implicar varias condiciones como "X" barcos enemigos destruidos, puntos "Y" acumulados o tal vez que se haya recogido un objeto específico.
|
||||
|
||||
## Reiniciando
|
||||
|
||||
Si las personas disfrutan de tu juego, es probable que quieran volver a jugarlo. Una vez que el juego termina por cualquier motivo, debes ofrecer una alternativa para reiniciar.
|
||||
|
||||
✅ Piensa un poco en las condiciones en las que encuentras que termina un juego y luego cómo se te pide que reinicies
|
||||
|
||||
## Qué construir
|
||||
|
||||
Agregará estas reglas a su juego:
|
||||
|
||||
1. **Ganar el juego**. Una vez que todas las naves enemigas hayan sido destruidas, ganas el juego. Además, muestra algún tipo de mensaje de victoria.
|
||||
1. **Reiniciar**. Una vez que hayas perdido todas tus vidas o hayas ganado el juego, debes ofrecer una forma de reiniciar el juego. ¡Recuerda! Deberá reinicializar el juego y se debe borrar el estado anterior del juego.
|
||||
|
||||
## Pasos recomendados
|
||||
|
||||
Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Comienzas tu proyecto en la carpeta `your_work` escribiendo:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abra un navegador e ingrese esa dirección. Tu juego debe estar en un estado jugable.
|
||||
|
||||
> consejo: para evitar advertencias en Visual Studio Code, edite la función `window.onload` para llamar a `gameLoopId` tal cual (sin `let`), y declare el gameLoopId en la parte superior del archivo, independientemente: `let gameLoopId;`
|
||||
|
||||
### Agregar código
|
||||
|
||||
1. **Condición de fin de pista**. Agregue un código que realice un seguimiento de la cantidad de enemigos o si el barco héroe ha sido destruido agregando estas dos funciones:
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **Agregar lógica a los controladores de mensajes**. Edite el `eventEmitter` para manejar estas condiciones:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // loss before victory
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **Agregar nuevos tipos de mensajes**. Agregue estos mensajes al objeto de constantes:
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
2. **Agregar código de reinicio**. Código que reinicia el juego con solo presionar un botón seleccionado.
|
||||
|
||||
1. **Escuche la tecla "Enter"**. Edite el eventListener de su ventana para escuchar esta acción:
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **Agregar mensaje de reinicio**. Agregue este mensaje a su constante de Mensajes:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **Implementar las reglas del juego**. Implementa las siguientes reglas del juego:
|
||||
|
||||
1. **Condición de victoria del jugador**. Cuando todos los barcos enemigos sean destruidos, muestra un mensaje de victoria.
|
||||
|
||||
1. Primero, cree una función `displayMessage()`:
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. Cree una función `endGame()`:
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// establece una demora para estar seguros de que las pinturas han terminado
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
1. **Reiniciar la lógica**. Cuando se pierdan todas las vidas o el jugador haya ganado el juego, muestre que el juego se puede reiniciar. Además, reinicie el juego cuando se presione la tecla *reiniciar* (puede decidir qué tecla debe asignarse para reiniciar).
|
||||
|
||||
1. Cree la función `resetGame()`:
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. Agrega una llamada al `eventEmitter` para reiniciar el juego en `initGame()`:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. Agregue una función `clear()` al EventEmitter:
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 ¡Felicitaciones, Capitán! ¡Tu juego está completo! ¡Bien hecho! 🚀 💥 👽
|
||||
|
||||
🚀 Desafío: ¡Agrega un sonido! ¿Puedes agregar un sonido para mejorar tu juego, tal vez cuando hay un golpe de láser, o el héroe muere o gana? Eche un vistazo a este [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) para aprender a reproducir sonido con JavaScript.
|
||||
|
||||
## [Post-lecture prueba]((https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Tu tarea es crear un juego de muestra nuevo, así que explora algunos de los juegos interesantes que existen para ver qué tipo de juego podrías construir.
|
||||
|
||||
**Tarea**: [Crear un juego de muestra](assignment.es.md)
|
||||
@@ -1,223 +0,0 @@
|
||||
# Construire un jeu de l'espace Partie 6: Fin et redémarrage
|
||||
|
||||
## Quiz de prélecture
|
||||
|
||||
[Quiz de prélecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=fr)
|
||||
|
||||
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.
|
||||
- **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.
|
||||
- **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
|
||||
|
||||
Si les gens apprécient votre jeu, ils auront probablement envie d'y rejouer. Lorsque le jeu se termine, quelle qu'en soit la raison, vous devez proposer une alternative pour recommencer.
|
||||
|
||||
✅ Réfléchissez un peu aux conditions dans lesquelles vous constatez qu'une partie se termine, puis à la manière dont vous êtes invité à la reprendre.
|
||||
|
||||
## Ce qu'il faut construire
|
||||
|
||||
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. **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
|
||||
|
||||
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
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Vous démarrez votre projet dans le dossier `your_work` en tapant:
|
||||
|
||||
```bash
|
||||
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. 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;`
|
||||
|
||||
### 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:
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // loss before victory
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constants:
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante Messages:
|
||||
|
||||
```javascript
|
||||
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. **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()`:
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. Créez une fonction `endGame()`:
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// set a delay so we are sure any paints have finished
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
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()`:
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. Ajoutez un appel au `eventEmitter` pour réinitialiser le jeu dans `initGame()`:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. Ajoutez une fonction `clear()` à l'EventEmitter:
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 Félicitations, capitaine! Ton jeu est terminé! Bien joué! 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 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.
|
||||
|
||||
## Quiz post-lecture
|
||||
|
||||
[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=fr)
|
||||
|
||||
## Révision et autoformation
|
||||
|
||||
Votre mission consiste à créer un nouveau jeu type. Explorez donc certains des jeux intéressants qui existent pour voir quel type de jeu vous pourriez créer.
|
||||
|
||||
## Travail à faire
|
||||
|
||||
[Créer un jeu type](assignment.fr.md)
|
||||
@@ -1,224 +0,0 @@
|
||||
# एक अंतरिक्ष खेल बनाएँ भाग ६: अंत और पुनः आरंभ
|
||||
|
||||
## प्री-रीडिंग क्विज
|
||||
|
||||
[प्री-रीडिंग क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=hi)
|
||||
|
||||
एक खेल में व्यक्त करने और _अंतिम स्थिति_ के विभिन्न तरीके हैं। यह गेम के निर्माता के रूप में यह कहना है कि खेल क्यों समाप्त हो गया है। यहाँ कुछ कारण हैं, अगर हम मान लें कि हम उस अंतरिक्ष खेल के बारे में बात कर रहे हैं जो आप अभी तक बना रहे हैं:
|
||||
|
||||
- **`N` दुश्मन के जहाज तबाह हो गए हैं**: यदि आप एक गेम को विभिन्न स्तरों में विभाजित करते हैं तो यह काफी सामान्य है कि आपको एक स्तर पूरा करने के लिए `N` दुश्मन जहाजों को नष्ट करने की आवश्यकता है
|
||||
- **आपका जहाज नष्ट हो गया है**: यदि आपका जहाज नष्ट हो जाता है तो निश्चित रूप से ऐसे खेल हैं जहाँ आप खेल को खो देते हैं। एक और आम दृष्टिकोण यह है कि आपके पास जीवन की अवधारणा है। हर बार जब आपका जहाज नष्ट हो जाता है तो यह जीवन काट देता है। एक बार जब सभी जान चली गई तो आप खेल खो देते हैं.
|
||||
- **आपने `N` अंक एकत्र किए हैं**: एक और सामान्य अंतिम स्थिति आपके लिए अंक एकत्र करने की है। आप कैसे अंक प्राप्त करते हैं, यह आपके ऊपर है, लेकिन दुश्मन के जहाज को नष्ट करने या शायद वस्तुओं को इकट्ठा करने जैसी विभिन्न गतिविधियों के लिए अंक प्रदान करना काफी सामान्य है, जब वे _गिर_ जाते हैं।.
|
||||
- **एक स्तर पूरा करें**: इसमें कई स्थितियां शामिल हो सकती हैं जैसे कि `X` दुश्मन के जहाज नष्ट,` Y` अंक एकत्र या शायद एक विशिष्ट आइटम एकत्र किया गया है.
|
||||
|
||||
## पुनरारंभ
|
||||
|
||||
यदि लोग आपके खेल का आनंद लेते हैं, तो वे इसे फिर से खेलना चाहते हैं। एक बार खेल जो भी कारण से आप को पुनरारंभ करने के लिए एक विकल्प की पेशकश के लिए समाप्त होता है.
|
||||
|
||||
✅ इस बारे में थोड़ा सोचें कि आपको किन परिस्थितियों में गेम समाप्त होता है, और फिर आपको कैसे पुनरारंभ करने के लिए प्रेरित किया जाता है
|
||||
|
||||
## क्या बनना है
|
||||
|
||||
आप इन नियमों को अपने खेल में शामिल करेंगे:
|
||||
|
||||
1. **खेल जीतना**. एक बार सभी दुश्मन जहाजों को नष्ट कर दिए जाने के बाद, आप गेम जीतते हैं। इसके अतिरिक्त किसी प्रकार का विजय संदेश प्रदर्शित करें.
|
||||
1. **पुनरारंभ**. एक बार जब आपका सारा जीवन खो जाता है या खेल जीत जाता है, तो आपको खेल को पुनः आरंभ करने का एक तरीका पेश करना चाहिए। याद है! आपको खेल को फिर से संगठित करना होगा और पिछले खेल की स्थिति को साफ करना चाहिए.
|
||||
|
||||
## अनुशंसित कदम
|
||||
|
||||
उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र खोले और उस पतेको खोलें। आपका खेल खेलने योग्य अवस्था में होना चाहिए
|
||||
|
||||
> टिप: विज़ुअल स्टूडियो कोड में चेतावनियों से बचने के लिए, `window.onload` फ़ंक्शन को` gameLoopId` के रूप में (`let` के बिना) के रूप में संपादित करने के लिए संपादित करें, और स्वतंत्र रूप से फ़ाइल के शीर्ष पर gameLoopId की घोषणा करें, `let gameLoopId`;
|
||||
|
||||
### कोड जोड़े
|
||||
|
||||
1. **ट्रैक एंड कंडीशन**. उन कोडों को जोड़ें जो दुश्मनों की संख्या का ट्रैक रखते हैं, या यदि इन दो कार्यों को जोड़ते हुए नायक जहाज को नष्ट कर दिया गया है:
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter(
|
||||
(go) => go.type === "Enemy" && !go.dead
|
||||
);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **संदेश संचालकों में तर्क जोड़ें**. इन स्थितियों को संभालने के लिए `EventEmitter` संपादित करें:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // loss before victory
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **नए संदेश प्रकार जोड़ें**. इन संदेशों को स्थिरांक वस्तु में जोड़ें:
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
1. **पुनः आरंभ कोड जोड़ें** कोड जो चयनित बटन के प्रेस पर गेम को पुनरारंभ करता है.
|
||||
|
||||
1. **`Enter` की प्रेस सुनो**. इस प्रेस को सुनने के लिए अपनी विंडो के इवेंटलिस्ट को एडिट करें:
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **पुनः आरंभ संदेश जोड़ें**. इस संदेश को अपने संदेशों में लगातार जोड़ें:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **खेल के नियमों को लागू करें**. निम्नलिखित खेल नियमों को लागू करें:
|
||||
|
||||
1. **खिलाड़ी शर्त जीता**. जब सभी दुश्मन जहाज नष्ट हो जाते हैं, तो एक जीत संदेश प्रदर्शित करें.
|
||||
|
||||
1. सबसे पहले, एक `displayMessage()` फ़ंक्शन बनाएँ:
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. एक `endGame()` फ़ंक्शन बनाएँ:
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// set a delay so we are sure any paints have finished
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
```
|
||||
|
||||
1. **तर्क पुनः आरंभ**. जब सभी जीवन खो जाते हैं या खिलाड़ी खेल जीत जाता है, तो प्रदर्शित करें कि खेल को फिर से शुरू किया जा सकता है। इसके अलावा खेल को पुनरारंभ करें जब _पुनरारंभ_ की हिट होती है (आप तय कर सकते हैं कि पुनरारंभ करने के लिए किस की को मैप किया जाना चाहिए).
|
||||
|
||||
1. `ResetGame()` फ़ंक्शन बनाएँ:
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. `InitGame()` में गेम को रीसेट करने के लिए` EventEmitter` में कॉल जोड़ें:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. EventEmitter में `clear()` फ़ंक्शन जोड़ें:
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 बधाई हो, कैप्टन! आपका खेल पूरा हो गया है! बहुत बढ़िया! 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
एक ध्वनि जोड़ें! क्या आप अपने गेम खेलने को बढ़ाने के लिए एक ध्वनि जोड़ सकते हैं, हो सकता है कि जब कोई लेजर हिट हो, या नायक मर जाए या जीत जाए? जावास्क्रिप्ट का उपयोग करके ध्वनि कैसे खेलें, यह जानने के लिए इस [सैंडबॉक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) पर एक नज़र डालें
|
||||
|
||||
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=hi)
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
आपका असाइनमेंट एक फ्रेश सैंपल गेम बनाना है, इसलिए वहां के कुछ दिलचस्प गेम्स को देखें कि आप किस प्रकार के गेम का निर्माण कर सकते हैं.
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
[एक नमूना खेल बनाएँ](assignment.hi.md)
|
||||
@@ -1,222 +0,0 @@
|
||||
# Costruire un Gioco Spaziale Parte 6: Fine e Riavvio
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=it)
|
||||
|
||||
Esistono diversi modi per esprimere una *condizione di fine gioco*. Spetta al creatore del gioco dire perché il gioco è finito. Ecco alcuni motivi, si supponga di parlare del gioco spaziale costruito finora:
|
||||
|
||||
- Un **numero `N` di astronavi nemiche sono state distrutte**: è abbastanza comune se il gioco viene diviso in diversi livelli che si debba distruggere `N` astronavi nemiche per completare un livello
|
||||
- **La propria nave è stata distrutta**: ci sono sicuramente giochi in si perde la partita se la propria astronave viene distrutta. Un altro approccio comune è il concetto di vite. Ogni volta che una propria astronave viene distrutta, sottrae una vita. Una volta perse tutte le vite, si perde la partita.
|
||||
- **Sono stati raccolti `N` punti**: un'altra condizione finale comune è che il giocatore raccolga punti. Il modo in cui ottenere punti dipende dallo sviluppatore, ma è abbastanza comune assegnare punti a varie attività come distruggere una astronave nemica o forse raccogliere elementi che vengono *rilasciati* quando gli oggetti vengono distrutti.
|
||||
- **Completare un livello**: questo potrebbe coinvolgere diverse condizioni come `X` astronavi nemiche distrutte, `Y` punti raccolti o forse che è stato raccolto un oggetto specifico.
|
||||
|
||||
## Riavvio
|
||||
|
||||
Se le persone apprezzano il gioco, è probabile che vogliano rigiocarlo. Una volta che il gioco finisce per qualsiasi motivo, si dovrebbe offrire un'alternativa per il riavvio.
|
||||
|
||||
✅ Si pensi alle condizioni per le quali si ritiene che un gioco finisca e poi a come viene chiesto di riavviare
|
||||
|
||||
## Cosa costruire
|
||||
|
||||
Aggiungere queste regole al gioco:
|
||||
|
||||
1. **Vincere il gioco**. Una volta che tutte le navi nemiche sono state distrutte, si vince la partita. Mostrare inoltre una sorta di messaggio di vittoria.
|
||||
1. **Riavvio**. Una volta perse tutte le vite o si è vinto il gioco, si dovrebbe offrire un modo per riavviare il gioco. Ricordare! Si dovrà reinizializzare il gioco e lo stato del gioco precedente dovrebbe essere cancellato.
|
||||
|
||||
## Passaggi consigliati
|
||||
|
||||
Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere le seguenti informazioni:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Si fa partire il progetto dalla cartella `your_work` digitando:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Il gioco dovrebbe essere in uno stato giocabile.
|
||||
|
||||
> suggerimento: per evitare avvertimenti in Visual Studio Code, modificare la funzione `window.onload` per chiamare `gameLoopId` così com'è (senza `let`) e dichiarare gameLoopId all'inizio del file, indipendentemente: `let gameLoopId;`
|
||||
|
||||
### Aggiungere codice
|
||||
|
||||
1. **Tracciare la condizione di fine**. Aggiungere codice che tenga traccia del numero di nemici o se l'astronave dell'eroe è stata distrutta aggiungendo queste due funzioni:
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **Aggiungere logica ai gestori di messaggi**. Modificare `eventEmitter` per gestire queste condizioni:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // loss before victory
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **Aggiungere nuovi tipi di messaggi**. Aggiungere questi messaggi alle costanti assegnate agli oggetti:
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
2. **Aggiungere il codice di riavvio** che fa ripartire il gioco con la semplice pressione di un pulsante selezionato.
|
||||
|
||||
1. **Mettersi in ascolto per la pressione del tasto `Invio`**. Modificare l'eventListener di window per ascoltare questa pressione
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **Aggiungere messaggio di riavvio**. Aggiungere questo messaggio alle costanti in Messages:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **Implementare le regole del gioco**. Implementare le seguenti regole di gioco:
|
||||
|
||||
1. **Condizione di vittoria del giocatore**. Quando tutte le astronavi nemiche vengono distrutte, mostrare un messaggio di vittoria.
|
||||
|
||||
1. Innanzitutto, creare una funzione `displayMessage()` :
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. Creare una funzione `endGame()` :
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// imposta un ritardo per assicurarsi che tutte sia stato disegnato
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
1. **Logica di riavvio**. Quando tutte le vite sono perse o il giocatore ha vinto la partita, mostrare che il gioco può essere riavviato. Inoltre, riavviare il gioco quando viene premuto il tasto di *riavvio* (si può decidere quale tasto deve essere mappato per il riavvio).
|
||||
|
||||
1. Creare la funzione `resetGame()` :
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. Aggiungere una chiamata a `eventEmitter` per riazzerare il gioco in `initGame()`:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. Aggiungere una funzione `clear()` a EventEmitter:
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 Congratulazioni, Capitano! Il gioco è completo! Ottimo lavoro! 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Aggiungere un suono! Si può aggiungere un suono per migliorare il gioco, magari quando un colpo di laser va a segno, o l'eroe muore o vince? Si dia un'occhiata a questo [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) per imparare a riprodurre il suono utilizzando JavaScript
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=it)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Il compito è creare un nuovo gioco di esempio, quindi esplorare alcuni dei giochi interessanti esistenti per vedere che tipo di gioco si potrebbe costruire.
|
||||
|
||||
## Compito
|
||||
|
||||
[Creare un Gioco di Esempio](assignment.it.md)
|
||||
@@ -1,223 +0,0 @@
|
||||
# スペースゲーム構築プロジェクト その 6: 終了と再起動
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=ja)
|
||||
|
||||
ゲーム内での表現方法や *終了条件* の表現方法は様々です。なぜゲームが終了したのかは、ゲームを作る側のあなた次第です。ここでは、あなたが今まで作ってきた宇宙ゲームの話をしていると仮定して、いくつかの理由を挙げてみましょう。
|
||||
|
||||
- **`N` 隻の敵の宇宙船を撃破しました**: それはあなたがレベルを完了するために N 隻の敵の宇宙船を破壊する必要があることを別のレベルにゲームを分割する場合はかなり一般的です
|
||||
- **あなたの船が破壊されました**: 自分の船が破壊されるとゲームに負けるゲームは間違いなくあります。もう一つの一般的なアプローチは、ライフの概念を持っているということです。あなたの宇宙船が破壊されるたびに、それはライフを差し引きます。すべてのライフが失われると、ゲームを失うことになります
|
||||
- **`N` ポイントを集めました**: もう一つの一般的な終了条件は、ポイントを集めることです。どのようにポイントを獲得するかはあなた次第ですが、敵の宇宙船を破壊したり、破壊された時にドロップするアイテムを集めたりと、様々な活動にポイントを割り当てるのが一般的です
|
||||
- **レベルをクリアしました**: これには、`X` 隻の敵の宇宙船を破壊したり、`Y` ポイントを集めたり、特定のアイテムを集めたりするなど、いくつかの条件が含まれている場合があります
|
||||
|
||||
## 再起動
|
||||
|
||||
人々があなたのゲームを楽しめば、彼らはそれを再プレイしたいと思う可能性が高いです。何らかの理由でゲームが終了したら、再起動するための代替手段を提供すべきです。
|
||||
|
||||
✅ どのような条件でゲームが終了したか、そしてどのように再起動を促されるかを少し考えてみてください。
|
||||
|
||||
## 何を構築するか
|
||||
|
||||
これらのルールをゲームに追加していくことになります。
|
||||
|
||||
1. **ゲームの勝利**。全ての敵の宇宙船を撃破したらゲームの勝利です。さらに、何らかの勝利メッセージを表示します
|
||||
1. **再起動すること**。全てのライフが失われたり、ゲームに勝利したら、ゲームを再起動する方法を提供する必要があります。覚えておいてください! ゲームを再初期化する必要があり、以前のゲームの状態をクリアする必要があります
|
||||
|
||||
## 推奨される手順
|
||||
|
||||
あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
次のように入力して、`your_work` フォルダからプロジェクトを起動します。
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
上記のようにすると、`http://localhost:5000` というアドレスに HTTP サーバーが起動します。ブラウザを開いて、そのアドレスを入力してください。ゲームがプレイ可能な状態になっているはずです。
|
||||
|
||||
> ヒント: Visual Studio Code の警告を避けるためには、`window.onload` 関数を編集して `gameLoopId` をそのまま (`let` を省略して) 呼び出し、ファイルの先頭に gameLoopId を `let gameLoopId;` と独立して宣言します。
|
||||
|
||||
### コードの追加
|
||||
|
||||
1. **終了条件を追跡します**。敵の数を追跡したり、ヒーローの宇宙船が破壊されたかどうかを追跡するコードを追加します
|
||||
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **メッセージハンドラにロジックを追加します**。これらの条件を処理するために `eventEmitter` を編集します
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // 勝利前に敗北
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **新しいメッセージタイプを追加します**。これらのメッセージを定数オブジェクトに追加します
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
2. 選択したボタンの押下でゲームを再起動する**再起動コードを追加します**
|
||||
|
||||
1. **`Enter` キーの押下を待ち受けます**。この押下を待ち受けるために、ウィンドウの eventListener を編集します
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **再起動メッセージを追加します**。このメッセージをメッセージ定数に追加します
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **ゲームルールの実装** 以下のゲームルールを実装します
|
||||
|
||||
1. **プレイヤーの勝利条件**。敵の宇宙船を全て撃破した場合、勝利のメッセージを表示します
|
||||
|
||||
1. まず、関数 `displayMessage()` を作成します
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. 関数 `endGame()` を作成します
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// 塗り終わったことを確認するために遅延を設定します
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
1. **再起動ロジック**。すべてのライフが失われたとき、またはプレイヤーが勝ったときに、ゲームを再起動できることを表示します。さらに、リスタートキーが押されるとゲームを再起動します (どのキーをリスタートにマッピングするかはあなたが決めることができます)
|
||||
|
||||
1. 関数 `resetGame()` を作成します
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. `initGame()` でゲームをリセットするために `eventEmitter` の呼び出しを追加します
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. EventEmitter に `clear()` 関数を追加します
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 おめでとうございます、隊長! あなたのゲームは完成しました! よくできました! 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
音を追加しましょう!レーザーが当たった時や、ヒーローが死んだ時、勝った時など、ゲームを盛り上げるために音を追加することはできますか? JavaScript を使ってサウンドを再生する方法については、こちらの [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) をご覧ください。
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=ja)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
あなたの課題は新鮮なサンプルゲームを作成することです。だから、どんなゲームを作れそうかを確認するために、そこにある面白いゲームのいくつかを探索してください。
|
||||
|
||||
## 課題
|
||||
|
||||
[サンプルゲームを作る](assignment.ja.md)
|
||||
@@ -1,222 +0,0 @@
|
||||
# Space 게임 제작하기 파트 6: 끝과 재시작
|
||||
|
||||
## 강의 전 퀴즈
|
||||
|
||||
[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=ko)
|
||||
|
||||
게임에서 *조건을 표현하고 종료*하는 여러 방식이 있습니다. 게임이 종료된 이유를 말하는 것은 게임 크리에이터의 일입니다. 지금까지 만든 space 게임에 대해 말하고 있다고 가정하면, 몇 가지 이유가 있습니다:
|
||||
|
||||
- **`N`개의 적 배가 파괴되었습니다**: 게임을 여러 레벨로 나누면 레벨을 완료하기 위해 `N`개의 적 배를 부숴야하는 경우가 매우 흔합니다.
|
||||
- **배가 파괴되었습니다**: 배가 부서지면 지는 게임이 분명 있습니다. 또 다른 일반적인 접근 방식은 생명의 컨셉을 가지고 있다는 점입니다. 배가 부서질 때마다 생명이 깍입니다. 모든 목숨을 잃으면 게임에서 집니다.
|
||||
- **`N` 점수를 모았습니다**: 또 다른 종료 조건은 점수를 모으는 것입니다. 점수를 얻는 방법으로 각자 배를 파괴하는 것처럼 다양한 활동에 점수를 할당하거나 아이템이 부서질 때마다 *떨구는* 아이템을 수집하는 것은 매우 일반적입니다.
|
||||
- **레벨을 완료했습니다**: 적 배를 `X` 번 부시거나, `Y` 점수를 수집하거나 특정 아이템을 수집하는 것처럼 여러 조건들을 여기에 포함할 수 있습니다.
|
||||
|
||||
## 다시 시작하기
|
||||
|
||||
사람들이 게임을 즐기고 있다면 다시 플레이하고 싶어합니다. 어떤 이유든지 게임이 끝나면 다시 시작할 수 있는 대안을 줘야합니다.
|
||||
|
||||
✅ 어떤 조건에서 게임이 끝나는 지에 대하여 찾고, 다시 시작이라는 메시지가 어떻게 보일지 생각해보세요
|
||||
|
||||
## 무엇을 만드나요
|
||||
|
||||
게임에 다음 규칙을 추가합니다:
|
||||
|
||||
1. **게임에 우승합니다**. 모든 적의 배가 부서지면, 게임에서 승리합니다. 추가로 일종의 승리 메시지를 출력합니다.
|
||||
1. **다시 시작합니다**. 모든 생명을 잃거나 게임에서 이긴다면, 게임을 다시 시작할 방법을 제공해야 합니다. 생각해보세요! 게임을 다시 초기화하고 이전 게임 상태를 깨끗이 지워야 합니다.
|
||||
|
||||
## 권장 단계
|
||||
|
||||
`your-work` 하위 폴더에서 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
타이핑해서 `your_work` 폴더에 프로젝트를 시작합니다:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력합니다. 게임은 플레이 가능한 상태여야 합니다.
|
||||
|
||||
> tip: Visual Studio Code에서 경고를 보이지 않게 하려면, `gameLoopId`를 (`let`없이) 그대로 호출하도록 `window.onload` 함수를 편집하고, 파일 최상단에 gameLoopId를 독립적으로 선언합니다: `let gameLoopId;`
|
||||
|
||||
### 코드 추가하기
|
||||
|
||||
1. **종료 조건을 추적합니다**. 다음 두 함수를 추가하여 적의 수를 추적하거나, 영웅의 배가 부서진 경우도 추적해주는 코드를 추가합니다:
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **메시지 핸들러에 로직을 추가합니다**. 이 조건을 제어하도록 `eventEmitter`를 편집합니다:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // loss before victory
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **새로운 메시지 타입을 추가합니다**. 상수 객체에 이 메시지를 추가합니다:
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
2. **재시작 코드를 추가합니다** 선택한 버튼을 누르면 게임을 다시 시작하는 코드입니다.
|
||||
|
||||
1. **`Enter` 누를 키를 수신합니다**. 누르는 것을 수신하도록 윈도우의 이벤트 리스너를 편집합니다:
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **재시작 메시지 추가하기**. 메시지를 메시지 상수에 추가합니다:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **게임 규칙을 구현합니다**. 다음 게임 규칙을 구현합니다:
|
||||
|
||||
1. **플레이어 승리 조건입니다**. 적 배가 모두 파괴되면, 승리 메시지를 출력합니다.
|
||||
|
||||
1. 먼저, `displayMessage()` 함수를 만듭니다:
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. `endGame()` 함수를 만듭니다:
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// set a delay so we are sure any paints have finished
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
1. **로직을 다시 시작합니다**. 모든 생명을 잃거나 플레이어가 게임에서 이긴다면, 게임을 다시 시작할 수 있다고 출력합니다. 추가로 *restart* 키를 누르면 게임을 다시 시작합니다 (다시 시작하기 위해 매핑할 키를 고를 수 있습니다).
|
||||
|
||||
1. `resetGame()` 함수를 만듭니다:
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. `initGame()`에서 게임을 다시 설정하기 위해 `eventEmitter`에 호출하도록 추가합니다:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. EventEmitter에 `clear()` 힘수를 추가합니다:
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 축하합니다, 대장! 게임이 완성되었습니다! 잘 하셨습니다! 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 도전
|
||||
|
||||
소리를 추가해보세요! 레이저가 때리거나, 영웅이 죽고 이길 때, 소리를 추가하여 게임 플레이를 향상시킬 수 있나요? [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play)에서 JavaScript로 소리를 재생하는 방법에 대하여 알아보세요
|
||||
|
||||
## 강의 후 퀴즈
|
||||
|
||||
[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=ko)
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
과제는 새로운 샘플 게임을 만드는 것이므로, 어떤 타입의 게임을 만들 수 있는지 알아보고 흥미로운 게임을 찾아보세요.
|
||||
|
||||
## 과제
|
||||
|
||||
[Build a Sample Game](../assignment.md)
|
||||
@@ -1,222 +0,0 @@
|
||||
# Bina Permainan Angkasa Bahagian 6: Tamat dan Mulakan Semula
|
||||
|
||||
## Kuiz Pra Kuliah
|
||||
|
||||
[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
|
||||
|
||||
Terdapat pelbagai cara untuk menyatakan dan *keadaan akhir* dalam permainan. Terserah anda sebagai pencipta permainan untuk mengatakan mengapa permainan ini berakhir. Berikut adalah beberapa sebab, jika kita menganggap bahawa kita sedang membincangkan permainan ruang angkasa yang anda buat sejauh ini:
|
||||
|
||||
- **Kapal musuh `N` telah hancur**: Sangat biasa jika anda membahagikan permainan ke dalam tahap yang berbeza yang anda perlukan untuk menghancurkan kapal `N` Musuh untuk menyelesaikan level
|
||||
- **Kapal anda hancur**: Pasti ada permainan di mana anda kehilangan permainan jika kapal anda musnah. Pendekatan umum lain ialah anda mempunyai konsep kehidupan. Setiap kali kapal anda musnah, ia akan meragut nyawa. Setelah semua nyawa telah hilang maka anda akan kehilangan permainan.
|
||||
- **Anda telah mengumpulkan mata `N`**: Syarat akhir yang umum ialah anda mengumpulkan mata. Cara anda memperoleh mata adalah bergantung kepada anda tetapi agak biasa untuk memberikan mata kepada pelbagai aktiviti seperti memusnahkan kapal musuh atau mungkin mengumpulkan barang-barang yang item *turun* ketika mereka musnah.
|
||||
- **Lengkapkan tahap**: Ini mungkin melibatkan beberapa syarat seperti kapal musuh `X` musnah, mata `Y` dikumpulkan atau mungkin item tertentu telah dikumpulkan.
|
||||
|
||||
## Memulakan semula
|
||||
|
||||
Sekiranya orang menikmati permainan anda, mereka mungkin ingin memainkannya semula. Setelah permainan berakhir dengan alasan apa pun, anda harus menawarkan alternatif untuk dimulakan semula.
|
||||
|
||||
✅ Fikirkan sedikit dalam keadaan apa permainan anda berakhir, dan kemudian bagaimana anda diminta untuk memulakan semula
|
||||
|
||||
## Apakah yang anda perlu bina
|
||||
|
||||
Anda akan menambahkan peraturan ini ke permainan anda:
|
||||
|
||||
1. **Memenangi permainan**. Setelah semua kapal musuh musnah, anda memenangi permainan. Selain itu memaparkan semacam mesej kemenangan.
|
||||
1. **Mulakan semula**. Setelah semua nyawa anda hilang atau permainan dimenangi, anda harus menawarkan cara untuk memulakan semula permainan. Ingat! Anda perlu memulakan semula permainan dan keadaan permainan sebelumnya harus dibersihkan.
|
||||
|
||||
## Langkah-langkah yang disyorkan
|
||||
|
||||
Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Anda memulakan projek anda folder `your_work` dengan mengetik:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Perkara di atas akan memulakan Pelayan HTTP pada alamat `http://localhost:5000`. Buka penyemak imbas dan masukkan alamat itu. Permainan anda mestilah dalam keadaan boleh dimainkan.
|
||||
|
||||
> tip: untuk mengelakkan amaran dalam Visual Studio Code, edit fungsi `window.onload` untuk memanggil `gameLoopId` sebagaimana adanya (tanpa `let`), dan nyatakan gameLoopId di bahagian atas fail, secara bebas: `let gameLoopId;`
|
||||
|
||||
### Tambahkan kod
|
||||
|
||||
1. **Keadaan hujung trek**. Tambahkan kod yang memantau jumlah musuh, atau jika kapal pahlawan telah musnah dengan menambahkan dua fungsi ini:
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **Tambahkan logik ke pengendali mesej**. Edit `eventEmitter` untuk menangani keadaan berikut:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // loss before victory
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **Tambahkan jenis mesej baru**. Tambahkan Mesej ini ke objek pemalar:
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
2. **Tambah kod restart** kod yang memulakan semula permainan dengan menekan butang yang dipilih.
|
||||
|
||||
1. **Dengarkan kekunci tekan `Enter`**. Edit eventListener tetingkap anda untuk mendengar akhbar ini:
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **Tambah semula mesej**. Tambahkan Mesej ini ke pemalar Mesej anda:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **Melaksanakan peraturan permainan**. Laksanakan peraturan permainan berikut:
|
||||
|
||||
1. **Syarat kemenangan pemain**. Apabila semua kapal musuh hancur, tunjukkan mesej kemenangan.
|
||||
|
||||
1. Pertama, buat fungsi `displayMessage()`:
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. Buat fungsi `endGame()`:
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// atur kelewatan supaya kami yakin sebarang cat telah selesai
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
1. **Mulakan semula logik**. Apabila semua nyawa hilang atau pemain memenangi permainan, tunjukkan bahawa permainan dapat dimulakan semula. Selain itu mulakan semula permainan apabila butang * restart * dipukul (anda boleh menentukan kunci apa yang harus dipetakan untuk dimulakan semula).
|
||||
|
||||
1. Buat fungsi `resetGame ()`:
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. Tambahkan panggilan ke `eventEmitter` untuk menetapkan semula permainan di `initGame()`:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. Tambahkan fungsi `clear()` ke EventEmitter:
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 Tahniah, Kapten! Permainan anda selesai! Bagus! 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Tambahkan suara! Bolehkah anda menambahkan suara untuk meningkatkan permainan anda, mungkin ketika ada pancaran laser, atau wira mati atau menang? Lihatlah [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) untuk belajar bagaimana memainkan suara menggunakan JavaScript
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Tugas anda adalah membuat permainan contoh baru, jadi terokai beberapa permainan menarik di luar sana untuk melihat jenis permainan yang mungkin anda bina.
|
||||
|
||||
## Tugasan
|
||||
|
||||
[Bina Contoh Permainan](assignment.ms.md)
|
||||
@@ -1,222 +0,0 @@
|
||||
# 建立太空遊戲 Part 6：結束與重來
|
||||
|
||||
## 課前測驗
|
||||
|
||||
[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=zh_tw)
|
||||
|
||||
有許多方式可以表達遊戲中的*結束狀態*。這都取決於你這位遊戲開發者，定義遊戲結束的理由。假設我們討論這款已經開發許久的太空遊戲，以下是遊戲結束的理由：
|
||||
|
||||
- **`N` 艘敵軍艦艇被擊毀**：如果你想將遊戲分成許多關卡，一種常見的方式是將每一關的破關門檻，定為擊毀 `N` 艘敵軍艦艇。
|
||||
- **你的船艦已被擊毀**：一定有遊戲，只要你的船艦被擊毀一次時，便判定你輸了這場遊戲。另一種可行概念是加入生命值系統。每次你的船艦被擊毀時，會扣除一條生命。一但你損失了所有性命，你便輸了這場遊戲。
|
||||
- **你已經取得 `N` 點分數**：另一種常見的結束狀態為分數門檻。取得分數的機制取決在你，常見的條件為摧毀敵艦、或是收集敵艦所*掉落*的道具。
|
||||
- **完成關卡**：這或許會涉及到許多種狀態，好比說： `X` 艘艦艇已被擊毀、已取得 `Y` 點分數或是收集特定的道具。
|
||||
|
||||
## 重新遊戲
|
||||
|
||||
如果玩家很享受你的遊戲，他們會想再重新遊玩一次。一旦因任何原因結束遊戲時，你應該要提供重新遊戲的方法。
|
||||
|
||||
✅ 想想看，什麼條件下會結束一款遊戲，而它們又是如何提示你重新遊玩。
|
||||
|
||||
## 建立目標
|
||||
|
||||
你需要為你的遊戲新增這些規則：
|
||||
|
||||
1. **贏得遊戲**。 一旦所有敵軍艦艇被擊毀時，你便贏得這場遊戲。請額外地顯示勝利訊息。
|
||||
1. **重新開始**。 一旦你損失了所有性命，或是贏得了勝利，你應該提供方法來重新遊戲。記住！你需要重新初始化你的遊戲，所有遊戲的歷史紀錄會被移除。
|
||||
|
||||
## 建議步驟
|
||||
|
||||
在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
開始 `your_work` 資料夾中的專案，輸入：
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
這會啟動 HTTP 伺服器並發布網址 `http://localhost:5000`。開啟瀏覽器並輸入該網址。你的遊戲應該能被遊玩。
|
||||
|
||||
> 要點： 要避免在 Visual Studio Code 裡出現警告訊息，編輯函式 `window.onload` 以 is，而非 let 的方式呼叫 `gameLoopId`；並在檔案正上方獨立地宣告 gameLoopId： `let gameLoopId;`。
|
||||
|
||||
### 加入程式碼
|
||||
|
||||
1. **追蹤結束狀態**。 新增程式碼來追蹤敵人的數量，利用下列函式判斷英雄艦艇是否被擊毀：
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
1. **加入訊息處理器**。 編輯 `eventEmitter` 以處理這些狀態：
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // 遊戲失敗，提前結束
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
1. **加入新的訊息**。 新增這些訊息到 Messages 常數中：
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
2. **加入重新開始的功能** 在按下特定按鈕後，程式會重新開始遊戲。
|
||||
|
||||
1. **監聽 `Enter` 按鈕之按壓**。 編輯視窗的 eventListener ，監聽按鍵的按壓：
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
1. **加入重新遊戲的訊息**。 加入這段訊息到 Messages 常數中：
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
1. **制定遊戲規則**。 編制下列的遊戲規則：
|
||||
|
||||
1. **玩家勝利條件**。 當所有敵軍艦艇被擊毀時，顯示勝利訊息。
|
||||
|
||||
1. 首先，建立函式 `displayMessage()`：
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
1. 建立函式 `endGame()`：
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// 設定延遲以確保所有圖像皆繪製完成
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
1. **重新遊戲的邏輯**。 當玩家損失所有的性命，或是贏下這場遊戲，顯示遊戲重來的提示。此外，在*重新遊玩*按鍵被按壓時，重新遊戲(你可以自己決定任一個鍵盤按鍵)。
|
||||
|
||||
1. 建立函式 `resetGame()`：
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. 在 `initGame()` 內呼叫 `eventEmitter` 來重新設定遊戲：
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
1. 在 EventEmitter 加入函式 `clear()`：
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
👽 💥 🚀 恭喜你，艦長！你的遊戲已經完成了！幹得好！ 🚀 💥 👽
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
加入遊戲音效！你能加入音效來提升遊戲品質嗎？或許在雷射擊中敵人，或是在英雄死亡、勝利時發出音效。看看這套[沙盒](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play)，了解如何使用 JavaScript 播放音效。
|
||||
|
||||
## 課後測驗
|
||||
|
||||
[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
你的功課是建立一款新的小遊戲。去探索一些有趣的遊戲，決定你想建造的遊戲類型。
|
||||
|
||||
## 作業
|
||||
|
||||
[建立一款遊戲](assignment.zh-tw.md)
|
||||
@@ -1,19 +0,0 @@
|
||||
# Crea un juego de muestra
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Intente crear un juego pequeño en el que practique en diferentes condiciones finales. Varía entre obtener una cantidad de puntos, el héroe pierde todas las vidas o todos los monstruos son derrotados. Construye algo simple como un juego de aventuras basado en consola. Utilice el siguiente flujo de juego como inspiración:
|
||||
|
||||
''
|
||||
Hero> Golpea con espada ancha: el orco recibe 3p de daño
|
||||
Orc> Golpes con garrote: el héroe recibe 2p de daño
|
||||
Hero> Patadas: el orco recibe 1p de daño
|
||||
Game> Orc es derrotado - Hero recoge 2 monedas
|
||||
Game> ****No más monstruos, has conquistado la fortaleza del mal****
|
||||
''
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | se presenta el juego completo | se presenta parcialmente el juego | juego parcial contiene errores |
|
||||
@@ -1,19 +0,0 @@
|
||||
# Développer un exemple de jeu
|
||||
|
||||
## Instructions
|
||||
|
||||
Essayez de créer un petit jeu où vous vous entraînez dans différentes conditions finales. Variez entre le fait d'obtenir un certain nombre de points, que le héros perde toutes les vies ou que tous les monstres soit vaincus. Construisez quelque chose de simple comme un jeu d'aventure sur console. Utilisez le flux de jeu ci-dessous comme source d'inspiration :
|
||||
|
||||
```
|
||||
Héros> Frappe avec une épée large - l'orc subit 3p de dégâts
|
||||
Orc> Frappe avec un club - le héros subit 2p de dégâts
|
||||
Héros> Donne un coups de pied - l'orc subit 1p de dégâts
|
||||
Jeu> L'orc est vaincu - le héros récupère 2 pièces
|
||||
Jeu> ****Plus de monstres, vous avez conquis la forteresse maléfique****
|
||||
```
|
||||
|
||||
## Rubrique
|
||||
|
||||
| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | le jeu complet est présenté | le jeu est partiellement présenté | le jeu partiel contient des bugs |
|
||||
@@ -1,19 +0,0 @@
|
||||
# एक नमूना खेल बनाएँ
|
||||
|
||||
## अनुदेश
|
||||
|
||||
एक छोटा गेम बनाने की कोशिश करें जहां आप विभिन्न अंत स्थितियों पर अभ्यास करते हैं। कई अंकों के बीच भिन्न, नायक सभी जीवन खो देता है या सभी राक्षसों को हराया जाता है। कंसोल आधारित साहसिक गेम की तरह कुछ सरल बनाएं। प्रेरणा के रूप में नीचे के खेल प्रवाह का उपयोग करें:
|
||||
|
||||
```
|
||||
Hero> Strikes with broadsword - orc takes 3p damage
|
||||
Orc> Hits with club - hero takes 2p damage
|
||||
Hero> Kicks - orc takes 1p damage
|
||||
Game> Orc is defeated - Hero collects 2 coins
|
||||
Game> ****No more monsters, you have conquered the evil fortress****
|
||||
```
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | -------------------- | ------------------------------------- | --------------------------- |
|
||||
| | पूरा खेल प्रस्तुत है | खेल आंशिक रूप से प्रस्तुत किया गया है | आंशिक खेल में बग्स होते हैं |
|
||||
@@ -1,19 +0,0 @@
|
||||
# Creare un Gioco di Esempio
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Provare a costruire un piccolo gioco in cui esercitarsi in diverse condizioni di fine. Variare tra ottenere un numero di punti, l'eroe perde tutte le vite o tutti i mostri vengono sconfitti. Costruire qualcosa di semplice come un gioco di avventura basato su console. Usare il seguente flusso di gioco come ispirazione:
|
||||
|
||||
```
|
||||
Eroe> Colpisce con lo spadone - l'orco riceve 3 punti di danno
|
||||
Orco> Colpisce con la mazza - l'eroe riceve 2 punti di danno
|
||||
Eroe> Calcia - l'orco takes 1 punto di danno
|
||||
Gioco> l'orco è sconfitto - L'eroe guadagna 2 monete
|
||||
Gioco> ****Non ci sono più mostri, la fortezza del male è stata conquistata****
|
||||
```
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | Viene presentato un gioco completo | Il gioco è presentato parzialmente | il gioco parziale contiene bug |
|
||||
@@ -1,19 +0,0 @@
|
||||
# サンプルゲームを作る
|
||||
|
||||
## インストラクション
|
||||
|
||||
異なる終了条件で練習する小さなゲームを構築してみてください。ポイントの数を取得する間に変化し、主人公はすべてのライフを失うか、またはすべてのモンスターが退治されてしています。コンソールベースのアドベンチャーゲームのようなシンプルなものを作ってみてください。インスピレーションとして以下のゲームの流れを使用してください。
|
||||
|
||||
```
|
||||
Hero> Strikes with broadsword - orc takes 3p damage
|
||||
Orc> Hits with club - hero takes 2p damage
|
||||
Hero> Kicks - orc takes 1p damage
|
||||
Game> Orc is defeated - Hero collects 2 coins
|
||||
Game> ****No more monsters, you have conquered the evil fortress****
|
||||
```
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | フルゲームが提示されています | 部分的に提示されたゲーム | 部分的なゲームにはバグが含まれています |
|
||||
@@ -1,19 +0,0 @@
|
||||
# 샘플 게임 만들기
|
||||
|
||||
## 설명
|
||||
|
||||
게임이 끝나는 다양한 조건을 연습할 수 있는 작은 게임을 만들어 봅시다. 점수를 얼마나 얻어야 하는지에 따라 주인공이 목숨을 다 잃거나 모든 몬스터들이 패배합니다. 콘솔 기반 어드벤처 게임과 같은 간단한 것을 만들어봅시다. 아래 예시를 참고해서 영감을 얻어 보세요.
|
||||
|
||||
```
|
||||
영웅> 양날검 휘두르기 - 오크는 3포인트의 데미지를 입는다.
|
||||
오크> 클럽 휘두르기 - 영웅은 2포인트의 데미지를 입는다.
|
||||
영웅> 발차기 - 오크는 1포인트의 데미지를 입는다.
|
||||
게임> 오크가 지는 경우 - 영웅은 2코인을 얻는다.
|
||||
게임> ****해치울 몬스터가 더 이상 없으면 당신은 악마의 요새를 정복한 것입니다****
|
||||
```
|
||||
|
||||
## 평가 기준
|
||||
|
||||
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||
--- | --- | --- | ---
|
||||
| 완성도 있는 게임을 만든 경우 | 부분적인 게임을 구현한 경우 | 게임에 일부 버그가 있는 경우
|
||||
@@ -1,19 +0,0 @@
|
||||
# Bina Contoh Permainan
|
||||
|
||||
## Arahan
|
||||
|
||||
Cuba buat permainan kecil di mana anda berlatih dengan keadaan akhir yang berbeza. Berbeza antara mendapatkan sejumlah mata, wira kehilangan semua nyawa atau semua raksasa dikalahkan. Bina sesuatu yang mudah seperti permainan pengembaraan berasaskan konsol. Gunakan aliran permainan di bawah sebagai inspirasi:
|
||||
|
||||
```
|
||||
Wira> Serangan dengan pedang lebar - orc mengalami kerosakan 3p
|
||||
Orc> Hits with club - wira mengalami kerosakan 2p
|
||||
Wira> Tendangan - orc mengalami kerosakan 1p
|
||||
Permainan> Orc dikalahkan - Hero mengumpulkan 2 syiling
|
||||
Permainan> ****Tidak ada lagi raksasa, anda telah menakluki kubu jahat****
|
||||
```
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Mencukupi | Usaha Lagi |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | permainan penuh dipersembahkan| permainan dipersembahkan sebahagiannya | permainan separa mengandungi pepijat |
|
||||
@@ -1,19 +0,0 @@
|
||||
# Bouw een voorbeeldspel
|
||||
|
||||
## Instructies
|
||||
|
||||
Probeer een klein spel te bouwen waarin u oefent op verschillende eindcondities. Varieer tussen het behalen van een aantal punten, de held verliest alle levens of alle monsters zijn verslagen. Bouw iets eenvoudigs, zoals een console-gebaseerd avonturenspel. Gebruik de onderstaande spelstroom als inspiratie:
|
||||
|
||||
```
|
||||
Held> slaat aan met slagzwaard - orc krijgt 3p schade
|
||||
Orc> Slaat met club - held krijgt 2p schade
|
||||
Held> Schopt - orc krijgt 1p schade
|
||||
Game> Orc is verslagen - Held verzamelt 2 munten
|
||||
Game> ****Geen monsters meer, u heeft het kwaadaardige fort veroverd****
|
||||
```
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
|
||||
@@ -1,19 +0,0 @@
|
||||
# 建立一款遊戲
|
||||
|
||||
## 簡介
|
||||
|
||||
試著建立一款小遊戲，實際應用不同的終止狀態。做一些變化，如取得的分數、英雄血量或是被擊敗的怪物。可以是很簡單的類型，例如文字冒險遊戲。請參考下列的遊戲流程作為啟發：
|
||||
|
||||
```
|
||||
英雄> 使用寶劍攻擊 - 獸人受到了 3 點傷害
|
||||
獸人> 使用棍棒攻擊 - 英雄受到了 2 點傷害
|
||||
英雄> 踢擊 - 獸人受到了 1 點傷害
|
||||
遊戲訊息> 獸人已被擊敗 - 英雄取得 2 枚硬幣
|
||||
遊戲訊息> ****已殲滅所有怪獸，你已佔領了邪惡堡壘****
|
||||
```
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | ---------------- | ---------------- | ------------ |
|
||||
| | 呈現出完整的遊戲 | 遊戲提供部分內容 | 遊戲存在問題 |
|
||||
Reference in New Issue
Block a user