19 KiB

Raw Blame History

สร้างเกมอวกาศ ตอนที่ 4: เพิ่มเลเซอร์และตรวจจับการชน

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

ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการยิงเลเซอร์ด้วย JavaScript! เราจะเพิ่มสองสิ่งลงในเกมของเรา:

เลเซอร์: เลเซอร์นี้จะถูกยิงจากยานของฮีโร่และเคลื่อนที่ขึ้นไปในแนวตั้ง
การตรวจจับการชน: เป็นส่วนหนึ่งของการเพิ่มความสามารถในการ ยิง เราจะเพิ่มกฎของเกมที่น่าสนใจ:
- เลเซอร์ชนศัตรู: ศัตรูจะตายเมื่อถูกเลเซอร์
- เลเซอร์ชนขอบบนของหน้าจอ: เลเซอร์จะถูกทำลายเมื่อชนขอบบนของหน้าจอ
- ศัตรูชนฮีโร่: ศัตรูและฮีโร่จะถูกทำลายเมื่อชนกัน
- ศัตรูชนขอบล่างของหน้าจอ: ศัตรูและฮีโร่จะถูกทำลายเมื่อศัตรูชนขอบล่างของหน้าจอ

สรุปคือ คุณ -- ฮีโร่ -- ต้องยิงศัตรูทั้งหมดด้วยเลเซอร์ก่อนที่พวกมันจะเคลื่อนที่ไปถึงขอบล่างของหน้าจอ

✅ ลองค้นคว้าเกี่ยวกับเกมคอมพิวเตอร์เกมแรกที่เคยถูกสร้างขึ้น มันมีฟังก์ชันอะไรบ้าง?

มาร่วมเป็นฮีโร่กันเถอะ!

การตรวจจับการชน

เราจะตรวจจับการชนได้อย่างไร? เราต้องคิดว่าออบเจ็กต์ในเกมของเราเป็นรูปสี่เหลี่ยมที่เคลื่อนที่ไปมา ทำไมถึงเป็นเช่นนั้น? เพราะภาพที่ใช้ในการวาดออบเจ็กต์ในเกมเป็นรูปสี่เหลี่ยม: มันมี x, y, width และ height

ถ้ารูปสี่เหลี่ยมสองรูป เช่น ฮีโร่และศัตรู ตัดกัน นั่นคือการชน สิ่งที่ควรเกิดขึ้นหลังจากนั้นขึ้นอยู่กับกฎของเกม ในการสร้างการตรวจจับการชน คุณจำเป็นต้องมีสิ่งต่อไปนี้:

วิธีการสร้างตัวแทนรูปสี่เหลี่ยมของออบเจ็กต์ในเกม เช่นนี้:

rectFromGameObject() {
  return {
    top: this.y,
    left: this.x,
    bottom: this.y + this.height,
    right: this.x + this.width
  }
}

ฟังก์ชันเปรียบเทียบ ฟังก์ชันนี้อาจมีลักษณะดังนี้:

function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}

เราจะทำลายสิ่งต่าง ๆ ได้อย่างไร

ในการทำลายสิ่งต่าง ๆ ในเกม คุณต้องแจ้งให้เกมทราบว่าไม่ควรวาดออบเจ็กต์นี้อีกในลูปเกมที่ทำงานในช่วงเวลาที่กำหนด วิธีหนึ่งคือการทำเครื่องหมายออบเจ็กต์ในเกมว่า ตาย เมื่อมีบางสิ่งเกิดขึ้น เช่นนี้:

// collision happened
enemy.dead = true

จากนั้นคุณสามารถจัดการกับออบเจ็กต์ที่ ตาย ก่อนที่จะวาดหน้าจอใหม่ เช่นนี้:

gameObjects = gameObject.filter(go => !go.dead);

เราจะยิงเลเซอร์ได้อย่างไร

