31 KiB

Raw Blame History

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

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

स्टार वॉर्समधील तो क्षण आठवा जेव्हा ल्यूकच्या प्रोटॉन टॉरपीडोने डेथ स्टारच्या एक्झॉस्ट पोर्टला हिट केले. त्या अचूक टक्कर शोधामुळे आकाशगंगेचे भविष्य बदलले! गेम्समध्ये, टक्कर शोधणे याच प्रकारे कार्य करते - ते वस्तू कधी परस्परसंवाद करतात आणि पुढे काय होते हे ठरवते.

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

शेवटी, तुमच्याकडे एक कार्यरत कॉम्बॅट सिस्टम असेल जिथे लेसर शत्रूंना नष्ट करतात आणि टक्कर गेम इव्हेंट्स ट्रिगर करतात. हेच टक्कर तत्त्व भौतिकशास्त्राच्या सिम्युलेशनपासून ते परस्पर वेब इंटरफेसपर्यंत सर्वत्र वापरले जातात.

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

टक्कर शोधणे

टक्कर शोधणे अपोलो लूनर मॉड्यूलवरील निकटता सेन्सर्ससारखे कार्य करते - ते सतत अंतर तपासते आणि वस्तू खूप जवळ आल्यावर अलर्ट ट्रिगर करते. गेम्समध्ये, ही प्रणाली वस्तू कधी परस्परसंवाद करतात आणि पुढे काय घडले पाहिजे हे ठरवते.

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

आयताचे प्रतिनिधित्व

प्रत्येक गेम ऑब्जेक्टला समन्वय सीमा आवश्यक असते, जसे की मंगळ ग्रहावरील मंगळ पाथफाइंडर रोव्हरने त्याचे स्थान मॅप केले. येथे आम्ही या सीमा समन्वय कसे परिभाषित करतो:

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

याचा अर्थ समजून घेऊया:

वरचा कडा: तुमचा ऑब्जेक्ट उभ्या दिशेने कुठे सुरू होतो (त्याचा y स्थान)
डावा कडा: तो आडव्या दिशेने कुठे सुरू होतो (त्याचा x स्थान)
खालचा कडा: y स्थानात उंची जोडा - आता तुम्हाला ते कुठे संपते हे माहित आहे!
उजवा कडा: x स्थानात रुंदी जोडा - आणि तुमच्याकडे संपूर्ण सीमा आहे

छेदन अल्गोरिदम

आयत छेद शोधणे हबल स्पेस टेलिस्कोप कसे ठरवते की त्याच्या दृश्य क्षेत्रात खगोलीय वस्तू ओव्हरलॅप होत आहेत की नाही यासारखे तर्क वापरते. अल्गोरिदम विभाजन तपासतो:

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

विभाजन चाचणी रडार प्रणालीसारखी कार्य करते:

आयत 2 पूर्णपणे आयत 1 च्या उजवीकडे आहे का?
आयत 2 पूर्णपणे आयत 1 च्या डावीकडे आहे का?
आयत 2 पूर्णपणे आयत 1 च्या खाली आहे का?
आयत 2 पूर्णपणे आयत 1 च्या वर आहे का?

जर या अटींपैकी एकही खरी नसेल, तर आयत ओव्हरलॅप होत असले पाहिजे. ही पद्धत रडार ऑपरेटर कसे ठरवतात की दोन विमान सुरक्षित अंतरावर आहेत की नाही यासारखी आहे.

ऑब्जेक्ट जीवनचक्र व्यवस्थापित करणे

जेव्हा लेसर शत्रूला हिट करते, तेव्हा दोन्ही वस्तू गेममधून काढून टाकणे आवश्यक असते. तथापि, ऑब्जेक्ट्स मिड-लूप हटवणे क्रॅश होऊ शकते - अपोलो गाइडन्स संगणकासारख्या सुरुवातीच्या संगणक प्रणालींमध्ये कठोरपणे शिकलेला धडा. त्याऐवजी, आम्ही "डिलीटसाठी चिन्हांकित करा" पद्धत वापरतो जी फ्रेम्स दरम्यान वस्तू सुरक्षितपणे काढून टाकते.

