Web-Dev-For-Beginners/translations/pa/6-space-game/4-collision-detection/README.md

ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 4: ਲੇਜ਼ਰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਕਰੋ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼

ਇਸ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਮਦਦ ਨਾਲ ਲੇਜ਼ਰ ਚਲਾਉਣਾ ਸਿੱਖੋਗੇ! ਅਸੀਂ ਆਪਣੇ ਗੇਮ ਵਿੱਚ ਦੋ ਚੀਜ਼ਾਂ ਸ਼ਾਮਲ ਕਰਾਂਗੇ:

• ਇੱਕ ਲੇਜ਼ਰ: ਇਹ ਲੇਜ਼ਰ ਤੁਹਾਡੇ ਹੀਰੋ ਦੇ ਜਹਾਜ਼ ਤੋਂ ਚਲਾਈ ਜਾਂਦੀ ਹੈ ਅਤੇ ਸਿੱਧੀ ਉੱਪਰ ਵੱਲ ਜਾਂਦੀ ਹੈ
• ਟਕਰਾਅ ਦੀ ਪਛਾਣ, ਗੋਲੀ ਚਲਾਉਣ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਅਸੀਂ ਕੁਝ ਵਧੀਆ ਗੇਮ ਨਿਯਮ ਵੀ ਸ਼ਾਮਲ ਕਰਾਂਗੇ:
  • ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਮਾਰਦਾ ਹੈ: ਜੇ ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਲੱਗੇ ਤਾਂ ਉਹ ਮਰ ਜਾਂਦਾ ਹੈ
  • ਲੇਜ਼ਰ ਸਕਰੀਨ ਦੇ ਉੱਪਰ ਲੱਗਦਾ ਹੈ: ਜੇ ਲੇਜ਼ਰ ਸਕਰੀਨ ਦੇ ਉੱਪਰੀ ਹਿੱਸੇ ਨੂੰ ਲੱਗੇ ਤਾਂ ਉਹ ਨਸ਼ਟ ਹੋ ਜਾਂਦਾ ਹੈ
  • ਦੁਸ਼ਮਨ ਅਤੇ ਹੀਰੋ ਦੀ ਟਕਰ: ਜੇ ਦੁਸ਼ਮਨ ਅਤੇ ਹੀਰੋ ਇੱਕ ਦੂਜੇ ਨੂੰ ਲੱਗਦੇ ਹਨ ਤਾਂ ਦੋਵੇਂ ਨਸ਼ਟ ਹੋ ਜਾਂਦੇ ਹਨ
  • ਦੁਸ਼ਮਨ ਸਕਰੀਨ ਦੇ ਹੇਠਾਂ ਲੱਗਦਾ ਹੈ: ਜੇ ਦੁਸ਼ਮਨ ਸਕਰੀਨ ਦੇ ਹੇਠਾਂ ਲੱਗਦਾ ਹੈ ਤਾਂ ਦੁਸ਼ਮਨ ਅਤੇ ਹੀਰੋ ਦੋਵੇਂ ਨਸ਼ਟ ਹੋ ਜਾਂਦੇ ਹਨ

ਸਾਰ ਵਿੱਚ, ਤੁਸੀਂ -- ਹੀਰੋ -- ਨੂੰ ਸਾਰੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਲੇਜ਼ਰ ਨਾਲ ਮਾਰਨਾ ਹੈ ਜਦੋਂ ਤੱਕ ਉਹ ਸਕਰੀਨ ਦੇ ਹੇਠਾਂ ਨਹੀਂ ਪਹੁੰਚਦੇ।

✅ ਸਭ ਤੋਂ ਪਹਿਲਾ ਕਮਪਿਊਟਰ ਗੇਮ ਕਦੇ ਬਣਾਇਆ ਗਿਆ ਸੀ ਇਸ ਬਾਰੇ ਕੁਝ ਖੋਜ ਕਰੋ। ਇਸ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਕੀ ਸੀ?

ਆਓ ਇੱਕ ਹੀਰੋ ਬਣੀਏ!

ਟਕਰਾਅ ਦੀ ਪਛਾਣ

ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਕਿਵੇਂ ਕਰੀਏ? ਸਾਨੂੰ ਆਪਣੇ ਗੇਮ ਦੇ ਆਬਜੈਕਟਾਂ ਨੂੰ ਚੌਕੋਰਾਂ ਵਜੋਂ ਸੋਚਣਾ ਪਵੇਗਾ। ਤੁਸੀਂ ਪੁੱਛ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ? ਖੈਰ, ਗੇਮ ਆਬਜੈਕਟ ਨੂੰ ਖਿੱਚਣ ਲਈ ਵਰਤੀ ਗਈ ਚਿੱਤਰ ਇੱਕ ਚੌਕੋਰ ਹੁੰਦੀ ਹੈ: ਇਸ ਵਿੱਚ x, y, width ਅਤੇ height ਹੁੰਦੇ ਹਨ।

