You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
18 KiB
236 lines
18 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "05be6c37791668e3719c4fba94566367",
|
|
"translation_date": "2025-10-11T12:12:00+00:00",
|
|
"source_file": "6-space-game/6-end-condition/README.md",
|
|
"language_code": "ta"
|
|
}
|
|
-->
|
|
# விண்வெளி விளையாட்டு உருவாக்கம் பகுதி 6: முடிவு மற்றும் மீண்டும் தொடக்கம்
|
|
|
|
## முன்-வகுப்பு வினாடி வினா
|
|
|
|
[முன்-வகுப்பு வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/39)
|
|
|
|
ஒரு விளையாட்டில் *முடிவு நிலை* (end condition) என்பதை வெளிப்படுத்த பல வழிகள் உள்ளன. விளையாட்டின் உருவாக்குனராக நீங்கள் விளையாட்டின் முடிவை எதற்காக முடிவடைகிறது என்று தீர்மானிக்க வேண்டும். இதோ சில காரணங்கள், நீங்கள் இதுவரை உருவாக்கிய விண்வெளி விளையாட்டைப் பொருத்து:
|
|
|
|
- **`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-இல் எச்சரிக்கைகளை தவிர்க்க, `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. **புதிய செய்தி வகைகளைச் சேர்க்கவும்**. இந்த Messages-ஐ constants பொருளில் சேர்க்கவும்:
|
|
|
|
```javascript
|
|
GAME_END_LOSS: "GAME_END_LOSS",
|
|
GAME_END_WIN: "GAME_END_WIN",
|
|
```
|
|
|
|
2. **மீண்டும் தொடங்கும் குறியீடு**. தேர்ந்தெடுக்கப்பட்ட பொத்தானை அழுத்தும்போது விளையாட்டை மீண்டும் தொடங்கும் குறியீட்டைச் சேர்க்கவும்.
|
|
|
|
1. **கீபோர்டு அழுத்தம் `Enter` ஐ கேட்கவும்**. உங்கள் window-இன் eventListener ஐ இந்த அழுத்தத்தை கேட்க திருத்தவும்:
|
|
|
|
```javascript
|
|
else if(evt.key === "Enter") {
|
|
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
|
}
|
|
```
|
|
|
|
1. **மீண்டும் தொடங்கும் செய்தி சேர்க்கவும்**. இந்த Message-ஐ உங்கள் Messages constant-இல் சேர்க்கவும்:
|
|
|
|
```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 = {};
|
|
}
|
|
```
|
|
|
|
👽 💥 🚀 வாழ்த்துக்கள், கேப்டன்! உங்கள் விளையாட்டு முடிந்தது! நன்றாக செய்தீர்கள்! 🚀 💥 👽
|
|
|
|
---
|
|
|
|
## 🚀 சவால்
|
|
|
|
ஒலி சேர்க்கவும்! உங்கள் விளையாட்டை மேம்படுத்த ஒரு ஒலியைச் சேர்க்க முடியுமா? உதாரணமாக, லேசர் தாக்கம், ஹீரோ இறந்தது அல்லது வென்றது போன்ற சமயங்களில் ஒலி சேர்க்கவும். JavaScript-ஐப் பயன்படுத்தி ஒலியை விளையாட எப்படி என்பதை அறிய இந்த [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) ஐ பாருங்கள்.
|
|
|
|
## வகுப்புக்குப் பின் வினாடி வினா
|
|
|
|
[வகுப்புக்குப் பின் வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/40)
|
|
|
|
## மதிப்பீடு மற்றும் சுயபயிற்சி
|
|
|
|
உங்கள் பணியாக ஒரு புதிய மாதிரி விளையாட்டை உருவாக்க வேண்டும், எனவே நீங்கள் உருவாக்கக்கூடிய விளையாட்டின் வகையைப் பார்க்க சில சுவாரஸ்யமான விளையாட்டுகளை ஆராயவும்.
|
|
|
|
## பணிக்கூற்று
|
|
|
|
[ஒரு மாதிரி விளையாட்டை உருவாக்கவும்](assignment.md)
|
|
|
|
---
|
|
|
|
**குறிப்பு**:
|
|
இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியக்க மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல. |