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

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

ਗੇਮ ਲੂਪ ਵਿੱਚ ਮੈਥਡ ਸ਼ਾਮਲ ਕਰੋ। ਇਹ ਫੰਕਸ਼ਨ updateGameObjects() ਦੇ ਹੇਠਾਂ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:
```
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