Web-Dev-For-Beginners/translations/pa/6-space-game/5-keeping-score/README.md

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

journey
    title Your Game Design Journey
    section Player Feedback
      Understand scoring psychology: 3: Student
      Learn visual communication: 4: Student
      Design reward systems: 4: Student
    section Technical Implementation
      Canvas text rendering: 4: Student
      State management: 5: Student
      Event-driven updates: 5: Student
    section Game Polish
      User experience design: 5: Student
      Balance challenge and reward: 5: Student
      Create engaging gameplay: 5: Student

ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼

ਪ੍ਰੀ-ਲੈਕਚਰ ਕਵਿਜ਼

ਤਿਆਰ ਹੋ ਜਾਓ ਆਪਣੀ ਸਪੇਸ ਗੇਮ ਨੂੰ ਇੱਕ ਅਸਲ ਗੇਮ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨ ਲਈ? ਚਲੋ ਸਕੋਰਿੰਗ ਪੌਇੰਟਸ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੀਏ - ਉਹ ਮੁੱਖ ਮਕੈਨਿਕਸ ਜਿਨ੍ਹਾਂ ਨੇ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਜਿਵੇਂ ਕਿ ਸਪੇਸ ਇਨਵੇਡਰਜ਼ ਨੂੰ ਸਧਾਰਨ ਡੈਮੋਨਸਟਰੇਸ਼ਨ ਤੋਂ ਨਸ਼ੇ ਵਾਲੇ ਮਨੋਰੰਜਨ ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ। ਇਹ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਤੁਹਾਡੀ ਗੇਮ ਸੱਚਮੁੱਚ ਖੇਡਣਯੋਗ ਬਣਦੀ ਹੈ।

mindmap
  root((Game Feedback Systems))
    Visual Communication
      Text Rendering
      Icon Display
      Color Psychology
      Layout Design
    Scoring Mechanics
      Point Values
      Reward Timing
      Progress Tracking
      Achievement Systems
    Life Management
      Risk vs Reward
      Player Agency
      Difficulty Balance
      Recovery Mechanics
    User Experience
      Immediate Feedback
      Clear Information
      Emotional Response
      Engagement Loops
    Implementation
      Canvas API
      State Management
      Event Systems
      Performance

ਸਕ੍ਰੀਨ 'ਤੇ ਟੈਕਸਟ ਡਰਾਇੰਗ - ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਆਵਾਜ਼

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