येथे आम्ही काहीतरी कसे काढून टाकतो:

// Mark object for removal
enemy.dead = true;

ही पद्धत का कार्य करते:

आम्ही ऑब्जेक्टला "मृत" म्हणून चिन्हांकित करतो परंतु लगेच हटवत नाही
हे चालू गेम फ्रेम सुरक्षितपणे पूर्ण होऊ देते
आधीच हटवलेल्या वस्तू वापरण्याचा प्रयत्न केल्यामुळे कोणतेही क्रॅश होत नाहीत!

नंतर पुढील रेंडर सायकलपूर्वी चिन्हांकित वस्तू फिल्टर करा:

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

हे फिल्टरिंग काय करते:

फक्त "जिवंत" वस्तूंसह ताजी यादी तयार करते
"मृत" म्हणून चिन्हांकित केलेल्या वस्तू काढून टाकते
तुमचा गेम सुरळीत चालू ठेवते
नष्ट झालेल्या वस्तूंच्या संचयामुळे मेमरी बोट टाळते

लेसर यांत्रिकी अंमलात आणणे

गेम्समधील लेसर प्रोजेक्टाइल स्टार ट्रेकमधील फोटॉन टॉरपीडोसारख्या तत्त्वावर कार्य करतात - ते वेगळ्या वस्तू असतात ज्या सरळ रेषेत प्रवास करतात जोपर्यंत ते काहीतरी हिट करत नाहीत. प्रत्येक स्पेसबार प्रेस एक नवीन लेसर ऑब्जेक्ट तयार करते जे स्क्रीनवर फिरते.

हे कार्य करण्यासाठी, आम्हाला काही वेगवेगळ्या भागांचे समन्वय साधणे आवश्यक आहे:

अंमलात आणण्यासाठी मुख्य घटक:

तयार करा लेसर ऑब्जेक्ट्स जे हिरोच्या स्थानावरून तयार होतात
हँडल करा कीबोर्ड इनपुट लेसर तयार करणे ट्रिगर करण्यासाठी
व्यवस्थापित करा लेसर हालचाल आणि जीवनचक्र
अंमलात आणा लेसर प्रोजेक्टाइलसाठी दृश्य प्रतिनिधित्व

फायरिंग दर नियंत्रण अंमलात आणणे

अमर्यादित फायरिंग दर गेम इंजिनला ओव्हरव्हेल्म करतील आणि गेमप्ले खूप सोपे करतील. वास्तविक शस्त्र प्रणालींना समान मर्यादा असतात - USS एंटरप्राइझच्या फेजर्सलाही शॉट्स दरम्यान रिचार्ज करण्यासाठी वेळ आवश्यक होता.

आम्ही एक कूलडाउन प्रणाली अंमलात आणू जी जलद फायर स्पॅमिंग रोखते आणि प्रतिसादात्मक नियंत्रण राखते:

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

class Weapon {
  constructor() {
    this.cooldown = null;
  }
  
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // Create laser projectile
      this.cooldown = new Cooldown(500);
    } else {
      // Weapon is still cooling down
    }
  }
}

कूलडाउन कसे कार्य करते:

तयार झाल्यावर, शस्त्र "हॉट" सुरू होते (आतापर्यंत फायर करू शकत नाही)
टाइमआउट कालावधीनंतर, ते "कूल" होते (फायर करण्यासाठी तयार)
फायर करण्यापूर्वी, आम्ही तपासतो: "शस्त्र कूल आहे का?"
हे स्पॅम-क्लिकिंग रोखते आणि नियंत्रण प्रतिसादात्मक ठेवते

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

टक्कर प्रणाली तयार करणे

तुम्ही तुमच्या विद्यमान स्पेस गेम कोडला टक्कर शोध प्रणाली तयार करण्यासाठी विस्तारित कराल. आंतरराष्ट्रीय स्पेस स्टेशनच्या स्वयंचलित टक्कर टाळण्याच्या प्रणालीसारखे, तुमचा गेम सतत वस्तूंच्या स्थानावर नजर ठेवेल आणि छेदनांना प्रतिसाद देईल.

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

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

