<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "d642759cf1542f554871f74956a59af9",
  "translation_date": "2025-10-23T21:21:31+00:00",
  "source_file": "6-space-game/5-keeping-score/README.md",
  "language_code": "th"
}
-->
# สร้างเกมอวกาศ ตอนที่ 5: คะแนนและชีวิต

## แบบทดสอบก่อนเรียน

[แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/37)

พร้อมที่จะทำให้เกมอวกาศของคุณรู้สึกเหมือนเกมจริงหรือยัง? มาเพิ่มระบบคะแนนและการจัดการชีวิตกัน - กลไกหลักที่เปลี่ยนเกมอาร์เคดยุคแรกอย่าง Space Invaders จากการสาธิตธรรมดาให้กลายเป็นความบันเทิงที่น่าติดใจ นี่คือจุดที่เกมของคุณจะกลายเป็นเกมที่เล่นได้จริง

## การแสดงข้อความบนหน้าจอ - เสียงของเกมคุณ

เพื่อแสดงคะแนนของคุณ เราต้องเรียนรู้วิธีการแสดงข้อความบน canvas โดยใช้วิธี `fillText()` ซึ่งเป็นเครื่องมือหลักของคุณ - เป็นเทคนิคเดียวกับที่ใช้ในเกมอาร์เคดคลาสสิกเพื่อแสดงคะแนนและข้อมูลสถานะ

คุณมีการควบคุมเต็มรูปแบบเกี่ยวกับลักษณะของข้อความ:

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

✅ ลองศึกษาเพิ่มเติมเกี่ยวกับ [การเพิ่มข้อความลงใน canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - คุณอาจจะประหลาดใจกับความสร้างสรรค์ที่คุณสามารถทำได้กับฟอนต์และการออกแบบ!

## ชีวิต - มากกว่าตัวเลข

ในงานออกแบบเกม "ชีวิต" หมายถึงขอบเขตของความผิดพลาดที่ผู้เล่นสามารถทำได้ แนวคิดนี้มีมาตั้งแต่เครื่องพินบอลที่คุณจะได้ลูกบอลหลายลูกเพื่อเล่น ในเกมวิดีโอยุคแรกอย่าง Asteroids ชีวิตช่วยให้ผู้เล่นกล้าเสี่ยงและเรียนรู้จากความผิดพลาด

การแสดงผลภาพมีความสำคัญอย่างมาก - การแสดงไอคอนยานอวกาศแทนที่จะเป็นแค่ "Lives: 3" สร้างการรับรู้ทางภาพทันที คล้ายกับวิธีที่ตู้เกมอาร์เคดยุคแรกใช้ไอคอนเพื่อสื่อสารข้ามอุปสรรคทางภาษา

## สร้างระบบรางวัลของเกมคุณ

ตอนนี้เราจะเพิ่มระบบตอบสนองหลักที่ทำให้ผู้เล่นมีส่วนร่วม:

- **ระบบคะแนน**: ทุกครั้งที่ทำลายยานศัตรูจะได้รับ 100 คะแนน (ตัวเลขกลมๆ ทำให้ผู้เล่นคำนวณได้ง่ายขึ้น) คะแนนจะแสดงที่มุมล่างซ้าย
- **ตัวนับชีวิต**: ฮีโร่ของคุณเริ่มต้นด้วยสามชีวิต - มาตรฐานที่กำหนดโดยเกมอาร์เคดยุคแรกเพื่อสร้างสมดุลระหว่างความท้าทายและความสามารถในการเล่น ทุกการชนกับศัตรูจะเสียชีวิตหนึ่งครั้ง เราจะแสดงชีวิตที่เหลืออยู่ที่มุมล่างขวาโดยใช้ไอคอนยานอวกาศ ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.th.png)

## มาเริ่มสร้างกันเลย!

ก่อนอื่น ตั้งค่าพื้นที่ทำงานของคุณ ไปที่ไฟล์ในโฟลเดอร์ย่อย `your-work` คุณควรเห็นไฟล์เหล่านี้:

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

เพื่อทดสอบเกมของคุณ เริ่มเซิร์ฟเวอร์พัฒนาในโฟลเดอร์ `your_work`:

```bash
cd your-work
npm start
```

เซิร์ฟเวอร์นี้จะรันที่ `http://localhost:5000` เปิดที่อยู่นี้ในเบราว์เซอร์ของคุณเพื่อดูเกมของคุณ ทดสอบการควบคุมด้วยปุ่มลูกศรและลองยิงศัตรูเพื่อยืนยันว่าทุกอย่างทำงานได้

### ถึงเวลาลงมือเขียนโค้ด!

1. **นำทรัพย์สินภาพที่คุณต้องการมาใช้** คัดลอกไฟล์ `life.png` จากโฟลเดอร์ `solution/assets/` ไปยังโฟลเดอร์ `your-work` จากนั้นเพิ่ม lifeImg ลงในฟังก์ชัน window.onload ของคุณ:

    ```javascript
    lifeImg = await loadTexture("assets/life.png");
    ```

1. อย่าลืมเพิ่ม `lifeImg` ลงในรายการทรัพย์สินของคุณ:

    ```javascript
    let heroImg,
    ...
    lifeImg,
    ...
    eventEmitter = new EventEmitter();
    ```
  
