15 KiB

Raw Blame History

விண்வெளி விளையாட்டு உருவாக்கம் பகுதி 5: மதிப்பெண்கள் மற்றும் உயிர்கள்

முன்-வகுப்பு வினாடி வினா

இந்த பாடத்தில், நீங்கள் ஒரு விளையாட்டில் மதிப்பெண்களை சேர்ப்பது மற்றும் உயிர்களை கணக்கிடுவது எப்படி என்பதை கற்றுக்கொள்வீர்கள்.

திரையில் உரை வரையுங்கள்

விளையாட்டு மதிப்பெண்களை திரையில் காட்ட, நீங்கள் உரையை திரையில் எவ்வாறு வைக்க வேண்டும் என்பதை அறிய வேண்டும். இதற்கான பதில் fillText() முறைமையை canvas பொருளில் பயன்படுத்துவது. மேலும், நீங்கள் எந்த எழுத்துருவை பயன்படுத்த வேண்டும், உரையின் நிறம் மற்றும் அதன் சீரமைப்பு (இடது, வலது, மையம்) போன்றவற்றை கட்டுப்படுத்தலாம். கீழே திரையில் சில உரைகளை வரையும் குறியீடு உள்ளது.

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

✅ Canvas-ல் உரையை சேர்ப்பது எப்படி பற்றி மேலும் படிக்கவும், உங்கள் உரையை மேலும் அழகாக மாற்ற முயற்சிக்கவும்!

உயிர்கள், ஒரு விளையாட்டு கருத்தாக

விளையாட்டில் உயிர்கள் என்பது ஒரு எண் மட்டுமே. விண்வெளி விளையாட்டின் சூழலில், உங்கள் கப்பல் சேதமடைந்தால், ஒரு உயிர் குறைக்கப்படும். இதை எண் மூலம் காட்டுவதற்கு பதிலாக, சிறிய கப்பல்கள் அல்லது இதயங்கள் போன்ற ஒரு கிராபிக்ஸ் மூலம் காட்டுவது நல்லது.

என்ன உருவாக்க வேண்டும்

உங்கள் விளையாட்டில் பின்வருவனவற்றை சேர்க்கவும்:

விளையாட்டு மதிப்பெண்: ஒவ்வொரு எதிரி கப்பலும் அழிக்கப்படும் போது, ஹீரோவுக்கு சில புள்ளிகள் வழங்கப்பட வேண்டும். ஒவ்வொரு கப்பலுக்கும் 100 புள்ளிகள் வழங்க பரிந்துரைக்கிறோம். விளையாட்டு மதிப்பெண் இடது கீழே காட்டப்பட வேண்டும்.
உயிர்கள்: உங்கள் கப்பலுக்கு மூன்று உயிர்கள் உள்ளன. ஒவ்வொரு எதிரி கப்பலும் உங்களுடன் மோதும் போது ஒரு உயிர் இழக்கப்படும். உயிர் மதிப்பெண் வலது கீழே காட்டப்பட வேண்டும், இது பின்வரும் கிராபிக்ஸ் மூலம் உருவாக்கப்படும் .

பரிந்துரைக்கப்பட்ட படிகள்

your-work துணை கோப்பகத்தில் உங்களுக்கு உருவாக்கப்பட்ட கோப்புகளை கண்டறியவும். இது பின்வருவனவற்றை கொண்டிருக்க வேண்டும்:

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

your_work கோப்பகத்தில் உங்கள் திட்டத்தை தொடங்க, கீழே உள்ளதை டைப் செய்யவும்:

cd your-work
npm start

மேலே உள்ளது http://localhost:5000 என்ற முகவரியில் HTTP சர்வரை தொடங்கும். ஒரு உலாவியில் அந்த முகவரியை உள்ளிடவும், தற்போது ஹீரோ மற்றும் அனைத்து எதிரிகளை காணலாம், மேலும் உங்கள் இடது மற்றும் வலது அம்பு விசைகளை அழுத்தும்போது, ஹீரோ நகர்ந்து எதிரிகளை சுட முடியும்.

குறியீடு சேர்க்கவும்