ਜੇ ਦੋ ਚੌਕੋਰਾਂ, ਜਿਵੇਂ ਕਿ ਹੀਰੋ ਅਤੇ ਦੁਸ਼ਮਨ ਇਕ ਦੂਜੇ ਨੂੰ ਕੱਟਦੇ ਹਨ, ਤਾਂ ਟਕਰਾਅ ਹੁੰਦਾ ਹੈ। ਫਿਰ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਇਹ ਗੇਮ ਦੇ ਨਿਯਮਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਗਏ ਚੀਜ਼ਾਂ ਦੀ ਲੋੜ ਹੈ:

1. ਗੇਮ ਆਬਜੈਕਟ ਦੀ ਚੌਕੋਰ ਪ੍ਰਤੀਨਿਧਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ, ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ:

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

2. ਇੱਕ ਤੁਲਨਾ ਫੰਕਸ਼ਨ, ਇਹ ਫੰਕਸ਼ਨ ਇਸ ਤਰ੍ਹਾਂ ਹੋ ਸਕਦਾ ਹੈ:

   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);

ਲੇਜ਼ਰ ਕਿਵੇਂ ਚਲਾਈਏ

ਲੇਜ਼ਰ ਚਲਾਉਣ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇੱਕ ਕੁੰਜੀ-ਇਵੈਂਟ ਦਾ ਜਵਾਬ ਦੇਣਾ ਅਤੇ ਇੱਕ ਆਬਜੈਕਟ ਬਣਾਉਣਾ ਜੋ ਇੱਕ ਨਿਰਧਾਰਿਤ ਦਿਸ਼ਾ ਵਿੱਚ ਚਲਦਾ ਹੈ। ਇਸ ਲਈ ਸਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮ ਕਰਨੇ ਪੈਣਗੇ:

1. ਲੇਜ਼ਰ ਆਬਜੈਕਟ ਬਣਾਓ: ਆਪਣੇ ਹੀਰੋ ਦੇ ਜਹਾਜ਼ ਦੇ ਉੱਪਰ ਤੋਂ, ਜੋ ਬਣਨ ਤੋਂ ਬਾਅਦ ਸਕਰੀਨ ਦੇ ਉੱਪਰ ਵੱਲ ਚਲਦਾ ਹੈ।
2. ਕੁੰਜੀ-ਇਵੈਂਟ ਨਾਲ ਕੋਡ ਜੋੜੋ: ਸਾਨੂੰ ਕੀਬੋਰਡ 'ਤੇ ਇੱਕ ਕੁੰਜੀ ਚੁਣਨੀ ਪਵੇਗੀ ਜੋ ਖਿਡਾਰੀ ਦੁਆਰਾ ਲੇਜ਼ਰ ਚਲਾਉਣ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ।
3. ਗੇਮ ਆਬਜੈਕਟ ਬਣਾਓ ਜੋ ਲੇਜ਼ਰ ਵਰਗਾ ਲੱਗਦਾ ਹੈ ਜਦੋਂ ਕੁੰਜੀ ਦਬਾਈ ਜਾਂਦੀ ਹੈ।

ਲੇਜ਼ਰ 'ਤੇ ਕੁਲਡਾਊਨ

ਲੇਜ਼ਰ ਨੂੰ ਹਰ ਵਾਰ ਦਬਾਉਣ 'ਤੇ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਪੇਸ। ਗੇਮ ਨੂੰ ਬਹੁਤ ਛੋਟੇ ਸਮੇਂ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਲੇਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਰੋਕਣ ਲਈ ਸਾਨੂੰ ਇਸ ਨੂੰ ਠੀਕ ਕਰਨਾ ਪਵੇਗਾ। ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਦਾ ਤਰੀਕਾ ਕੁਲਡਾਊਨ, ਇੱਕ ਟਾਈਮਰ, ਲਾਗੂ ਕਰਕੇ ਹੈ, ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਲੇਜ਼ਰ ਸਿਰਫ਼ ਇੱਕ ਨਿਰਧਾਰਿਤ ਸਮੇਂ ਵਿੱਚ ਚਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ:

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 ਤੋਂ ਕੋਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਜਾਂ ਭਾਗ III- ਸ਼ੁਰੂਆਤੀ 'ਤੇ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਵਰਤੋ।

