14 KiB

Raw Blame History

ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 5: ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ

ਪੂਰਵ-ਵਿਚਾਰ ਕਵਿਜ਼

ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਗੇਮ ਵਿੱਚ ਸਕੋਰਿੰਗ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨੀ ਹੈ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਦੀ ਗਿਣਤੀ ਕਿਵੇਂ ਕਰਨੀ ਹੈ।

ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡਰਾਅ ਕਰੋ

ਗੇਮ ਸਕੋਰ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਉਣ ਦੇ ਯੋਗ ਹੋਣ ਲਈ, ਤੁਹਾਨੂੰ ਪਤਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਟੈਕਸਟ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਵੇਂ ਰੱਖਣਾ ਹੈ। ਜਵਾਬ ਹੈ ਕਿ ਕੈਨਵਸ ਆਬਜੈਕਟ 'ਤੇ fillText() ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ। ਤੁਸੀਂ ਹੋਰ ਪਹਲੂਆਂ ਨੂੰ ਵੀ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਕਿਹੜਾ ਫੋਂਟ ਵਰਤਣਾ ਹੈ, ਟੈਕਸਟ ਦਾ ਰੰਗ ਅਤੇ ਇਸਦਾ ਐਲਾਈਨਮੈਂਟ (ਖੱਬੇ, ਸੱਜੇ, ਸੈਂਟਰ)। ਹੇਠਾਂ ਕੁਝ ਕੋਡ ਦਿੱਤਾ ਗਿਆ ਹੈ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡਰਾਅ ਕਰਦਾ ਹੈ।

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

✅ ਕੈਨਵਸ 'ਤੇ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ, ਅਤੇ ਆਪਣਾ ਡਿਜ਼ਾਈਨ ਹੋਰ ਸੁੰਦਰ ਬਣਾਉਣ ਲਈ ਖੁਦ ਨੂੰ ਆਜ਼ਾਦ ਮਹਿਸੂਸ ਕਰੋ!

ਜ਼ਿੰਦਗੀ, ਇੱਕ ਗੇਮ ਕਾਂਸੈਪਟ ਵਜੋਂ

ਗੇਮ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਹੋਣ ਦਾ ਕਾਂਸੈਪਟ ਸਿਰਫ਼ ਇੱਕ ਗਿਣਤੀ ਹੈ। ਸਪੇਸ ਗੇਮ ਦੇ ਸੰਦਰਭ ਵਿੱਚ, ਆਮ ਤੌਰ 'ਤੇ ਕੁਝ ਜ਼ਿੰਦਗੀਆਂ ਦਿੱਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਡੀ ਸ਼ਿਪ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਣ 'ਤੇ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਘਟ ਜਾਂਦੀਆਂ ਹਨ। ਇਹ ਵਧੀਆ ਹੈ ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਗ੍ਰਾਫਿਕਲ ਰੂਪ ਵਿੱਚ ਦਿਖਾ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਮਿਨੀਸ਼ਿਪ ਜਾਂ ਦਿਲਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਨੰਬਰ ਦੀ ਬਜਾਏ।

ਕੀ ਬਣਾਉਣਾ ਹੈ

ਆਓ ਆਪਣੇ ਗੇਮ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਚੀਜ਼ਾਂ ਸ਼ਾਮਲ ਕਰੀਏ:

ਗੇਮ ਸਕੋਰ: ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਦੁਸ਼ਮਨ ਸ਼ਿਪ ਨਸ਼ਟ ਹੁੰਦੀ ਹੈ, ਹੀਰੋ ਨੂੰ ਕੁਝ ਪਾਇੰਟਸ ਮਿਲਣੇ ਚਾਹੀਦੇ ਹਨ, ਅਸੀਂ ਪ੍ਰਤੀ ਸ਼ਿਪ 100 ਪਾਇੰਟਸ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ। ਗੇਮ ਸਕੋਰ ਨੂੰ ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
ਜ਼ਿੰਦਗੀ: ਤੁਹਾਡੀ ਸ਼ਿਪ ਕੋਲ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਹਨ। ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਦੁਸ਼ਮਨ ਸ਼ਿਪ ਤੁਹਾਡੇ ਨਾਲ ਟਕਰਾਉਂਦੀ ਹੈ, ਤੁਹਾਡੀ ਇੱਕ ਜ਼ਿੰਦਗੀ ਘਟ ਜਾਂਦੀ ਹੈ। ਜ਼ਿੰਦਗੀ ਸਕੋਰ ਹੇਠਾਂ ਸੱਜੇ ਪਾਸੇ ਦਿਖਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਇਹ ਹੇਠਾਂ ਦਿੱਤੇ ਗ੍ਰਾਫਿਕ ਤੋਂ ਬਣਿਆ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

ਸਿਫਾਰਸ਼ੀ ਕਦਮ

