# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 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. **`life` ਅਤੇ `points` ਸ਼ਾਮਲ ਕਰੋ**। 1. **ਵੈਰੀਏਬਲ ਸ਼ੁਰੂ ਕਰੋ**। `Hero` ਕਲਾਸ ਵਿੱਚ `this.cooldown = 0` ਦੇ ਹੇਠਾਂ, life ਅਤੇ points ਸੈਟ ਕਰੋ: ```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. **ਗੇਮ ਲੂਪ ਵਿੱਚ ਮੈਥਡ ਸ਼ਾਮਲ ਕਰੋ**। ਇਹ ਫੰਕਸ਼ਨ `updateGameObjects()` ਦੇ ਹੇਠਾਂ `window.onload` ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ: ```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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਣੀਕਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।