أقوم بإنشاء محرك لعبة!

مقدمة لهذه المغامرة العظيمة

منذ بضعة أسابيع، كنت أعمل بانتظام على مشروع أعتقد أنه قد يكون من المثير للاهتمام التحدث عنه، وهو إنشاء محرك ألعاب الفيديو الخاص بي في JavaScript وHTML5 استنادًا إلى اللوحة.

ربما تتساءل لماذا اخترت HTML5 وJavaScript لإنشاء ألعاب الفيديو؟ الجواب أقل روعة من السؤال، إن المنافسة بين المشاريع الضرورية لمدرستي (Zone01 Normandie) وحقيقة أن اللغات لديها كل ما هو ضروري لتنفيذ هذا المشروع هو ما دفعني إلى اختيار هذه التقنيات

لكن في الواقع هذه ليست اللغات التي كنت سأختارها كقاعدة وسأبدأ بالتأكيد في مغامرات أخرى من هذا النوع بلغات مختلفة بعد الانتهاء من هذه المغامرة.

بنيان

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

إلى هذه الفئات سأضيف فئة CollideBox التي ستسمح لي بإدارة صناديق التصادم لجميع الكائنات.

تحتوي فئة اللعبة على طريقة GameLoop التي سيتم تنفيذها في كل إطار (صورة) من اللعبة، وطريقة السحب التي سيتم استدعاؤها أثناء كل حلقة من حلقات اللعبة.

أما بالنسبة لفئة GameObject، فهي تحتوي على طريقة Step وطريقة Draw.
الأول ينفذ كل جولة من حلقة اللعبة والثاني في كل مرة يتم فيها استدعاء طريقة السحب لفئة GameLoop.

يسمح لك هذا بإنشاء ألعاب نظريًا عن طريق استيراد وحدة المحرك إلى المشروع.
لعرض النقوش المتحركة، اخترت استخدام واجهة برمجة التطبيقات canva المضمنة في HTML5 (المدمجة تعني أنها تأتي معها بشكل افتراضي)
سيسمح لي بعرض جميع النقوش المتحركة وإعادة قص الصور لإنشاء رسوم متحركة ستكون مفيدة للغاية بالنسبة لي!

بعد عدة أيام، أصبح بمقدوري عرض الرسوم المتحركة، بسرعة معينة، واكتشاف الاصطدامات عبر CollideBoxes.
والكثير من الأشياء الجميلة الأخرى التي سأدعك تراها أدناه:

فئة GameObject