ਉਹ ਫਾਈਲਾਂ ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ 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 'ਤੇ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ ਉਸ ਪਤੇ ਨੂੰ ਇਨਪੁਟ ਕਰੋ, ਇਸ ਸਮੇਂ ਇਹ ਹੀਰੋ ਅਤੇ ਸਾਰੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਤੀਰਾਂ ਨੂੰ ਦਬਾਉਂਦੇ ਹੋ, ਤਾਂ ਹੀਰੋ ਹਿਲਦਾ ਹੈ ਅਤੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰ ਸਕਦਾ ਹੈ।

ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ

ਲੋੜੀਂਦੇ ਐਸੈਟਸ ਕਾਪੀ ਕਰੋ 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 });
    }
  })

life ਅਤੇ points ਸ਼ਾਮਲ ਕਰੋ।

ਵੈਰੀਏਬਲ ਸ਼ੁਰੂ ਕਰੋ। Hero ਕਲਾਸ ਵਿੱਚ this.cooldown = 0 ਦੇ ਹੇਠਾਂ, life ਅਤੇ points ਸੈਟ ਕਰੋ:
```
this.life = 3;
this.points = 0;
```

ਵੈਰੀਏਬਲ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰੋ। ਇਹ ਮੁੱਲ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰੋ:

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

ਗੇਮ ਲੂਪ ਵਿੱਚ ਮੈਥਡਸ ਸ਼ਾਮਲ ਕਰੋ। ਇਹ ਫੰਕਸ਼ਨ 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();
});
```

✅ ਕੁਝ ਹੋਰ ਗੇਮਸ ਦੀ ਖੋਜ ਕਰੋ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ/ਕੈਨਵਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਈ ਗਈਆਂ ਹਨ। ਉਨ੍ਹਾਂ ਦੇ ਆਮ ਲੱਛਣ ਕੀ ਹਨ?

ਇਸ ਕੰਮ ਦੇ ਅੰਤ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਸੱਜੇ ਪਾਸੇ ਛੋਟੀਆਂ 'life' ਸ਼ਿਪਸ, ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਪਾਇੰਟਸ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਦੁਸ਼ਮਨਾਂ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਹਾਡੀ ਜ਼ਿੰਦਗੀ ਦੀ ਗਿਣਤੀ ਘਟਦੀ ਹੋਈ ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰਦੇ ਹੋ ਤਾਂ ਤੁਹਾਡੇ ਪਾਇੰਟਸ ਵਧਦੇ ਹੋਏ ਦਿਖਾਈ ਦੇਣੇ ਚਾਹੀਦੇ ਹਨ। ਸ਼ਾਬਾਸ਼! ਤੁਹਾਡਾ ਗੇਮ ਲਗਭਗ ਪੂਰਾ ਹੋ ਗਿਆ ਹੈ।

GitHub Copilot Agent ਚੈਲੈਂਜ 🚀

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

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

ਪ੍ਰੋਮਪਟ: ਇੱਕ ਹਾਈ ਸਕੋਰ ਸਿਸਟਮ ਬਣਾਓ ਜੋ ਖਿਡਾਰੀ ਦੇ ਬਿਹਤਰ ਸਕੋਰ ਨੂੰ localStorage ਵਿੱਚ ਸੇਵ ਕਰੇ। ਲਗਾਤਾਰ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਮਾਰਨ ਲਈ ਬੋਨਸ ਪਾਇੰਟਸ (ਕਾਂਬੋ ਸਿਸਟਮ) ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਵੱਖ-ਵੱਖ ਦੁਸ਼ਮਨ ਕਿਸਮਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਪਾਇੰਟ ਮੁੱਲ ਲਾਗੂ ਕਰੋ। ਜਦੋਂ ਖਿਡਾਰੀ ਨਵਾਂ ਹਾਈ ਸਕੋਰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਤਾਂ ਇੱਕ ਵਿਜ਼ੂਅਲ ਇੰਡੀਕੇਟਰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਗੇਮ ਸਕ੍ਰੀਨ 'ਤੇ ਮੌਜੂਦਾ ਹਾਈ ਸਕੋਰ ਦਿਖਾਓ।

🚀 ਚੈਲੈਂਜ

ਤੁਹਾਡਾ ਕੋਡ ਲਗਭਗ ਪੂਰਾ ਹੈ। ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਅਗਲੇ ਕਦਮਾਂ ਦੀ ਕਲਪਨਾ ਕਰ ਸਕਦੇ ਹੋ?

ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼

ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

ਕੁਝ ਤਰੀਕੇ ਖੋਜੋ ਜਿਨ੍ਹਾਂ ਨਾਲ ਤੁਸੀਂ ਗੇਮ ਸਕੋਰ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਵਧਾ ਅਤੇ ਘਟਾ ਸਕਦੇ ਹੋ। ਕੁਝ ਦਿਲਚਸਪ ਗੇਮ ਇੰਜਨ ਹਨ ਜਿਵੇਂ PlayFab। ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਦੀ ਵਰਤੋਂ ਤੁਹਾਡੇ ਗੇਮ ਨੂੰ ਕਿਵੇਂ ਵਧੀਆ ਬਣਾ ਸਕਦੀ ਹੈ?

ਅਸਾਈਨਮੈਂਟ

ਸਕੋਰਿੰਗ ਗੇਮ ਬਣਾਓ

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

14 KiB Raw Blame History