Web-Dev-For-Beginners/translations/mr/6-space-game/4-collision-detection/README.md

स्पेस गेम तयार करा भाग 4: लेसर जोडणे आणि टक्कर शोधणे

व्याख्यानपूर्व प्रश्नमंजुषा

व्याख्यानपूर्व प्रश्नमंजुषा

या धड्यात तुम्ही JavaScript च्या मदतीने लेसर कसे शूट करायचे ते शिकाल! आपण आपल्या गेममध्ये दोन गोष्टी जोडणार आहोत:

• लेसर: हा लेसर तुमच्या हिरोच्या जहाजातून वरच्या दिशेने शूट केला जातो.
• टक्कर शोधणे, शूट करण्याची क्षमता अंमलात आणण्याचा भाग म्हणून, आम्ही काही चांगले गेम नियम देखील जोडू:
  • लेसर शत्रूला लागतो: लेसर लागल्यास शत्रू मरतो.
  • लेसर स्क्रीनच्या वरच्या भागाला लागतो: स्क्रीनच्या वरच्या भागाला लागल्यास लेसर नष्ट होतो.
  • शत्रू आणि हिरोची टक्कर: शत्रू आणि हिरो एकमेकांना लागल्यास ते नष्ट होतात.
  • शत्रू स्क्रीनच्या तळाशी पोहोचतो: शत्रू स्क्रीनच्या तळाशी पोहोचल्यास शत्रू आणि हिरो नष्ट होतात.

थोडक्यात, तुम्ही -- हिरो -- सर्व शत्रूंना लेसरने मारले पाहिजे, त्याआधी ते स्क्रीनच्या तळाशी पोहोचतील.

✅ पहिल्या संगणक गेमबद्दल थोडे संशोधन करा. त्याची कार्यक्षमता काय होती?

चला, एकत्र हिरो बनूया!

टक्कर शोधणे

टक्कर शोधणे कसे करायचे? आपल्याला आपल्या गेम ऑब्जेक्ट्सला आयताकृती म्हणून विचार करावा लागेल. तुम्ही विचाराल का? कारण गेम ऑब्जेक्ट काढण्यासाठी वापरलेले चित्र आयताकृती असते: त्याला x, y, width आणि height असते.

जर दोन आयत, म्हणजेच हिरो आणि शत्रू एकमेकांवर आले, तर टक्कर झाली आहे. त्यानंतर काय घडले पाहिजे हे गेमच्या नियमांवर अवलंबून आहे. टक्कर शोधण्यासाठी तुम्हाला खालील गोष्टींची आवश्यकता आहे:

1. गेम ऑब्जेक्टचे आयताकृती प्रतिनिधित्व मिळवण्याचा एक मार्ग, असे काहीतरी:

   rectFromGameObject() {
     return {
       top: this.y,
       left: this.x,
       bottom: this.y + this.height,
       right: this.x + this.width
     }
   }
   

2. तुलना करण्यासाठी एक फंक्शन, हे फंक्शन असे दिसू शकते:

   function intersectRect(r1, r2) {
     return !(r2.left > r1.right ||
       r2.right < r1.left ||
       r2.top > r1.bottom ||
       r2.bottom < r1.top);
   }
   

गोष्टी कशा नष्ट करायच्या

गेममध्ये गोष्टी नष्ट करण्यासाठी तुम्हाला गेमला कळवावे लागेल की त्याने गेम लूपमध्ये त्या आयटमला पुन्हा रंगवू नये, जो विशिष्ट अंतरावर ट्रिगर होतो. हे करण्याचा एक मार्ग म्हणजे गेम ऑब्जेक्टला मृत म्हणून चिन्हांकित करणे, जसे:

// collision happened
enemy.dead = true

यानंतर तुम्ही स्क्रीन पुन्हा रंगवण्यापूर्वी मृत ऑब्जेक्ट्स काढून टाकू शकता, जसे:

gameObjects = gameObject.filter(go => !go.dead);

लेसर कसे शूट करायचे

लेसर शूट करणे म्हणजे की-इव्हेंटला प्रतिसाद देणे आणि एक ऑब्जेक्ट तयार करणे जे विशिष्ट दिशेने हलते. म्हणूनच आपल्याला खालील चरण पूर्ण करणे आवश्यक आहे:

1. लेसर ऑब्जेक्ट तयार करा: आपल्या हिरोच्या जहाजाच्या वरून, जे तयार होताच स्क्रीनच्या वरच्या दिशेने हलायला सुरुवात करते.
2. की इव्हेंटला कोड जोडणे: आपल्याला कीबोर्डवरील एक की निवडावी लागेल जी खेळाडू लेसर शूट करत असल्याचे दर्शवते.
3. लेसरसारखे दिसणारे गेम ऑब्जेक्ट तयार करा जेव्हा की दाबली जाते.