flowchart LR
    A["📝 Text Content"] --> B["🎨 Styling"]
    B --> C["📍 Positioning"]
    C --> D["🖼️ Canvas Render"]
    
    E["Font Family"] --> B
    F["Font Size"] --> B
    G["Color"] --> B
    H["Alignment"] --> B
    
    I["X Coordinate"] --> C
    J["Y Coordinate"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

ਤੁਹਾਨੂੰ ਟੈਕਸਟ ਦੀ ਸ਼ਕਲ 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਹੈ:

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

✅ ਕੈਨਵਾਸ 'ਤੇ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਡੁੱਬੋ - ਤੁਸੀਂ ਫੋਂਟਸ ਅਤੇ ਸਟਾਈਲਿੰਗ ਨਾਲ ਕਿੰਨਾ ਕ੍ਰੀਏਟਿਵ ਹੋ ਸਕਦੇ ਹੋ ਇਸ 'ਤੇ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ!

ਜ਼ਿੰਦਗੀਆਂ - ਸਿਰਫ਼ ਇੱਕ ਗਿਣਤੀ ਤੋਂ ਵੱਧ

ਗੇਮ ਡਿਜ਼ਾਈਨ ਵਿੱਚ, "ਜ਼ਿੰਦਗੀ" ਖਿਡਾਰੀ ਦੀ ਗਲਤੀ ਦੀ ਮਾਰਜਿਨ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। ਇਹ ਧਾਰਨਾ ਪਿਨਬਾਲ ਮਸ਼ੀਨਾਂ ਤੋਂ ਆਉਂਦੀ ਹੈ, ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਖੇਡਣ ਲਈ ਕਈ ਗੇਂਦਾਂ ਮਿਲਦੀਆਂ ਸਨ। ਸ਼ੁਰੂਆਤੀ ਵੀਡੀਓ ਗੇਮਾਂ ਜਿਵੇਂ ਕਿ ਐਸਟਰੋਇਡਜ਼ ਵਿੱਚ, ਜ਼ਿੰਦਗੀਆਂ ਨੇ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜੋਖਮ ਲੈਣ ਅਤੇ ਗਲਤੀਆਂ ਤੋਂ ਸਿੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ।

flowchart TD
    A["🎮 Player Action"] --> B{"Risk Assessment"}
    
    B --> C["High Risk, High Reward"]
    B --> D["Safe Strategy"]
    
    C --> E{"Outcome"}
    D --> F["Steady Progress"]
    
    E -->|Success| G["🏆 Big Points"]
    E -->|Failure| H["💔 Lose Life"]
    
    H --> I{"Lives Remaining?"}
    I -->|Yes| J["🔄 Try Again"]
    I -->|No| K["💀 Game Over"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0

ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰਤੀਨਿਧਤਾ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ - "Lives: 3" ਦੇ ਸਿਰਫ਼ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨ ਦਿਖਾਉਣਾ ਤੁਰੰਤ ਦ੍ਰਿਸ਼ਮਾਨ ਪਛਾਣ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਕੈਬਿਨਟਸ ਨੇ ਭਾਸ਼ਾ ਦੀਆਂ ਰੁਕਾਵਟਾਂ ਨੂੰ ਪਾਰ ਕਰਨ ਲਈ ਆਈਕੋਗ੍ਰਾਫੀ ਵਰਤੀ।

ਤੁਹਾਡੀ ਗੇਮ ਦਾ ਰਿਵਾਰਡ ਸਿਸਟਮ ਬਣਾਉਣਾ

ਹੁਣ ਅਸੀਂ ਮੁੱਖ ਫੀਡਬੈਕ ਸਿਸਟਮ ਲਾਗੂ ਕਰਾਂਗੇ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜੁੜੇ ਰੱਖਦੇ ਹਨ:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Shoots Enemy
    GameEngine->>ScoreSystem: Award Points
    ScoreSystem->>ScoreSystem: +100 points
    ScoreSystem->>Display: Update Score
    
    Player->>GameEngine: Collides with Enemy
    GameEngine->>LifeSystem: Lose Life
    LifeSystem->>LifeSystem: -1 life
    LifeSystem->>Display: Update Lives
    
    alt Lives > 0
        LifeSystem->>Player: Continue Playing
    else Lives = 0
        LifeSystem->>GameEngine: Game Over
    end

• ਸਕੋਰਿੰਗ ਸਿਸਟਮ: ਹਰ ਤਬਾਹ ਕੀਤੇ ਗਏ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਲਈ 100 ਪੌਇੰਟਸ ਮਿਲਦੇ ਹਨ (ਗੋਲ ਗਿਣਤੀਆਂ ਖਿਡਾਰੀਆਂ ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਗਿਣਤੀ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ)। ਸਕੋਰ ਨੂੰ ਹੇਠਾਂ ਖੱਬੇ ਕੋਨੇ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।
• ਲਾਈਫ ਕਾਊਂਟਰ: ਤੁਹਾਡਾ ਹੀਰੋ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ - ਇੱਕ ਮਿਆਰ ਜੋ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਦੁਆਰਾ ਚੁਣੌਤੀ ਅਤੇ ਖੇਡਣਯੋਗਤਾ ਦੇ ਸੰਤੁਲਨ ਲਈ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ। ਹਰ ਵਾਰ ਦੁਸ਼ਮਨ ਨਾਲ ਟਕਰਾਉਣ 'ਤੇ ਇੱਕ ਜ਼ਿੰਦਗੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਹੇਠਾਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨਾਂ ਨਾਲ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ।

ਚਲੋ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੀਏ!

ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਪਣਾ ਵਰਕਸਪੇਸ ਸੈਟ ਕਰੋ। ਆਪਣੀ your-work ਸਬ ਫੋਲਡਰ ਵਿੱਚ ਫਾਈਲਾਂ ਨੂੰ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਇਹ ਫਾਈਲਾਂ ਦਿਖਾਈ ਦੇਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, your_work ਫੋਲਡਰ ਤੋਂ ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:

cd your-work
npm start

ਇਹ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਨੂੰ http://localhost:5000 'ਤੇ ਚਲਾਉਂਦਾ ਹੈ। ਆਪਣੀ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇਸ ਪਤੇ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਆਪਣੀ ਗੇਮ ਦੇਖੋ। ਐਰੋ ਕੀਜ਼ ਨਾਲ ਕੰਟਰੋਲ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਸਭ ਕੁਝ ਸਹੀ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ ਇਹ ਵੇਖਣ ਲਈ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਗੋਲੀ ਮਾਰਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

flowchart TD
    A["1. Asset Loading"] --> B["2. Game Variables"]
    B --> C["3. Collision Detection"]
    C --> D["4. Hero Enhancement"]
    D --> E["5. Display Functions"]
    E --> F["6. Event Handlers"]
    
    G["Life Icon Image"] --> A
    H["Score & Lives Tracking"] --> B
    I["Hero-Enemy Intersections"] --> C
    J["Points & Life Methods"] --> D
    K["Text & Icon Rendering"] --> E
    L["Reward & Penalty Logic"] --> F
    
    F --> M["🎮 Complete Game"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe

ਕੋਡ ਕਰਨ ਦਾ ਸਮਾਂ!

1. ਦ੍ਰਿਸ਼ਮਾਨ ਐਸੈਟਸ ਨੂੰ ਲਓ। solution/assets/ ਫੋਲਡਰ ਤੋਂ life.png ਐਸੈਟ ਨੂੰ ਕਾਪੀ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ your-work ਫੋਲਡਰ ਵਿੱਚ ਪਾਓ। ਫਿਰ lifeImg ਨੂੰ ਆਪਣੇ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:

   lifeImg = await loadTexture("assets/life.png");
   

2. lifeImg ਨੂੰ ਆਪਣੇ ਐਸੈਟਸ ਲਿਸਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਨਾ ਭੁੱਲੋ:

   let heroImg,
   ...
   lifeImg,
   ...
   eventEmitter = new EventEmitter();
   

3. ਆਪਣੀਆਂ ਗੇਮ ਵੈਰੀਏਬਲਸ ਸੈਟ ਕਰੋ। ਆਪਣਾ ਕੁੱਲ ਸਕੋਰ (0 ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ) ਅਤੇ ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ (3 ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ) ਟ੍ਰੈਕ ਕਰਨ ਲਈ ਕੁਝ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ। ਅਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਵਾਂਗੇ ਤਾਂ ਜੋ ਖਿਡਾਰੀ ਹਮੇਸ਼ਾ ਜਾਣ ਸਕਣ ਕਿ ਉਹ ਕਿੱਥੇ ਖੜੇ ਹਨ।

4. ਕੋਲਿਜ਼ਨ ਡਿਟੈਕਸ਼ਨ ਲਾਗੂ ਕਰੋ। ਆਪਣੇ updateGameObjects() ਫੰਕਸ਼ਨ ਨੂੰ ਵਧਾਓ ਤਾਂ ਜੋ ਇਹ ਪਤਾ ਲਗਾ ਸਕੇ ਕਿ ਦੁਸ਼ਮਨ ਤੁਹਾਡੇ ਹੀਰੋ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ:

   enemies.forEach(enemy => {
       const heroRect = hero.rectFromGameObject();
       if (intersectRect(heroRect, enemy.rectFromGameObject())) {
         eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
       }
     })
   

5. ਆਪਣੇ ਹੀਰੋ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਅਤੇ ਪੌਇੰਟ ਟ੍ਰੈਕਿੰਗ ਸ਼ਾਮਲ ਕਰੋ।

   1. ਕਾਊਂਟਰਸ ਸ਼ੁਰੂ ਕਰੋ। this.cooldown = 0 ਦੇ ਹੇਠਾਂ ਆਪਣੇ Hero ਕਲਾਸ ਵਿੱਚ ਜ਼ਿੰਦਗੀ ਅਤੇ ਪੌਇੰਟਸ ਸੈਟ ਕਰੋ:

      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. ਇਹਨਾਂ ਨੂੰ ਆਪਣੇ ਗੇਮ ਲੂਪ ਵਿੱਚ ਜੋੜੋ। updateGameObjects() ਦੇ ਬਾਅਦ ਆਪਣੇ window.onload ਫੰਕਸ਼ਨ ਵਿੱਚ ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

      drawPoints();
      drawLife();
      

🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ

ਗੇਮ ਡਿਜ਼ਾਈਨ ਸਮਝ: ਨਤੀਜਿਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:

• ✅ ਦ੍ਰਿਸ਼ਮਾਨ ਫੀਡਬੈਕ ਖਿਡਾਰੀਆਂ ਨੂੰ ਗੇਮ ਸਥਿਤੀ ਕਿਵੇਂ ਦਿਖਾਉਂਦਾ ਹੈ
• ✅ UI ਐਲਿਮੈਂਟਸ ਦੀ ਸਥਿਰ ਪਲੇਸਮੈਂਟ usability ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰਦੀ ਹੈ
• ✅ ਪੌਇੰਟ ਮੁੱਲ ਅਤੇ ਜ਼ਿੰਦਗੀ ਪ੍ਰਬੰਧਨ ਦੇ ਪਿੱਛੇ ਮਨੋਵਿਗਿਆਨ
• ✅ ਕੈਨਵਾਸ ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ HTML ਟੈਕਸਟ ਤੋਂ ਕਿਵੇਂ ਵੱਖਰੀ ਹੈ

ਤੁਰੰਤ ਸਵੈ-ਪਰੀਖਣ: ਆਰਕੇਡ ਗੇਮਾਂ ਆਮ ਤੌਰ 'ਤੇ ਪੌਇੰਟ ਮੁੱਲਾਂ ਲਈ ਗੋਲ ਗਿਣਤੀਆਂ ਕਿਉਂ ਵਰਤਦੀਆਂ ਹਨ? ਜਵਾਬ: ਗੋਲ ਗਿਣਤੀਆਂ ਖਿਡਾਰੀਆਂ ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਗਿਣਤੀ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ ਅਤੇ ਸੰਤੋਸ਼ਜਨਕ ਮਨੋਵਿਗਿਆਨਕ ਰਿਵਾਰਡ ਬਣਾਉਂਦੀਆਂ ਹਨ

ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਪ੍ਰਿੰਸਿਪਲਸ: ਤੁਸੀਂ ਹੁਣ ਲਾਗੂ ਕਰ ਰਹੇ ਹੋ:

• ਦ੍ਰਿਸ਼ਮਾਨ ਹਾਇਰਾਰਕੀ: ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਨੂੰ ਪ੍ਰਮੁੱਖ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਣਾ
• ਤੁਰੰਤ ਫੀਡਬੈਕ: ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਅੱਪਡੇਟਸ
• ਕੌਗਨਿਟਿਵ ਲੋਡ: ਸਧਾਰਨ, ਸਪਸ਼ਟ ਜਾਣਕਾਰੀ ਪ੍ਰਸਤੁਤੀ
• ਇਮੋਸ਼ਨਲ ਡਿਜ਼ਾਈਨ: ਆਈਕਾਨ ਅਤੇ ਰੰਗ ਜੋ ਖਿਡਾਰੀ ਨਾਲ ਜੁੜਾਅ ਬਣਾਉਂਦੇ ਹਨ

1. ਗੇਮ ਨਤੀਜੇ ਅਤੇ ਰਿਵਾਰਡ ਲਾਗੂ ਕਰੋ। ਹੁਣ ਅਸੀਂ ਫੀਡਬੈਕ ਸਿਸਟਮ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੋ ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਨੂੰ ਮਾਇਨੇਦਾਰ ਬਣਾਉਂਦੇ ਹਨ:

   1. ਕੋਲਿਜ਼ਨ ਜ਼ਿੰਦਗੀ ਦੀ ਕੀਮਤ ਹੈ। ਹਰ ਵਾਰ ਤੁਹਾਡਾ ਹੀਰੋ ਦੁਸ਼ਮਨ ਨਾਲ ਟਕਰਾਉਂਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਇੱਕ ਜ਼ਿੰਦਗੀ ਗੁਆਉਣੀ ਚਾਹੀਦੀ ਹੈ।

      ਇਹ ਮੈਥਡ ਆਪਣੇ Hero ਕਲਾਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ:

      decrementLife() {
        this.life--;
        if (this.life === 0) {
          this.dead = true;
        }
      }
      

   2. ਦੁਸ਼ਮਨ ਨੂੰ ਗੋਲੀ ਮਾਰਨਾ ਪੌਇੰਟਸ ਕਮਾਉਂਦਾ ਹੈ। ਹਰ ਸਫਲ ਹਿੱਟ 100 ਪੌਇੰਟਸ ਦਿੰਦਾ ਹੈ, ਸਹੀ ਗੋਲੀ ਮਾਰਨ ਲਈ ਤੁਰੰਤ ਸਕਾਰਾਤਮਕ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

      ਆਪਣੇ Hero ਕਲਾਸ ਵਿੱਚ ਇਸ ਇੰਕ੍ਰੀਮੈਂਟ ਮੈਥਡ ਨੂੰ ਵਧਾਓ:

        incrementPoints() {
          this.points += 100;
        }
      

      ਹੁਣ ਇਹਨਾਂ ਫੰਕਸ਼ਨਸ ਨੂੰ ਆਪਣੇ ਕੋਲਿਜ਼ਨ ਇਵੈਂਟਸ ਨਾਲ ਜੋੜੋ:

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

✅ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਤੇ ਕੈਨਵਾਸ ਨਾਲ ਬਣਾਈਆਂ ਹੋਰ ਗੇਮਾਂ ਬਾਰੇ ਜਾਣਨ ਲਈ ਕੁਝ ਖੋਜ ਕਰੋ - ਤੁਸੀਂ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਕੀ ਸੰਭਵ ਹੈ!

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

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

🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ

ਪੂਰਾ ਗੇਮ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ: ਖਿਡਾਰੀ ਫੀਡਬੈਕ ਸਿਸਟਮਾਂ ਦੀ ਆਪਣੀ ਮਾਹਰਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ:

• ✅ ਸਕੋਰਿੰਗ ਮਕੈਨਿਕਸ ਖਿਡਾਰੀ ਦੀ ਪ੍ਰੇਰਨਾ ਅਤੇ ਜੁੜਾਅ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ?
• ✅ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਸਥਿਰਤਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ?
• ✅ ਜ਼ਿੰਦਗੀ ਸਿਸਟਮ ਚੁਣੌਤੀ ਅਤੇ ਖਿਡਾਰੀ ਰਿਟੇਨਸ਼ਨ ਦਾ ਸੰਤੁਲਨ ਕਿਵੇਂ ਬਣਾਉਂਦਾ ਹੈ?
• ✅ ਤੁਰੰਤ ਫੀਡਬੈਕ ਸੰਤੋਸ਼ਜਨਕ ਗੇਮਪਲੇ ਬਣਾਉਣ ਵਿੱਚ ਕਿਵੇਂ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ?

ਸਿਸਟਮ ਇੰਟੀਗ੍ਰੇਸ਼ਨ: ਤੁਹਾਡਾ ਫੀਡਬੈਕ ਸਿਸਟਮ ਦਰਸਾਉਂਦਾ ਹੈ:

• ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਡਿਜ਼ਾਈਨ: ਸਪਸ਼ਟ ਦ੍ਰਿਸ਼ਮਾਨ ਸੰਚਾਰ ਅਤੇ ਜਾਣਕਾਰੀ ਹਾਇਰਾਰਕੀ
• ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਆਰਕੀਟੈਕਚਰ: ਖਿਡਾਰੀ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਜਵਾਬੀ ਅੱਪਡੇਟਸ
• ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ: ਗੇਮ ਡੇਟਾ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨਾ ਅਤੇ ਦਿਖਾਉਣਾ
• ਕੈਨਵਾਸ ਮਾਹਰਤਾ: ਟੈਕਸਟ ਰੈਂਡਰਿੰਗ ਅਤੇ ਸਪ੍ਰਾਈਟ ਪੋਜ਼ੀਸ਼ਨਿੰਗ
• ਗੇਮ ਮਨੋਵਿਗਿਆਨ: ਖਿਡਾਰੀ ਦੀ ਪ੍ਰੇਰਨਾ ਅਤੇ ਜੁੜਾਅ ਨੂੰ ਸਮਝਣਾ

ਪ੍ਰੋਫੈਸ਼ਨਲ ਪੈਟਰਨਸ: ਤੁਸੀਂ ਲਾਗੂ ਕੀਤਾ ਹੈ:

• MVC ਆਰਕੀਟੈਕਚਰ: ਗੇਮ ਲੌਜਿਕ, ਡੇਟਾ, ਅਤੇ ਪ੍ਰਸਤੁਤੀ ਦਾ ਵੱਖਰਾ ਕਰਨਾ
• ਓਬਜ਼ਰਵਰ ਪੈਟਰਨ: ਗੇਮ ਸਥਿਤੀ ਬਦਲਾਅ ਲਈ ਇਵੈਂਟ-ਡ੍ਰਿਵਨ ਅੱਪਡੇਟਸ
• ਕੰਪੋਨੈਂਟ ਡਿਜ਼ਾਈਨ: ਰੀਯੂਜ਼ੇਬਲ ਫੰਕਸ਼ਨਸ ਰੈਂਡਰਿੰਗ ਅਤੇ ਲੌਜਿਕ ਲਈ
• ਪਰਫਾਰਮੈਂਸ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ: ਗੇਮ ਲੂਪਸ ਵਿੱਚ ਕੁਸ਼ਲ ਰੈਂਡਰਿੰਗ

⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ

• ਸਕੋਰ ਡਿਸਪਲੇ ਲਈ ਵੱਖ-ਵੱਖ ਫੋਂਟ ਸਾਈਜ਼ ਅਤੇ ਰੰਗਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
• ਪੌਇੰਟ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਵੇਖੋ ਕਿ ਇਹ ਗੇਮਪਲੇ ਮਹਿਸੂਸ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਭਾਵ ਪਾਉਂਦਾ ਹੈ
• ਜਦੋਂ ਪੌਇੰਟਸ ਅਤੇ ਜ਼ਿੰਦਗੀਆਂ ਬਦਲਦੀਆਂ ਹਨ ਤਾਂ ਟਰੈਕ ਕਰਨ ਲਈ console.log ਸਟੇਟਮੈਂਟਸ ਸ਼ਾਮਲ ਕਰੋ
• ਐਜ ਕੇਸਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਜਿਵੇਂ ਕਿ ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋਣ ਜਾਂ ਉੱਚੇ ਸਕੋਰ ਪ੍ਰਾਪਤ ਕਰਨਾ

🎯 ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ

• ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਗੇਮ ਡਿਜ਼ਾਈਨ ਮਨੋਵਿਗਿਆਨ ਨੂੰ ਸਮਝੋ
• ਸਕੋਰਿੰਗ ਅਤੇ ਜ਼ਿੰਦਗੀ ਗੁਆਉਣ ਲਈ ਸਾਊਂਡ ਇਫੈਕਟਸ ਸ਼ਾਮਲ ਕਰੋ
• localStorage ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਹਾਈ ਸਕੋਰ ਸਿਸਟਮ ਲਾਗੂ ਕਰੋ
• ਵੱਖ-ਵੱਖ ਦੁਸ਼ਮਨ ਕਿਸਮਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਪੌਇੰਟ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰੋ
• ਜ਼ਿੰਦਗੀ ਗੁਆਉਣ 'ਤੇ ਸਕ੍ਰੀਨ ਸ਼ੇਕ ਜਿਵੇਂ ਦ੍ਰਿਸ਼ਮਾਨ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ

📅 ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ ਗੇਮ ਡਿਜ਼ਾਈਨ ਯਾਤਰਾ

• ਪੂਰੀ ਸਪੇਸ ਗੇਮ ਪੂਰੇ ਫੀਡਬੈਕ ਸਿਸਟਮਾਂ ਨਾਲ ਪੂਰੀ ਕਰੋ
• ਐਡਵਾਂਸਡ ਸਕੋਰਿੰਗ ਮਕੈਨਿਕਸ ਜਿਵੇਂ ਕਿ ਕੰਬੋ ਮਲਟੀਪਲਾਇਰਜ਼ ਲਾਗੂ ਕਰੋ
• ਅਚੀਵਮੈਂਟਸ ਅਤੇ ਅਨਲੌਕ ਕਰਨ ਵਾਲੀ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰੋ
• ਮੁਸ਼ਕਲਤਾ ਪ੍ਰਗਤੀ ਅਤੇ

---

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