class GameObject{
    constructor(game) { // Initialize the GameObject
        this.x = 0
        this.y = 0 
        this.sprite_img = {file: undefined, col: 1, row: 1, fw: 1, fh: 1, step: 0, anim_speed: 0, scale: 1}
        this.loaded = false
        this.game = game
        this.kill = false
        this.collision = new CollideBox()

        game.gObjects.push(this)

    };
    setSprite(img_path, row=1, col=1, speed=12, scale=1) {
        var img = new Image();
        img.onload = () => {
            console.log("image loaded")
            this.sprite_img = {file: img, col: col, row: row, fw: img.width / col, fh: img.height / row, step: 0, anim_speed: speed, scale: scale}
            this.onSpriteLoaded()
        };
        img.src = img_path


    }
    onSpriteLoaded() {}
    draw(context, frame) { // Draw function of game object
        if (this.sprite_img.file != undefined) {


            let column = this.sprite_img.step % this.sprite_img.col;
            let row = Math.floor(this.sprite_img.step / this.sprite_img.col);

           // context.clearRect(this.x, this.y, this.sprite_img.fw, this.sprite_img.fh);
            context.drawImage(
                this.sprite_img.file,
                this.sprite_img.fw * column,
                this.sprite_img.fh * row,
                this.sprite_img.fw,
                this.sprite_img.fh,
                this.x,
                this.y,
                this.sprite_img.fw * this.sprite_img.scale,
                this.sprite_img.fh * this.sprite_img.scale
            );

            if (frame % Math.floor(60 / this.sprite_img.anim_speed) === 0) {
                // Mise à jour de step seulement à 12 fps
                if (this.sprite_img.step  box.x &&
            this.collision.y  box.y
          )
    }
    onStep()   {};
}   

فئة اللعبة

class Game {
    constructor(width = 1400, height = 700) {
        this.gObjects = [];
        this.toLoad = [];
        this.timers = [];
        this.layers = [];
        this.canvas = document.getElementsByTagName("canvas")[0]

        this.canvas.width = width
        this.canvas.height = height
        this.context =  this.canvas.getContext("2d")
        this.context.globalCompositeOperation = 'source-over';
        this.inputs = {};
        this.mouse = {x: 0, y: 0}
        document.addEventListener('keydown', (e) => {
            this.inputs[e.key] = true;
        }, false);
        document.addEventListener('keyup', (e) => {
            this.inputs[e.key] = false;
        }, false);
        document.addEventListener('mousemove', (e) => {
            this.mouse.x = e.x;
            this.mouse.y = e.y;
        })
        document.addEventListener('mouseevent', (e) => {
            switch (e.button) {

            }
        })

    }
    draw(frame) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        console.log( this.canvas.width, this.canvas.heigh)
        for(let i = 0; i  {
            clock  = 1
            for(let i = 0; i 



هناك بالتأكيد الكثير من التحسينات أو الأخطاء الأخرى ولكن كل شيء يعمل، 

"ممتاز!" هل ستخبرني؟

سيكون ذلك أمرًا بسيطًا للغاية.


  
  
  الهموم


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

أتصور أنك تتذكر أن اختيارات التكنولوجيا التي تم اتخاذها تم اتخاذها لتتوافق مع متطلبات مدرستي Zone01...

حسنًا، لقد كانت اللغات المختارة جيدة بالفعل، لكنني لم أكن على علم بوجود تعليمات من شأنها أن تعيق المشروع بشكل خطير…

لقد مُنعنا من استخدام مكتبة Canva!

للتذكير، هذه هي المكتبة التي نستخدمها لعرض صورنا.


  
  
  ما هي الخطوة التالية؟


أثناء كتابتي لهذا النص، بدأت أيضًا في إعادة تصميم محرك اللعبة بالكامل، دون استخدام canva.

تم الانتهاء من مدونة التطوير هذه وستحصل على بقية هذه القصة قريبًا، لا تقلق.

بالنسبة لمدونة التطوير التالية، سأحاول بالتأكيد تجربة تنسيق جديد.

نأمل أن يكون هذا المحتوى قد ساعدك أو أمتعك أو على الأقل علمك بعض المواضيع. أتمنى لك نهاية سعيدة لليوم وترميزًا جيدًا.


  
  
  DevLogs 1.1: تم الانتهاء من المحرك، كيف يعمل؟



  
  
  سابقًا


قبل بضعة أشهر بدأت في إنشاء محرك ألعاب الفيديو الخاص بي، وانتهيت منه... منذ فترة طويلة، وبمساعدة العديد من الزملاء من Zone01، نجحنا في إنشاء لعبة مستوحاة من Super Mario Bros متاحة على موقعي الإلكتروني. صفحة Itch.io.

لقد استغرق تحديد تنسيق التقديم لمدونة التطوير هذه الكثير من الوقت، وأعترف أنني أخرت الموعد النهائي لكتابة هذه المدونة قليلاً أو حتى كليًا.

من خلال أخذ عذر ترددي لعدم العمل في هذا الموضوع بصبر، أجد نفسي الآن بعد شهرين من تاريخ الإصدار المخطط له أكتب في منطقة الاستراحة بمحطة حافلات روان بينما يجبرني قطاري الملغى على الانتظار لمدة ساعة إضافية. 

لذا دعونا نغطي جميع تفاصيل البنية، هذه البنية لم تتغير إلا قليلاً (بصرف النظر عن التكيف عن طريق تجنب استخدام اللوحات) منذ الجزء الأول من مدونة التطوير الخاصة بي.

لذلك سنتحدث عن المشروع الذي تم تنفيذه، وطريقة عملنا كفريق والمشاكل التي واجهناها.

انظر إلى هذا كتعليق على هذا المشروع، وآمل أن تتمكن من استخلاص بعض الدروس من هذه الكتابة والتي ستساعدك في أحد مشاريعك.


  
  
  المشروع


 كان المشروع هو إعادة إنشاء Super Mario Bros في JavaScript والبدء من الصفر، على الأقل من حيث الكود.

كانت المواصفات بسيطة، وكان علينا أن نحصل على لعبة ماريو بعدة مستويات، وهي طريقة لإنشاء مستويات جديدة ببساطة.

كان علينا أيضًا إنشاء لوحة نتائج وقائمة لضبط الخيارات.

كانت صعوبات هذا المشروع هي: 

• التمرير الأفقي للعناصر على الشاشة
• تحسين العناصر غير الموجودة على الشاشة

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

بعد حل هذه الصعوبات، قمنا بنشر هذه اللعبة على صفحة itch.io الخاصة بي حيث يمكنك الذهاب واختبارها.

هكذا تنتهي مدونة التطوير هذه، الآن انتهيت وسأكون قادرًا على الكتابة عن مشاريع أخرى و/أو مواضيع أخرى.

إذا كنت مهتمًا ولو قليلًا بما أقوله لك، فيمكنك الذهاب لرؤية مشاريعي المختلفة (بما في ذلك تلك الموجودة في مدونة التطوير هذه) على جيثب.

أتمنى لك بقية يوم سعيدة!