History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	4 weeks ago
your-work	🌐 Update translations via Co-op Translator	4 weeks ago
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

สร้างเกมอวกาศ ตอนที่ 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 Server ที่ที่อยู่ http://localhost:5000 เปิดเบราว์เซอร์และใส่ที่อยู่นั้น ตอนนี้คุณควรเห็นฮีโร่และศัตรูทั้งหมด และเมื่อคุณกดลูกศรซ้ายและขวา ฮีโร่จะเคลื่อนที่และสามารถยิงศัตรูได้

เพิ่มโค้ด

คัดลอกทรัพยากรที่จำเป็น จากโฟลเดอร์ 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. กำหนดค่าเริ่มต้นให้ตัวแปร ใต้ this.cooldown = 0 ในคลาส Hero ตั้งค่าชีวิตและคะแนน:
```
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. เพิ่มเมธอดลงใน Game loop ตรวจสอบให้แน่ใจว่าคุณเพิ่มฟังก์ชันเหล่านี้ลงในฟังก์ชัน window.onload ใต้ updateGameObjects():
```
drawPoints();
drawLife();
```
กำหนดกฎของเกม กำหนดกฎของเกมดังนี้:
1. ทุกครั้งที่ฮีโร่ชนกับศัตรู ลดจำนวนชีวิตลงหนึ่ง
  
  ขยายคลาส Hero เพื่อทำการลดชีวิต:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. ทุกครั้งที่เลเซอร์ชนศัตรู เพิ่มคะแนนเกม 100 คะแนน
  
  ขยายคลาส Hero เพื่อเพิ่มคะแนน:
```
  incrementPoints() {
    this.points += 100;
  }
```
  เพิ่มฟังก์ชันเหล่านี้ลงใน Collision Event Emitters:
```
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 เกมเหล่านี้มีลักษณะร่วมกันอย่างไร?

เมื่อคุณทำงานนี้เสร็จ คุณควรเห็นยานชีวิตเล็ก ๆ ที่มุมล่างขวา คะแนนที่มุมล่างซ้าย และคุณควรเห็นจำนวนชีวิตลดลงเมื่อชนกับศัตรู และคะแนนเพิ่มขึ้นเมื่อยิงศัตรู ยอดเยี่ยม! เกมของคุณใกล้จะเสร็จสมบูรณ์แล้ว

🚀 ความท้าทาย

โค้ดของคุณใกล้จะเสร็จสมบูรณ์แล้ว คุณมองเห็นขั้นตอนต่อไปของคุณหรือไม่?

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

ค้นคว้าวิธีการเพิ่มและลดคะแนนเกมและชีวิต มีเอนจินเกมที่น่าสนใจ เช่น PlayFab การใช้เอนจินเหล่านี้จะช่วยเพิ่มประสิทธิภาพให้เกมของคุณได้อย่างไร?

งานที่ได้รับมอบหมาย

สร้างเกมที่มีการนับคะแนน

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้องมากที่สุด แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้