लेसरवर कूलडाउन

लेसर प्रत्येक वेळी तुम्ही की दाबल्यावर शूट होणे आवश्यक आहे, उदाहरणार्थ स्पेस. खेळाने खूप कमी वेळात खूप जास्त लेसर तयार होऊ नये म्हणून आपल्याला हे निश्चित करणे आवश्यक आहे. हे निश्चित करण्यासाठी कूलडाउन, एक टाइमर, अंमलात आणणे आवश्यक आहे, जे सुनिश्चित करते की लेसर फक्त ठराविक वेळाने शूट केला जाऊ शकतो. तुम्ही ते खालीलप्रमाणे अंमलात आणू शकता:

class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time)
  }
}

class Weapon {
  constructor {
  }
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // produce a laser
      this.cooldown = new Cooldown(500);
    } else {
      // do nothing - it hasn't cooled down yet.
    }
  }
}

✅ स्पेस गेम मालिकेतील धडा 1 मध्ये कूलडाउन बद्दल स्वतःला आठवण करून द्या.

काय तयार करायचे

तुम्ही मागील धड्यापासून विद्यमान कोड (जो तुम्ही साफसफाई करून पुनर्रचना केली पाहिजे) घेऊन त्याचा विस्तार कराल. भाग II मधील कोडसह प्रारंभ करा किंवा भाग III- स्टार्टर येथील कोड वापरा.

टिप: तुम्ही ज्यावर काम करणार आहात तो लेसर आधीच तुमच्या अॅसेट्स फोल्डरमध्ये आहे आणि तुमच्या कोडद्वारे संदर्भित आहे.

• टक्कर शोधणे जोडा, जेव्हा लेसर काहीतरीला धडकतो तेव्हा खालील नियम लागू करावेत:
  1. लेसर शत्रूला लागतो: लेसर लागल्यास शत्रू मरतो.
  2. लेसर स्क्रीनच्या वरच्या भागाला लागतो: स्क्रीनच्या वरच्या भागाला लागल्यास लेसर नष्ट होतो.
  3. शत्रू आणि हिरोची टक्कर: शत्रू आणि हिरो एकमेकांना लागल्यास ते नष्ट होतात.
  4. शत्रू स्क्रीनच्या तळाशी पोहोचतो: शत्रू स्क्रीनच्या तळाशी पोहोचल्यास शत्रू आणि हिरो नष्ट होतात.

शिफारस केलेले चरण

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 वर सुरू करेल. ब्राउझर उघडा आणि तो पत्ता टाइप करा, सध्या ते हिरो आणि सर्व शत्रूंना दाखवेल, काहीही हलत नाही - अजून :).

कोड जोडा

1. आपल्या गेम ऑब्जेक्टचे आयताकृती प्रतिनिधित्व सेट करा, टक्कर हाताळण्यासाठी खालील कोड तुम्हाला GameObject चे आयताकृती प्रतिनिधित्व मिळवण्यास अनुमती देतो. तुमच्या GameObject वर्गात संपादन करा:

   rectFromGameObject() {
       return {
         top: this.y,
         left: this.x,
         bottom: this.y + this.height,
         right: this.x + this.width,
       };
     }
   

2. टक्कर तपासण्यासाठी कोड जोडा हे एक नवीन फंक्शन असेल जे दोन आयत एकमेकांवर येतात का ते तपासते:

   function intersectRect(r1, r2) {
     return !(
       r2.left > r1.right ||
       r2.right < r1.left ||
       r2.top > r1.bottom ||
       r2.bottom < r1.top
     );
   }
   