ਸੁਝਾਅ: ਲੇਜ਼ਰ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਕੰਮ ਕਰ ਰਹੇ ਹੋ ਉਹ ਪਹਿਲਾਂ ਹੀ ਤੁਹਾਡੇ ਐਸੈਟ ਫੋਲਡਰ ਵਿੱਚ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਕੋਡ ਦੁਆਰਾ ਰਿਫਰੈਂਸ ਕੀਤਾ ਗਿਆ ਹੈ

• ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਸ਼ਾਮਲ ਕਰੋ, ਜਦੋਂ ਲੇਜ਼ਰ ਕੁਝ ਨਾਲ ਟਕਰਾਉਂਦਾ ਹੈ ਤਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਨਿਯਮ ਲਾਗੂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ:
  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 ਸਰਵਰ ਪਤਾ http://localhost:5000 'ਤੇ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ ਉਸ ਪਤੇ ਨੂੰ ਦਰਜ ਕਰੋ, ਇਸ ਸਮੇਂ ਇਹ ਹੀਰੋ ਅਤੇ ਸਾਰੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਕੁਝ ਵੀ ਹਿਲ ਨਹੀਂ ਰਿਹਾ - ਅਜੇ ਤੱਕ :).

ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ

1. ਆਪਣੇ ਗੇਮ ਆਬਜੈਕਟ ਦੀ ਚੌਕੋਰ ਪ੍ਰਤੀਨਿਧਤਾ ਸੈਟਅਪ ਕਰੋ, ਟਕਰਾਅ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤਾ ਕੋਡ ਤੁਹਾਨੂੰ GameObject ਦੀ ਚੌਕੋਰ ਪ੍ਰਤੀਨਿਧਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਆਪਣੇ GameObject ਕਲਾਸ ਨੂੰ ਵਧਾਉਣ ਲਈ ਸੋਧ ਕਰੋ:

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

2. ਟਕਰਾਅ ਦੀ ਜਾਂਚ ਕਰਨ ਵਾਲਾ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਇਹ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਹੋਵੇਗਾ ਜੋ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਦੋ ਚੌਕੋਰਾਂ ਕੱਟ ਰਹੀਆਂ ਹਨ ਜਾਂ ਨਹੀਂ:

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

3. ਲੇਜ਼ਰ ਚਲਾਉਣ ਦੀ ਸਮਰੱਥਾ ਸ਼ਾਮਲ ਕਰੋ

   1. ਕੁੰਜੀ-ਇਵੈਂਟ ਸੁਨੇਹਾ ਸ਼ਾਮਲ ਕਰੋ। ਸਪੇਸ ਕੁੰਜੀ ਨੂੰ ਹੀਰੋ ਜਹਾਜ਼ ਦੇ ਉੱਪਰ ਇੱਕ ਲੇਜ਼ਰ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। Messages ਆਬਜੈਕਟ ਵਿੱਚ ਤਿੰਨ ਕਾਂਸਟੈਂਟ ਸ਼ਾਮਲ ਕਰੋ:

       KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
       COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
       COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
      

   2. ਸਪੇਸ ਕੁੰਜੀ ਨੂੰ ਸੰਭਾਲੋ। window.addEventListener keyup ਫੰਕਸ਼ਨ ਨੂੰ ਸਪੇਸ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਸੋਧੋ:

        } else if(evt.keyCode === 32) {
          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
        }
      

   3. ਸੁਨੇਹਾ ਸੁਣਨ ਵਾਲੇ ਸ਼ਾਮਲ ਕਰੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਜਦੋਂ ਸਪੇਸ ਬਾਰ ਦਬਾਈ ਜਾਂਦੀ ਹੈ ਤਾਂ ਹੀਰੋ ਲੇਜ਼ਰ ਚਲਾ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ initGame() ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧੋ:

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

   4. ਆਬਜੈਕਟ ਨੂੰ ਚਲਾਓ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਲੇਜ਼ਰ ਹੌਲੀ-ਹੌਲੀ ਸਕਰੀਨ ਦੇ ਉੱਪਰ ਚਲਦਾ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਨਵਾਂ 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)
        }
      }
      

   5. ਟਕਰਾਅ ਨੂੰ ਸੰਭਾਲੋ, ਲੇਜ਼ਰ ਲਈ ਟਕਰਾਅ ਦੇ ਨਿਯਮ ਲਾਗੂ ਕਰੋ। 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);
      }  
      

      ਯਕੀਨੀ ਬਣਾਓ ਕਿ window.onload ਵਿੱਚ ਆਪਣੇ ਗੇਮ ਲੂਪ ਵਿੱਚ updateGameObjects() ਸ਼ਾਮਲ ਕਰੋ।

   6. ਲੇਜ਼ਰ 'ਤੇ ਕੁਲਡਾਊਨ ਲਾਗੂ ਕਰੋ, ਤਾਂ ਜੋ ਇਹ ਸਿਰਫ਼ ਇੱਕ ਨਿਰਧਾਰਿਤ ਸਮੇਂ ਵਿੱਚ ਚਲਾਇਆ ਜਾ ਸਕੇ।

      ਆਖਿਰਕਾਰ, 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;
       }
      }
      