अंमलात आणण्यासाठी टक्कर नियम

गेम यांत्रिकी जोडण्यासाठी:

लेसर शत्रूला हिट करते: लेसर प्रोजेक्टाइलने हिट केल्यावर शत्रू ऑब्जेक्ट नष्ट होतो
लेसर स्क्रीनच्या सीमेला हिट करते: स्क्रीनच्या वरच्या कडावर पोहोचल्यावर लेसर काढून टाकला जातो
शत्रू आणि हिरो टक्कर: छेदन झाल्यावर दोन्ही वस्तू नष्ट होतात
शत्रू तळाशी पोहोचतो: शत्रू स्क्रीनच्या तळाशी पोहोचल्यावर गेम ओव्हर स्थिती

तुमचे विकास वातावरण सेट करणे

चांगली बातमी - आम्ही तुमच्यासाठी आधीच बहुतेक तयारी केली आहे! तुमच्या सर्व गेम अ‍ॅसेट्स आणि मूलभूत रचना your-work सबफोल्डरमध्ये तयार आहेत, थंड टक्कर वैशिष्ट्ये जोडण्यासाठी तयार आहेत.

प्रकल्प रचना

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

फाइल संरचना समजून घेणे:

सामाविष्ट करते गेम ऑब्जेक्ट्ससाठी आवश्यक असलेले सर्व स्प्राइट प्रतिमा
समाविष्ट करते मुख्य HTML दस्तऐवज आणि जावास्क्रिप्ट अ‍ॅप्लिकेशन फाइल
प्रदान करते स्थानिक विकास सर्व्हरसाठी पॅकेज कॉन्फिगरेशन

विकास सर्व्हर सुरू करणे

तुमच्या प्रकल्प फोल्डरमध्ये जा आणि स्थानिक सर्व्हर सुरू करा:

cd your-work
npm start

ही कमांड अनुक्रमिका:

डायरेक्टरी बदलते तुमच्या कार्यरत प्रकल्प फोल्डरमध्ये
स्थानिक HTTP सर्व्हर सुरू करते http://localhost:5000 वर
तुमच्या गेम फाइल्स सर्व्ह करते चाचणी आणि विकासासाठी
सक्षम करते स्वयंचलित रीलोडिंगसह थेट विकास

तुमच्या ब्राउझरमध्ये http://localhost:5000 उघडा आणि हिरो आणि शत्रू स्क्रीनवर रेंडर केलेले तुमचे चालू गेम स्टेट पहा.

टप्प्याटप्प्याने अंमलबजावणी

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

1. आयत टक्कर सीमा जोडा

प्रथम, आपल्या गेम ऑब्जेक्ट्सना त्यांच्या सीमा कशा वर्णन करायच्या ते शिकवूया. तुमच्या 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
  );
}

हा अल्गोरिदम कार्य करतो:

चाचणी घेतो आयतांमधील चार विभाजन अटी
false परत करते जर कोणतीही विभाजन अट खरी असेल
टक्कर सूचित करते जेव्हा कोणतेही विभाजन अस्तित्वात नसते
कार्यक्षम छेदन चाचणीसाठी नकारात्मक तर्क वापरतो

3. लेसर फायरिंग प्रणाली अंमलात आणा

येथे गोष्टी रोमांचक होतात! लेसर फायरिंग प्रणाली सेट करूया.

संदेश स्थिरांक

प्रथम, काही संदेश प्रकार परिभाषित करूया जेणेकरून आमच्या गेमचे वेगवेगळे भाग एकमेकांशी संवाद साधू शकतील:

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

हे स्थिरांक प्रदान करतात:

अ‍ॅप्लिकेशनमध्ये इव्हेंट नावे प्रमाणित करतात
गेम सिस्टम्समधील सुसंगत संवाद सक्षम करतात
इव्हेंट हँडलर नोंदणीमध्ये टायपो टाळतात