การยิงเลเซอร์หมายถึงการตอบสนองต่อเหตุการณ์กดปุ่มและสร้างออบเจ็กต์ที่เคลื่อนที่ในทิศทางหนึ่ง ดังนั้นเราจำเป็นต้องดำเนินการตามขั้นตอนต่อไปนี้:

สร้างออบเจ็กต์เลเซอร์: จากด้านบนของยานฮีโร่ ซึ่งเมื่อถูกสร้างขึ้นจะเริ่มเคลื่อนที่ขึ้นไปยังขอบบนของหน้าจอ
เชื่อมโค้ดกับเหตุการณ์กดปุ่ม: เราต้องเลือกปุ่มบนคีย์บอร์ดที่แทนการยิงเลเซอร์ของผู้เล่น
สร้างออบเจ็กต์ในเกมที่ดูเหมือนเลเซอร์ เมื่อกดปุ่ม

การตั้งค่าคูลดาวน์สำหรับเลเซอร์

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

class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time)
  }
}

class Weapon {
  constructor {
  }
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // produce a laser
      this.cooldown = new Cooldown(500);
    } else {
      // do nothing - it hasn't cooled down yet.
    }
  }
}

✅ อ้างอิงบทเรียนที่ 1 ในซีรีส์เกมอวกาศเพื่อทบทวนเกี่ยวกับ คูลดาวน์

สิ่งที่ต้องสร้าง

คุณจะใช้โค้ดที่มีอยู่ (ซึ่งคุณควรทำความสะอาดและปรับปรุงแล้ว) จากบทเรียนก่อนหน้า และขยายมันออกไป คุณสามารถเริ่มต้นด้วยโค้ดจากตอนที่ II หรือใช้โค้ดที่ Part III- starter

เคล็ดลับ: เลเซอร์ที่คุณจะทำงานด้วยนั้นอยู่ในโฟลเดอร์ assets ของคุณแล้วและถูกอ้างอิงโดยโค้ดของคุณ

เพิ่มการตรวจจับการชน เมื่อเลเซอร์ชนกับบางสิ่ง กฎต่อไปนี้ควรนำมาใช้:
1. เลเซอร์ชนศัตรู: ศัตรูจะตายเมื่อถูกเลเซอร์
2. เลเซอร์ชนขอบบนของหน้าจอ: เลเซอร์จะถูกทำลายเมื่อชนขอบบนของหน้าจอ
3. ศัตรูชนฮีโร่: ศัตรูและฮีโร่จะถูกทำลายเมื่อชนกัน
4. ศัตรูชนขอบล่างของหน้าจอ: ศัตรูและฮีโร่จะถูกทำลายเมื่อศัตรูชนขอบล่างของหน้าจอ

ขั้นตอนที่แนะนำ

ค้นหาไฟล์ที่ถูกสร้างไว้ให้คุณในโฟลเดอร์ 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 เปิดเบราว์เซอร์และใส่ที่อยู่นั้น ตอนนี้มันควรแสดงฮีโร่และศัตรูทั้งหมด แต่ยังไม่มีอะไรเคลื่อนไหว - ยังไม่ถึงเวลา :).

เพิ่มโค้ด

ตั้งค่าตัวแทนรูปสี่เหลี่ยมของออบเจ็กต์ในเกม เพื่อจัดการการชน โค้ดด้านล่างช่วยให้คุณสร้างตัวแทนรูปสี่เหลี่ยมของ GameObject แก้ไขคลาส GameObject ของคุณเพื่อเพิ่มโค้ดนี้:
```
rectFromGameObject() {
    return {
      top: this.y,
      left: this.x,
      bottom: this.y + this.height,
      right: this.x + this.width,
    };
  }
```
เพิ่มโค้ดที่ตรวจสอบการชน นี่จะเป็นฟังก์ชันใหม่ที่ทดสอบว่ารูปสี่เหลี่ยมสองรูปตัดกันหรือไม่:
```
function intersectRect(r1, r2) {
  return !(
    r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top
  );
}
```