2. **ตั้งค่าตัวแปรเกมของคุณ** เพิ่มโค้ดเพื่อติดตามคะแนนรวมของคุณ (เริ่มต้นที่ 0) และชีวิตที่เหลืออยู่ (เริ่มต้นที่ 3) เราจะแสดงสิ่งเหล่านี้บนหน้าจอเพื่อให้ผู้เล่นรู้สถานะของตนเองเสมอ

3. **เพิ่มการตรวจจับการชนกัน** ขยายฟังก์ชัน `updateGameObjects()` ของคุณเพื่อตรวจจับเมื่อศัตรูชนกับฮีโร่ของคุณ:

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

4. **เพิ่มการติดตามชีวิตและคะแนนให้กับฮีโร่ของคุณ** 
   1. **เริ่มต้นตัวนับ** ใต้ `this.cooldown = 0` ในคลาส `Hero` ของคุณ ตั้งค่าชีวิตและคะแนน:

        ```javascript
        this.life = 3;
        this.points = 0;
        ```

   1. **แสดงค่าต่างๆ ให้ผู้เล่นเห็น** สร้างฟังก์ชันเพื่อแสดงค่าต่างๆ บนหน้าจอ:

        ```javascript
        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);
        }

        ```

   1. **เชื่อมโยงทุกอย่างเข้ากับลูปเกมของคุณ** เพิ่มฟังก์ชันเหล่านี้ลงในฟังก์ชัน window.onload ของคุณหลังจาก `updateGameObjects()`:

        ```javascript
        drawPoints();
        drawLife();
        ```

1. **เพิ่มผลกระทบและรางวัลในเกม** ตอนนี้เราจะเพิ่มระบบตอบสนองที่ทำให้การกระทำของผู้เล่นมีความหมาย:

   1. **การชนกันทำให้เสียชีวิต** ทุกครั้งที่ฮีโร่ของคุณชนกับศัตรู คุณควรเสียชีวิตหนึ่งครั้ง
   
      เพิ่มเมธอดนี้ลงในคลาส `Hero` ของคุณ:

        ```javascript
        decrementLife() {
          this.life--;
          if (this.life === 0) {
            this.dead = true;
          }
        }
        ```

   2. **การยิงศัตรูได้รับคะแนน** ทุกครั้งที่ยิงโดนจะได้รับ 100 คะแนน ซึ่งเป็นการตอบสนองเชิงบวกทันทีสำหรับการยิงที่แม่นยำ

      ขยายคลาส Hero ของคุณด้วยเมธอดเพิ่มคะแนนนี้:
    
        ```javascript
          incrementPoints() {
            this.points += 100;
          }
        ```

        ตอนนี้เชื่อมโยงฟังก์ชันเหล่านี้กับเหตุการณ์การชนกัน:

        ```javascript
        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? ลองสำรวจดู - คุณอาจจะทึ่งกับสิ่งที่เป็นไปได้!

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

เกมของคุณตอนนี้มีกลไกสำคัญที่ทำให้เกมอาร์เคดยุคแรกน่าดึงดูด - เป้าหมายที่ชัดเจน การตอบสนองทันที และผลกระทบที่มีความหมายต่อการกระทำของผู้เล่น

---

## GitHub Copilot Agent Challenge 🚀

ใช้โหมด Agent เพื่อทำภารกิจต่อไปนี้:

**คำอธิบาย:** เพิ่มระบบคะแนนของเกมอวกาศโดยการสร้างฟีเจอร์คะแนนสูงสุดที่มีการจัดเก็บแบบถาวรและกลไกการให้คะแนนโบนัส

**คำสั่ง:** สร้างระบบคะแนนสูงสุดที่บันทึกคะแนนที่ดีที่สุดของผู้เล่นลงใน localStorage เพิ่มคะแนนโบนัสสำหรับการฆ่าศัตรูต่อเนื่อง (ระบบคอมโบ) และเพิ่มค่าคะแนนที่แตกต่างกันสำหรับศัตรูแต่ละประเภท รวมถึงตัวบ่งชี้ภาพเมื่อผู้เล่นทำคะแนนสูงสุดใหม่ และแสดงคะแนนสูงสุดปัจจุบันบนหน้าจอเกม

## 🚀 ความท้าทาย

ตอนนี้คุณมีเกมที่ใช้งานได้พร้อมระบบคะแนนและชีวิต ลองพิจารณาว่าฟีเจอร์เพิ่มเติมใดที่อาจช่วยเพิ่มประสบการณ์ของผู้เล่น

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

[แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/38)

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

อยากสำรวจเพิ่มเติม? ศึกษาแนวทางต่างๆ ในการสร้างระบบคะแนนและชีวิตในเกม มีเอนจินเกมที่น่าสนใจอย่าง [PlayFab](https://playfab.com) ที่จัดการคะแนน กระดานผู้นำ และการพัฒนาผู้เล่น การรวมสิ่งเหล่านี้เข้ากับเกมของคุณจะช่วยยกระดับเกมไปอีกขั้นได้อย่างไร?

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

[สร้างเกมคะแนน](assignment.md)

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้