ਇਸ ਪੜਾਅ 'ਤੇ, ਤੁਹਾਡੇ ਗੇਮ ਵਿੱਚ ਕੁਝ ਕਾਰਗੁਜ਼ਾਰੀ ਹੈ! ਤੁਸੀਂ ਆਪਣੇ ਐਰੋ ਕੁੰਜੀਆਂ ਨਾਲ ਨੈਵੀਗੇਟ ਕਰ ਸਕਦੇ ਹੋ, ਸਪੇਸ ਬਾਰ ਨਾਲ ਲੇਜ਼ਰ ਚਲਾ ਸਕਦੇ ਹੋ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਮਾਰਦੇ ਹੋ ਤਾਂ ਦੁਸ਼ਮਨ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ। ਸ਼ਾਬਾਸ਼!

GitHub Copilot Agent ਚੈਲੈਂਜ 🚀

Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

ਵੇਰਵਾ: ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਪ੍ਰਣਾਲੀ ਨੂੰ ਵਧਾਉਂਦੇ ਹੋਏ ਪਾਵਰ-ਅਪਸ ਲਾਗੂ ਕਰੋ ਜੋ ਕਦੇ-ਕਦੇ ਉਤਪੰਨ ਹੁੰਦੇ ਹਨ ਅਤੇ ਹੀਰੋ ਜਹਾਜ਼ ਦੁਆਰਾ ਇਕੱਠੇ ਕੀਤੇ ਜਾਣ 'ਤੇ ਅਸਥਾਈ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

ਪ੍ਰੇਰਣਾ: ਇੱਕ PowerUp ਕਲਾਸ ਬਣਾਓ ਜੋ GameObject ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ ਅਤੇ ਹੀਰੋ ਅਤੇ ਪਾਵਰ-ਅਪਸ ਦੇ ਵਿਚਕਾਰ ਟਕਰਾਅ ਦੀ ਪਛਾਣ ਲਾਗੂ ਕਰੋ। ਘੱਟੋ-ਘੱਟ ਦੋ ਕਿਸਮ ਦੇ ਪਾਵਰ-ਅਪਸ ਸ਼ਾਮਲ ਕਰੋ: ਇੱਕ ਜੋ ਫਾਇਰ ਰੇਟ ਵਧਾਉਂਦਾ ਹੈ (ਕੁਲਡਾਊਨ ਘਟਾਉਂਦਾ ਹੈ) ਅਤੇ ਦੂਜਾ ਜੋ ਅਸਥਾਈ ਸ਼ੀਲਡ ਬਣਾਉਂਦਾ ਹੈ। ਉਤਪੰਨ ਤਰਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਕਦੇ-ਕਦੇ ਅਤੇ ਸਥਾਨਾਂ 'ਤੇ ਪਾਵਰ-ਅਪਸ ਬਣਾਉਂਦਾ ਹੈ।

---

🚀 ਚੈਲੈਂਜ

ਇੱਕ ਧਮਾਕਾ ਸ਼ਾਮਲ ਕਰੋ! ਸਪੇਸ ਆਰਟ ਰਿਪੋ ਵਿੱਚ ਗੇਮ ਐਸੈਟਾਂ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ ਅਤੇ ਜਦੋਂ ਲੇਜ਼ਰ ਇੱਕ ਐਲੀਅਨ ਨੂੰ ਮਾਰਦਾ ਹੈ ਤਾਂ ਇੱਕ ਧਮਾਕਾ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵੀਜ਼

ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ

ਅਜੇ ਤੱਕ ਤੁਹਾਡੇ ਗੇਮ ਵਿੱਚ ਅੰਤਰਾਲਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਬਦਲਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? JavaScript ਟਾਈਮਿੰਗ ਇਵੈਂਟਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ।

ਅਸਾਈਨਮੈਂਟ

ਟਕਰਾਅ ਦੀ ਪੜਚੋਲ ਕਰੋ

---

ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।