3. लेसर शूट करण्याची क्षमता जोडा

   1. की-इव्हेंट संदेश जोडा. स्पेस कीने हिरो जहाजाच्या वर लेसर तयार करावा. Messages ऑब्जेक्टमध्ये तीन constants जोडा:

       KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
       COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
       COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
      

   2. स्पेस की हाताळा. window.addEventListener keyup फंक्शन संपादित करा जे स्पेस हाताळेल:

        } else if(evt.keyCode === 32) {
          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
        }
      

   3. लिसनर्स जोडा. initGame() फंक्शन संपादित करा जे सुनिश्चित करेल की स्पेस बार दाबल्यावर हिरो शूट करू शकेल:

      eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
       if (hero.canFire()) {
         hero.fire();
       }
      

      आणि एक नवीन eventEmitter.on() फंक्शन जोडा जेव्हा शत्रू लेसरला धडकतो तेव्हा वर्तन सुनिश्चित करण्यासाठी:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
        first.dead = true;
        second.dead = true;
      })
      

   4. ऑब्जेक्ट हलवा, लेसर स्क्रीनच्या वरच्या दिशेने हळूहळू हलतो याची खात्री करा. तुम्ही एक नवीन Laser वर्ग तयार कराल जो GameObject ला विस्तारित करतो, जसे तुम्ही यापूर्वी केले आहे:

        class Laser extends GameObject {
        constructor(x, y) {
          super(x,y);
          (this.width = 9), (this.height = 33);
          this.type = 'Laser';
          this.img = laserImg;
          let id = setInterval(() => {
            if (this.y > 0) {
              this.y -= 15;
            } else {
              this.dead = true;
              clearInterval(id);
            }
          }, 100)
        }
      }
      

   5. टक्कर हाताळा, लेसरसाठी टक्कर नियम अंमलात आणा. updateGameObjects() फंक्शन जोडा जे टक्कर झालेल्या ऑब्जेक्ट्ससाठी चाचणी करते:

      function updateGameObjects() {
        const enemies = gameObjects.filter(go => go.type === 'Enemy');
        const lasers = gameObjects.filter((go) => go.type === "Laser");
      // laser hit something
        lasers.forEach((l) => {
          enemies.forEach((m) => {
            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
              first: l,
              second: m,
            });
          }
         });
      });
      
        gameObjects = gameObjects.filter(go => !go.dead);
      }  
      

      window.onload मध्ये तुमच्या गेम लूपमध्ये updateGameObjects() जोडा.

   6. लेसरवर कूलडाउन अंमलात आणा, त्यामुळे तो फक्त ठराविक वेळाने शूट केला जाऊ शकतो.

      शेवटी, हिरो वर्ग संपादित करा जेणेकरून तो कूलडाउन करू शकेल:

      class Hero extends GameObject {
       constructor(x, y) {
         super(x, y);
         (this.width = 99), (this.height = 75);
         this.type = "Hero";
         this.speed = { x: 0, y: 0 };
         this.cooldown = 0;
       }
       fire() {
         gameObjects.push(new Laser(this.x + 45, this.y - 10));
         this.cooldown = 500;
      
         let id = setInterval(() => {
           if (this.cooldown > 0) {
             this.cooldown -= 100;
           } else {
             clearInterval(id);
           }
         }, 200);
       }
       canFire() {
         return this.cooldown === 0;
       }
      }
      

या टप्प्यावर, तुमच्या गेममध्ये काही कार्यक्षमता आहे! तुम्ही तुमच्या अॅरो कीजसह नेव्हिगेट करू शकता, स्पेस बारसह लेसर शूट करू शकता आणि तुम्ही शत्रूंना मारल्यावर ते गायब होतात. खूप छान!

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: टक्कर शोधण्याच्या प्रणालीला सुधारित करा ज्यामध्ये पॉवर-अप्स अंमलात आणा जे अनियमितपणे तयार होतात आणि हिरो जहाजाने गोळा केल्यावर तात्पुरत्या क्षमता प्रदान करतात.

प्रॉम्प्ट: GameObject ला विस्तारित करणारा PowerUp वर्ग तयार करा आणि हिरो आणि पॉवर-अप्समधील टक्कर शोधणे अंमलात आणा. किमान दोन प्रकारचे पॉवर-अप्स जोडा: एक जो फायर रेट वाढवतो (कूलडाउन कमी करतो) आणि दुसरा जो तात्पुरता शील्ड तयार करतो. अनियमित अंतर आणि स्थानांवर पॉवर-अप्स तयार करण्यासाठी स्पॉन लॉजिक समाविष्ट करा.

---

🚀 आव्हान

स्फोट जोडा! स्पेस आर्ट रिपो मधील गेम अॅसेट्सवर एक नजर टाका आणि लेसर एलियनला लागल्यावर स्फोट जोडण्याचा प्रयत्न करा.

व्याख्यानोत्तर प्रश्नमंजुषा

व्याख्यानोत्तर प्रश्नमंजुषा

पुनरावलोकन आणि स्व-अभ्यास

आत्तापर्यंत तुमच्या गेममधील अंतरांवर प्रयोग करा. तुम्ही त्यात बदल केल्यावर काय होते? JavaScript टाइमिंग इव्हेंट्स बद्दल अधिक वाचा.

असाइनमेंट

टक्कर शोधा

---

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.