13 KiB

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

ਜ਼ਿੰਦਗੀ ਅਤੇ ਪਾਇੰਟਸ ਸ਼ਾਮਲ ਕਰੋ।
1. ਵੈਰੀਏਬਲ ਸ਼ੁਰੂ ਕਰੋ। Hero ਕਲਾਸ ਵਿੱਚ this.cooldown = 0 ਦੇ ਹੇਠਾਂ, ਜ਼ਿੰਦਗੀ ਅਤੇ ਪਾਇੰਟਸ ਸੈਟ ਕਰੋ:
```
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. ਗੇਮ ਲੂਪ ਵਿੱਚ ਮੈਥਡਸ ਸ਼ਾਮਲ ਕਰੋ। ਇਹ ਫੰਕਸ਼ਨ 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' ਸ਼ਿਪਾਂ, ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਪਾਇੰਟਸ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਦੁਸ਼ਮਨਾਂ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹੋ ਤਾਂ ਜ਼ਿੰਦਗੀ ਦੀ ਗਿਣਤੀ ਘਟਦੀ ਹੋਈ ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰਦੇ ਹੋ ਤਾਂ ਪਾਇੰਟਸ ਵਧਦੇ ਹੋਏ ਦਿਖਾਈ ਦੇਣੇ ਚਾਹੀਦੇ ਹਨ। ਸ਼ਾਬਾਸ਼! ਤੁਹਾਡੀ ਗੇਮ ਲਗਭਗ ਪੂਰੀ ਹੋ ਚੁੱਕੀ ਹੈ।

🚀 ਚੁਣੌਤੀ

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

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

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

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

ਅਸਾਈਨਮੈਂਟ

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

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

13 KiB Raw Permalink Blame History