في الجزء الأخير قمنا بإنشاء سفينة اللاعب وجعلناها تتحرك. في هذا الجزء سنقوم بإنشاء الأعداء وجعلهم يتحركون. ومن ثم سنسقطهم!

خلق الأعداء

سنفعل شيئًا مشابهًا كما فعلنا عندما أنشأنا الرموز النقطية. سنقوم بإنشاء عدو نموذجي سنقوم باستنساخه في كل مرة نريد إنشاء عدو جديد. نحتاج أيضًا إلى تتبع الأعداء عبر مصفوفة لأنه من الممكن أن يكون هناك أكثر من واحد في نفس الوقت.

ولكن أولاً، سنقوم بإنشاء الطريقة التي تخلق العدو. أضف الكود التالي بعد طريقة 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، بحيث يكون العدو خارج الشاشة مباشرةً، وسينتقل إليها.

في الخطوة التالية، نحتاج إلى استدعاء هذه الطريقة لإنشاء عدو جديد كل بضع ثوانٍ.

تفرخ الأعداء

سنستخدم طريقة setInterval لهذا الغرض. أضف الكود التالي مباشرة بعد المكان الذي حددنا فيه مصفوفة التعداد النقطي:

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

نقوم بإنشاء مجموعة جديدة تسمى الأعداء لتتبع جميع الأعداء. نقوم بعد ذلك بإنشاء متغير جديد يسمى EnestSpawnInterval الذي يحدد عدد المرات التي نريد فيها إنتاج عدو جديد. نقوم بعد ذلك بإنشاء طريقة جديدة تسمى SpawnEnemy والتي تقوم بإنشاء عدو جديد وإضافته إلى مجموعة الأعداء والمرحلة. ثم نسمي هذه الطريقة كل ميلي ثانية من العدو SpawnInterval باستخدام طريقة setInterval.

رائع، لدينا الآن أعداء يظهرون في أعلى الشاشة كل 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) إلى اللعبة ونتتبع نتيجة اللاعب ومستواه وحياته.


  
    

      
  
  
    

      
 إعداد PixiJS باستخدام Vite وTypeScript
      
السيد. Linxed ・ 20 أبريل
      

        #webdev
        #جافا سكريبت
        #مبتدئين
        #درس تعليمي
      
    
  





  
    

      
  
  
    

      
أنجز المزيد من خلال "عبادة القيام به"
      
السيد. Linxed ・ 18 فبراير
      

        #إنتاجية
        #مبتدئين
        #يناقش
        #تحفيز
      
    
  





لا تنس الاشتراك في النشرة الإخبارية الخاصة بي لتكون أول من يعرف عن البرامج التعليمية المشابهة لهذه.