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

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

प्री-लेक्चर क्विझ

प्री-लेक्चर क्विझ

या धड्यात तुम्ही 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.
    }
  }
}

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

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

तुम्ही मागील धड्यातील कोड (जो तुम्ही साफसफाई करून पुन्हा संरचित केला पाहिजे) घेऊन त्यात विस्तार कराल. भाग 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 ऑब्जेक्टमध्ये तीन कॉन्स्टंट्स जोडा:

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

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

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

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

---

🚀 चॅलेंज

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

पोस्ट-लेक्चर क्विझ

पोस्ट-लेक्चर क्विझ

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

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

असाइनमेंट

टक्कर शोधा

---

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