เพิ่มความสามารถในการยิงเลเซอร์

เพิ่มข้อความเหตุการณ์กดปุ่ม ปุ่ม space ควรสร้างเลเซอร์ที่อยู่เหนือยานฮีโร่ เพิ่มค่าคงที่สามตัวในออบเจ็กต์ Messages:
```
 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
 COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
 COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
```
จัดการปุ่ม space แก้ไขฟังก์ชัน window.addEventListener keyup เพื่อจัดการปุ่ม space:
```
  } else if(evt.keyCode === 32) {
    eventEmitter.emit(Messages.KEY_EVENT_SPACE);
  }
```
เพิ่ม listeners แก้ไขฟังก์ชัน initGame() เพื่อให้แน่ใจว่าฮีโร่สามารถยิงได้เมื่อกดปุ่ม space:
```
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 if (hero.canFire()) {
   hero.fire();
 }
```
และเพิ่มฟังก์ชัน eventEmitter.on() ใหม่เพื่อจัดการพฤติกรรมเมื่อศัตรูชนกับเลเซอร์:
```
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
  first.dead = true;
  second.dead = true;
})
```

เคลื่อนย้ายออบเจ็กต์ ให้แน่ใจว่าเลเซอร์เคลื่อนที่ไปยังขอบบนของหน้าจออย่างค่อยเป็นค่อยไป คุณจะสร้างคลาส Laser ใหม่ที่ขยาย GameObject เหมือนที่คุณเคยทำมาก่อน:

  class Laser extends GameObject {
  constructor(x, y) {
    super(x,y);
    (this.width = 9), (this.height = 33);
    this.type = 'Laser';
    this.img = laserImg;
    let id = setInterval(() => {
      if (this.y > 0) {
        this.y -= 15;
      } else {
        this.dead = true;
        clearInterval(id);
      }
    }, 100)
  }
}

จัดการการชน ใช้กฎการชนสำหรับเลเซอร์ เพิ่มฟังก์ชัน updateGameObjects() ที่ทดสอบออบเจ็กต์ที่ชนกัน:

function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter((go) => go.type === "Laser");
// laser hit something
  lasers.forEach((l) => {
    enemies.forEach((m) => {
      if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
        first: l,
        second: m,
      });
    }
   });
});

  gameObjects = gameObjects.filter(go => !go.dead);
}

อย่าลืมเพิ่ม updateGameObjects() ลงในลูปเกมของคุณใน window.onload

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

สุดท้าย แก้ไขคลาส Hero เพื่อให้สามารถตั้งค่าคูลดาวน์ได้:

class Hero extends GameObject {
 constructor(x, y) {
   super(x, y);
   (this.width = 99), (this.height = 75);
   this.type = "Hero";
   this.speed = { x: 0, y: 0 };
   this.cooldown = 0;
 }
 fire() {
   gameObjects.push(new Laser(this.x + 45, this.y - 10));
   this.cooldown = 500;

   let id = setInterval(() => {
     if (this.cooldown > 0) {
       this.cooldown -= 100;
     } else {
       clearInterval(id);
     }
   }, 200);
 }
 canFire() {
   return this.cooldown === 0;
 }
}

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

🚀 ความท้าทาย

เพิ่มเอฟเฟกต์ระเบิด! ลองดูที่ทรัพยากรเกมใน Space Art repo และลองเพิ่มเอฟเฟกต์ระเบิดเมื่อเลเซอร์ชนเอเลี่ยน

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

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

ทดลองปรับช่วงเวลาในเกมของคุณจนถึงตอนนี้ จะเกิดอะไรขึ้นเมื่อคุณเปลี่ยนมัน? อ่านเพิ่มเติมเกี่ยวกับ เหตุการณ์จับเวลาของ JavaScript

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

สำรวจการชน

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

19 KiB Raw Blame History