पिछले भाग में हमने खिलाड़ी का जहाज बनाया और उसे चलाया। इस भाग में हम शत्रु बनाएंगे और उन्हें आगे बढ़ाएंगे। और फिर हम उन्हें गोली मार देंगे!

शत्रुओं का निर्माण करना

हम कुछ वैसा ही करने जा रहे हैं जैसे हमने गोलियां बनाते समय किया था। हम एक टेम्पलेट शत्रु बनाने जा रहे हैं जिसे हम हर बार एक नया शत्रु बनाने के लिए क्लोन कर लेंगे। हमें एक सरणी के माध्यम से दुश्मनों पर नज़र रखने की भी ज़रूरत है क्योंकि एक ही समय में एक से अधिक भी हो सकते हैं।

लेकिन पहले, हम वह तरीका बनाएंगे जो दुश्मन पैदा करता है। CreateBullet विधि के बाद निम्नलिखित कोड जोड़ें:

let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25   (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

जैसा कि आप देख सकते हैं, यह काफी हद तक createBullet विधि के समान है। हम एक टेम्पलेट शत्रु बनाते हैं जिसे हम हर बार क्लोन करते हैं जब हम एक नया शत्रु बनाना चाहते हैं। फिर हम दुश्मन को स्क्रीन के शीर्ष पर एक यादृच्छिक x स्थिति में रखते हैं। दुश्मन का आकार खिलाड़ी के जहाज के समान है, लेकिन वह लाल और उल्टा है।

हम x और y गुणों को सेट करके दुश्मन के स्पॉन स्थान को निर्दिष्ट करते हैं। x प्रॉपर्टी को 25 और 480 - 50 के बीच एक यादृच्छिक मान पर सेट किया गया है, ताकि दुश्मन हमेशा गेम स्क्रीन के भीतर रहे। Y प्रॉपर्टी को -50 पर सेट किया गया है, ताकि दुश्मन स्क्रीन के ठीक बाहर हो, और उसमें चला जाए।

अगला, हमें हर कुछ सेकंड में एक नया दुश्मन बनाने के लिए इस विधि को कॉल करने की आवश्यकता है।

शत्रु पैदा करना

हम इसके लिए सेटइंटरवल विधि का उपयोग करेंगे। जहाँ हमने बुलेट्स ऐरे को परिभाषित किया है उसके ठीक बाद निम्नलिखित कोड जोड़ें:

const enemies: PIXI.Graphics[] = [];

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

हम सभी शत्रुओं पर नज़र रखने के लिए शत्रु नामक एक नई सारणी बनाते हैं। फिर हम एक नया वेरिएबल बनाते हैं जिसे एनिमीस्पॉनइंटरवल कहा जाता है जो निर्दिष्ट करता है कि हम कितनी बार एक नया दुश्मन पैदा करना चाहते हैं। फिर हम spawnEnemy नामक एक नई विधि बनाते हैं जो एक नया शत्रु बनाता है और उसे शत्रु सरणी और मंच में जोड़ता है। फिर हम सेटइंटरवल विधि का उपयोग करके प्रत्येक एनिमीस्पॉनइंटरवल मिलीसेकंड में इस विधि को कॉल करते हैं।

बढ़िया, अब हमारे पास हर 2.5 सेकंड में स्क्रीन के शीर्ष पर दुश्मन पैदा हो रहे हैं। लेकिन वे अभी तक आगे नहीं बढ़ रहे हैं, और हम उन्हें नहीं देख पाते क्योंकि वे स्क्रीन से बाहर हैं। आइए इसे ठीक करें।

दुश्मनों को हिलाना

हमें गेम लूप में दुश्मनों की स्थिति को अपडेट करने की आवश्यकता है। अपने गेम लूप में निम्नलिखित कोड जोड़ें, ठीक उसके नीचे जहां हम बुलेट की स्थिति अपडेट करते हैं:

for(let i = 0; i  app.screen.height   50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

कोड का यह हिस्सा सभी दुश्मनों पर लूप करेगा, उन्हें 2.5 पिक्सेल नीचे ले जाकर उनकी स्थिति अपडेट करेगा और जांच करेगा कि क्या वे सीमा से बाहर हैं। यदि वे हैं, तो हम उन्हें मंच और शत्रु समूह से हटा देते हैं।

अच्छा! यदि आप अभी अपना गेम चलाते हैं तो आप दुश्मनों को स्क्रीन के शीर्ष पर उभरते हुए और नीचे की ओर जाते हुए देखेंगे।

अब उन्हें मार गिराने का समय आ गया है!

दुश्मनों पर गोली चलाना

अपने गेम लूप में निम्नलिखित कोड जोड़ें, ठीक उसके नीचे जहां हम दुश्मनों की स्थिति अपडेट करते हैं:

for(let i = 0; i  enemy.x &&
            bullet.x  enemy.y &&
            bullet.y 


कोड का यह हिस्सा सभी गोलियों और सभी दुश्मनों पर लूप करेगा और जांच करेगा कि गोली किसी दुश्मन को लगी है या नहीं। यदि ऐसा होता है, तो हम गोली और दुश्मन दोनों को मंच और उनके संबंधित सरणी से हटा देते हैं।

जब कोई गोली दुश्मन को लगती है तो आप आंतरिक लूप को तोड़कर इस कोड को अनुकूलित कर सकते हैं, लेकिन अभी के लिए, यह ठीक है। आप बुलेट पोजीशन अपडेट लूप को बुलेट हिट चेक लूप के साथ भी जोड़ सकते हैं, लेकिन मैं इस ट्यूटोरियल की स्पष्टता के लिए उन्हें अलग रखना पसंद करता हूं।

और बस! अब आपके पास एक गेम है जहां आप बाएं और दाएं घूम सकते हैं, गोलियां चला सकते हैं और दुश्मनों को मार गिरा सकते हैं। अगले भाग में, हम खेल में कुछ HUD तत्व जोड़ने जा रहे हैं और खिलाड़ी के स्कोर, स्तर और जीवन पर नज़र रखेंगे।





  
    

      
    
  
  
    

      
वाइट और टाइपस्क्रिप्ट के साथ पिक्सीजेएस सेटअप
      
श्री। लिंक्सड ・ अप्रैल 20
      

        #वेबदेव
        #जावास्क्रिप्ट
        #शुरुआती
        #ट्यूटोरियल
      
    
  





  
    

      
    
  
  
    

      
"कल्ट ऑफ डन" के साथ और अधिक हासिल करें
      
श्री। लिंक्सड ・ फ़रवरी 18
      

        #उत्पादकता
        #शुरुआती
        #चर्चा करना
        #प्रेरणा
      
    
  







इससे मिलते-जुलते ट्यूटोरियल के बारे में सबसे पहले जानने के लिए मेरे न्यूज़लेटर पर साइन अप करना न भूलें।