# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 5: ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ## ਪੂਰਵ-ਵਿਦਿਆਰਥੀ ਕਵਿਜ਼ [ਪੂਰਵ-ਵਿਦਿਆਰਥੀ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/37) ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਗੇਮ ਵਿੱਚ ਸਕੋਰਿੰਗ ਕਿਵੇਂ ਜੋੜੀ ਜਾਵੇ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਦੀ ਗਿਣਤੀ ਕਿਵੇਂ ਕੀਤੀ ਜਾਵੇ। ## ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡ੍ਰਾਅ ਕਰੋ ਗੇਮ ਸਕੋਰ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਉਣ ਦੇ ਯੋਗ ਹੋਣ ਲਈ, ਤੁਹਾਨੂੰ ਜਾਣਨਾ ਪਵੇਗਾ ਕਿ ਟੈਕਸਟ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਵੇਂ ਰੱਖਿਆ ਜਾਵੇ। ਇਸਦਾ ਜਵਾਬ ਹੈ `fillText()` ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜੋ ਕਿ ਕੈਨਵਾਸ ਆਬਜੈਕਟ 'ਤੇ ਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਹੋਰ ਪਹਲੂਆਂ ਨੂੰ ਵੀ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਕਿਹੜਾ ਫੋਂਟ ਵਰਤਣਾ ਹੈ, ਟੈਕਸਟ ਦਾ ਰੰਗ ਅਤੇ ਇਸਦੀ ਅਲਾਈਨਮੈਂਟ (ਖੱਬੇ, ਸੱਜੇ, ਮੱਧ)। ਹੇਠਾਂ ਕੁਝ ਕੋਡ ਦਿੱਤਾ ਗਿਆ ਹੈ ਜੋ ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡ੍ਰਾਅ ਕਰਦਾ ਹੈ। ```javascript ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` ✅ [ਕੈਨਵਾਸ 'ਤੇ ਟੈਕਸਟ ਜੋੜਨ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ, ਅਤੇ ਆਪਣਾ ਡਿਜ਼ਾਈਨ ਹੋਰ ਸੁੰਦਰ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ! ## ਜ਼ਿੰਦਗੀ, ਗੇਮ ਕਾਂਸੈਪਟ ਵਜੋਂ ਗੇਮ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਦਾ ਕਾਂਸੈਪਟ ਸਿਰਫ਼ ਇੱਕ ਗਿਣਤੀ ਹੈ। ਸਪੇਸ ਗੇਮ ਦੇ ਸੰਦਰਭ ਵਿੱਚ, ਆਮ ਤੌਰ 'ਤੇ ਕੁਝ ਜ਼ਿੰਦਗੀਆਂ ਦਿੱਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਡੀ ਸ਼ਿਪ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਣ 'ਤੇ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਘਟ ਜਾਂਦੀਆਂ ਹਨ। ਇਹ ਵਧੀਆ ਹੈ ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਗ੍ਰਾਫਿਕਲ ਰੂਪ ਵਿੱਚ ਦਿਖਾ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਛੋਟੀਆਂ ਸ਼ਿਪਾਂ ਜਾਂ ਦਿਲਾਂ ਦੀ ਥਾਂ ਸਿਰਫ਼ ਗਿਣਤੀ ਦੇ। ## ਕੀ ਬਣਾਉਣਾ ਹੈ ਆਪਣੀ ਗੇਮ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਚੀਜ਼ਾਂ ਸ਼ਾਮਲ ਕਰੋ: - **ਗੇਮ ਸਕੋਰ**: ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਦੁਸ਼ਮਨ ਸ਼ਿਪ ਤਬਾਹ ਹੁੰਦੀ ਹੈ, ਹੀਰੋ ਨੂੰ ਕੁਝ ਪਾਇੰਟ ਮਿਲਣੇ ਚਾਹੀਦੇ ਹਨ। ਅਸੀਂ 100 ਪਾਇੰਟ ਪ੍ਰਤੀ ਸ਼ਿਪ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ। ਗੇਮ ਸਕੋਰ ਨੂੰ ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। - **ਜ਼ਿੰਦਗੀ**: ਤੁਹਾਡੀ ਸ਼ਿਪ ਕੋਲ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਹਨ। ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ ਦੁਸ਼ਮਨ ਸ਼ਿਪ ਤੁਹਾਡੇ ਨਾਲ ਟਕਰਾਉਂਦੀ ਹੈ, ਤੁਹਾਡੀ ਇੱਕ ਜ਼ਿੰਦਗੀ ਘਟ ਜਾਂਦੀ ਹੈ। ਜ਼ਿੰਦਗੀ ਸਕੋਰ ਹੇਠਾਂ ਸੱਜੇ ਪਾਸੇ ਦਿਖਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਇਹ ਹੇਠਾਂ ਦਿੱਤੇ ਗ੍ਰਾਫਿਕ ਤੋਂ ਬਣਿਆ ਹੋਇਆ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ । ## ਸਿਫਾਰਸ਼ੀ ਕਦਮ ਉਹ ਫਾਈਲਾਂ ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ `your-work` ਸਬ ਫੋਲਡਰ ਵਿੱਚ ਬਣਾਈ ਗਈਆਂ ਹਨ। ਇਹ ਹੇਠਾਂ ਦਿੱਤੇ ਚੀਜ਼ਾਂ ਸ਼ਾਮਲ ਕਰਦੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ: ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` ਤੁਸੀਂ ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ `your_work` ਫੋਲਡਰ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਕਮਾਂਡ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ: ```bash cd your-work npm start ``` ਉਪਰੋਕਤ HTTP ਸਰਵਰ ਪਤਾ `http://localhost:5000` 'ਤੇ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ ਉਸ ਪਤੇ ਨੂੰ ਇਨਪੁਟ ਕਰੋ। ਇਸ ਸਮੇਂ ਇਹ ਹੀਰੋ ਅਤੇ ਸਾਰੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਤੀਰਾਂ ਨੂੰ ਦਬਾਉਂਦੇ ਹੋ, ਹੀਰੋ ਹਿਲਦਾ ਹੈ ਅਤੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰ ਸਕਦਾ ਹੈ। ### ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ 1. **ਲੋੜੀਂਦੇ ਐਸੈਟਸ ਕਾਪੀ ਕਰੋ**। `solution/assets/` ਫੋਲਡਰ ਤੋਂ `your-work` ਫੋਲਡਰ ਵਿੱਚ `life.png` ਐਸੈਟ ਜੋੜੋ। `lifeImg` ਨੂੰ `window.onload` ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. `lifeImg` ਨੂੰ ਐਸੈਟਸ ਦੀ ਸੂਚੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **ਵੈਰੀਏਬਲ ਸ਼ਾਮਲ ਕਰੋ**। ਕੁੱਲ ਸਕੋਰ (0) ਅਤੇ ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ (3) ਨੂੰ ਦਰਸਾਉਣ ਵਾਲਾ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਇਹ ਸਕੋਰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਓ। 3. **`updateGameObjects()` ਫੰਕਸ਼ਨ ਨੂੰ ਵਧਾਓ**। `updateGameObjects()` ਫੰਕਸ਼ਨ ਨੂੰ ਦੁਸ਼ਮਨ ਟਕਰਾਅ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਵਧਾਓ: ```javascript enemies.forEach(enemy => { const heroRect = hero.rectFromGameObject(); if (intersectRect(heroRect, enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); } }) ``` 4. **ਜ਼ਿੰਦਗੀ ਅਤੇ ਪਾਇੰਟਸ ਸ਼ਾਮਲ ਕਰੋ**। 1. **ਵੈਰੀਏਬਲ ਸ਼ੁਰੂ ਕਰੋ**। `Hero` ਕਲਾਸ ਵਿੱਚ `this.cooldown = 0` ਦੇ ਹੇਠਾਂ, ਜ਼ਿੰਦਗੀ ਅਤੇ ਪਾਇੰਟਸ ਸੈਟ ਕਰੋ: ```javascript this.life = 3; this.points = 0; ``` 1. **ਵੈਰੀਏਬਲ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡ੍ਰਾਅ ਕਰੋ**। ਇਹ ਮੁੱਲ ਸਕ੍ਰੀਨ 'ਤੇ ਡ੍ਰਾਅ ਕਰੋ: ```javascript 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); } ``` 1. **ਗੇਮ ਲੂਪ ਵਿੱਚ ਮੈਥਡਸ ਸ਼ਾਮਲ ਕਰੋ**। ਇਹ ਫੰਕਸ਼ਨ `window.onload` ਫੰਕਸ਼ਨ ਵਿੱਚ `updateGameObjects()` ਦੇ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੋ: ```javascript drawPoints(); drawLife(); ``` 1. **ਗੇਮ ਨਿਯਮ ਲਾਗੂ ਕਰੋ**। ਹੇਠਾਂ ਦਿੱਤੇ ਗੇਮ ਨਿਯਮ ਲਾਗੂ ਕਰੋ: 1. **ਹੀਰੋ ਅਤੇ ਦੁਸ਼ਮਨ ਟਕਰਾਅ ਲਈ**, ਇੱਕ ਜ਼ਿੰਦਗੀ ਘਟਾਓ। `Hero` ਕਲਾਸ ਨੂੰ ਇਹ ਘਟਾਓ ਕਰਨ ਲਈ ਵਧਾਓ: ```javascript decrementLife() { this.life--; if (this.life === 0) { this.dead = true; } } ``` 2. **ਹਰ ਲੇਜ਼ਰ ਜੋ ਦੁਸ਼ਮਨ ਨੂੰ ਹਿੱਟ ਕਰਦਾ ਹੈ**, ਗੇਮ ਸਕੋਰ ਵਿੱਚ 100 ਪਾਇੰਟ ਵਧਾਓ। `Hero` ਕਲਾਸ ਨੂੰ ਇਹ ਵਾਧਾ ਕਰਨ ਲਈ ਵਧਾਓ: ```javascript incrementPoints() { this.points += 100; } ``` ਇਹ ਫੰਕਸ਼ਨ ਤੁਹਾਡੇ Collision Event Emitters ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ: ```javascript 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' ਸ਼ਿਪਾਂ, ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਪਾਇੰਟਸ, ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਦੁਸ਼ਮਨਾਂ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹੋ ਤਾਂ ਜ਼ਿੰਦਗੀ ਦੀ ਗਿਣਤੀ ਘਟਦੀ ਹੋਈ ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰਦੇ ਹੋ ਤਾਂ ਪਾਇੰਟਸ ਵਧਦੇ ਹੋਏ ਦਿਖਾਈ ਦੇਣੇ ਚਾਹੀਦੇ ਹਨ। ਸ਼ਾਬਾਸ਼! ਤੁਹਾਡੀ ਗੇਮ ਲਗਭਗ ਪੂਰੀ ਹੋ ਚੁੱਕੀ ਹੈ। --- ## 🚀 ਚੁਣੌਤੀ ਤੁਹਾਡਾ ਕੋਡ ਲਗਭਗ ਪੂਰਾ ਹੈ। ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਅਗਲੇ ਕਦਮਾਂ ਦੀ ਕਲਪਨਾ ਕਰ ਸਕਦੇ ਹੋ? ## ਪਾਠ-ਪ੍ਰਸ਼ਨ ਕਵਿਜ਼ [ਪਾਠ-ਪ੍ਰਸ਼ਨ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/38) ## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ-ਅਧਿਐਨ ਕੁਝ ਤਰੀਕੇ ਖੋਜੋ ਜਿਨ੍ਹਾਂ ਨਾਲ ਤੁਸੀਂ ਗੇਮ ਸਕੋਰ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਵਧਾ ਅਤੇ ਘਟਾ ਸਕਦੇ ਹੋ। ਕੁਝ ਦਿਲਚਸਪ ਗੇਮ ਇੰਜਨ ਹਨ ਜਿਵੇਂ ਕਿ [PlayFab](https://playfab.com)। ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਦੀ ਵਰਤੋਂ ਤੁਹਾਡੀ ਗੇਮ ਨੂੰ ਕਿਵੇਂ ਵਧੀਆ ਕਰ ਸਕਦੀ ਹੈ? ## ਅਸਾਈਨਮੈਂਟ [ਸਕੋਰਿੰਗ ਗੇਮ ਬਣਾਓ](assignment.md) --- **ਅਸਵੀਕਤੀ**: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੱਜੇਪਣ ਹੋ ਸਕਦੇ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।