தேவையான சொத்துகளை நகலெடுக்கவும். solution/assets/ கோப்பகத்திலிருந்து your-work கோப்பகத்திற்குள் life.png சொத்தை சேர்க்கவும். lifeImg ஐ window.onload செயல்பாட்டில் சேர்க்கவும்:
```
lifeImg = await loadTexture("assets/life.png");
```
lifeImg ஐ சொத்துகளின் பட்டியலில் சேர்க்கவும்:
```
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
மாறிகள் சேர்க்கவும். உங்கள் மொத்த மதிப்பெண் (0) மற்றும் மீதமுள்ள உயிர்கள் (3) ஆகியவற்றை பிரதிநிதித்துவப்படுத்தும் குறியீட்டை சேர்க்கவும், இந்த மதிப்பெண்களை திரையில் காட்டவும்.

updateGameObjects() செயல்பாட்டை விரிவாக்கவும். எதிரி மோதல்களை கையாள updateGameObjects() செயல்பாட்டை விரிவாக்கவும்:

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

உயிர்கள் மற்றும் புள்ளிகள் சேர்க்கவும்.
1. மாறிகளை தொடங்கவும். Hero வகுப்பில் this.cooldown = 0 கீழ், உயிர்கள் மற்றும் புள்ளிகளை அமைக்கவும்:
```
this.life = 3;
this.points = 0;
```
2. மாறிகளை திரையில் வரையுங்கள். இந்த மதிப்புகளை திரையில் வரையுங்கள்:
```
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);
}
```
3. விளையாட்டு மடக்கவழியில் முறைகளைச் சேர்க்கவும். இந்த செயல்பாடுகளை updateGameObjects() கீழ் window.onload செயல்பாட்டில் சேர்க்கவும்:
```
drawPoints();
drawLife();
```
விளையாட்டு விதிகளை செயல்படுத்தவும். பின்வரும் விளையாட்டு விதிகளை செயல்படுத்தவும்:
1. ஒவ்வொரு ஹீரோ மற்றும் எதிரி மோதலுக்கும், ஒரு உயிர் குறைக்கவும்.
  
  Hero வகுப்பை விரிவாக்கி இந்த குறைப்பைச் செய்யவும்:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. ஒவ்வொரு லேசர் எதிரியை தாக்கும் போது, விளையாட்டு மதிப்பெண்களை 100 புள்ளிகளால் அதிகரிக்கவும்.
  
  Hero வகுப்பை விரிவாக்கி இந்த அதிகரிப்பைச் செய்யவும்:
```
  incrementPoints() {
    this.points += 100;
  }
```
  இந்த செயல்பாடுகளை உங்கள் மோதல் நிகழ்வு எமிட்டர்களில் சேர்க்கவும்:
```
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();
});
```

✅ JavaScript/Canvas-ஐப் பயன்படுத்தி உருவாக்கப்பட்ட பிற விளையாட்டுகளை ஆராயுங்கள். அவற்றின் பொதுவான அம்சங்கள் என்ன?

இந்த வேலை முடிவடையும் போது, வலது கீழே சிறிய 'life' கப்பல்களை, இடது கீழே புள்ளிகளை காணலாம், மேலும் எதிரிகளுடன் மோதும் போது உங்கள் உயிர் எண்ணிக்கை குறையும், எதிரிகளை சுடும் போது உங்கள் புள்ளிகள் அதிகரிக்கும். அருமை! உங்கள் விளையாட்டு கிட்டத்தட்ட முடிந்துவிட்டது.

🚀 சவால்

உங்கள் குறியீடு கிட்டத்தட்ட முடிந்துவிட்டது. உங்கள் அடுத்த படிகளை நீங்கள் கற்பனை செய்ய முடியுமா?

வகுப்பு முடிவு வினாடி வினா

மதிப்பீடு & சுயபடிப்பு

விளையாட்டு மதிப்பெண்கள் மற்றும் உயிர்களை அதிகரிக்க மற்றும் குறைக்க சில வழிகளை ஆராயுங்கள். PlayFab போன்ற சில 흥미로운 விளையாட்டு இயந்திரங்கள் உள்ளன. இவற்றை பயன்படுத்துவது உங்கள் விளையாட்டை எவ்வாறு மேம்படுத்தும்?

பணிக்கூற்று

மதிப்பெண் விளையாட்டு உருவாக்கவும்

குறிப்பு:
இந்த ஆவணம் Co-op Translator என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கிறோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.

15 KiB Raw Blame History