कीबोर्ड इनपुट हाताळणी

तुमच्या की इव्हेंट लिसनरमध्ये स्पेस की डिटेक्शन जोडा:

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

हा इनपुट हँडलर:

स्पेस की प्रेस शोधतो keyCode 32 वापरून
प्रमाणित इव्हेंट संदेश प्रसारित करतो
डिकपल्ड फायरिंग लॉजिक सक्षम करतो

इव्हेंट लिसनर सेटअप

तुमच्या initGame() फंक्शनमध्ये फायरिंग वर्तन नोंदवा:

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

हा इव्हेंट लिसनर:

स्पेस की इव्हेंट्सला प्रतिसाद देतो
फायरिंग कूलडाउन स्थिती तपासतो
परवानगी असल्यास लेसर तयार करणे ट्रिगर करतो

लेसर-शत्रू परस्परसंवादांसाठी टक्कर हाताळणी जोडा:

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

हा टक्कर हँडलर:

दोन्ही वस्तूंसह टक्कर इव्हेंट डेटा प्राप्त करतो
दोन्ही वस्तूंना काढून टाकण्यासाठी चिन्हांकित करतो
टक्कर नंतर योग्य साफसफाई सुनिश्चित करतो

4. लेसर वर्ग तयार करा

एक लेसर प्रोजेक्टाइल अंमलात आणा जे वर हलते आणि त्याचे स्वतःचे जीवनचक्र व्यवस्थापित करते:

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

हा वर्ग अंमलबजावणी:

GameObject विस्तारित करते मूलभूत कार्यक्षमता वारसा मिळवण्यासाठी
लेसर स्प्राइटसाठी योग्य परिमाण सेट करते
setInterval() वापरून स्वयंचलित वर हलणे तयार करते
स्क्रीन टॉपवर पोहोचल्यावर स्वतःचा नाश हाताळतो
त्याचे स्वतःचे अ‍ॅनिमेशन टाइमिंग आणि साफसफाई व्यवस्थापित करते

5. टक्कर शोध प्रणाली अंमलात आणा

व्यापक टक्कर शोध फंक्शन तयार करा:

function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter(go => go.type === "Laser");
  
  // Test laser-enemy collisions
  lasers.forEach((laser) => {
    enemies.forEach((enemy) => {
      if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
        eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
          first: laser,
          second: enemy,
        });
      }
    });
  });

  // Remove destroyed objects
  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;
  }
}

वाढवलेल्या हिरो वर्गाचे समजून घेणे:

कूलडाउन टाइमर शून्यावर प्रारंभ करते (फायर करण्यासाठी तयार)
हिरो जहाजाच्या वर स्थित लेसर ऑब्जेक्ट तयार करते
जलद फायरिंग रोखण्यासाठी कूलडाउन कालावधी सेट करते
इंटरव्हल-आधारित अद्यतनांचा वापर करून कूलडाउन टाइमर कमी करते
canFire() पद्धतीद्वारे फायरिंग स्थिती तपासणी प्रदान करते

तुमची अंमलबजावणी चाचणी करणे

तुमच्या स्पेस गेममध्ये आता पूर्ण टक्कर शोधणे आणि कॉम्बॅट यांत्रिकी आहेत. 🚀 या नवीन क्षमता चाचणी करा:

नेव्हिगेट करा बाण कीजसह हालचाल नियंत्रण सत्यापित करण्यासाठी
लेसर फायर करा स्पेसबारसह - कूलडाउन स्पॅम-क्लिकिंग कसे रोखते ते पहा
टक्कर निरीक्षण करा जेव्हा लेसर शत्रूंना हिट करतात, काढून टाकणे ट्रिगर करतात
साफसफाई सत्यापित करा नष्ट झालेल्या वस्तू गेममधून गायब झाल्यामुळे

तुम्ही अंतराळ यान नेव्हिगेशन आणि रोबोटिक्स मार्गदर्शन करणाऱ्या

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

31 KiB Raw Blame History