لعبة Canvas Quest — مغامرة النيون (Neon Platformer Game)

تخيّل أن تفتح المتصفح فتجد أمامك عالماً كاملاً من النيون والظلال — هذا هو ما بنيته في Canvas Quest: مغامرة النيون. لم أستخدم محرك ألعاب جاهز، بل بدأت بـ HTML5 Canvas كلوحة فارغة، ورسمت كل شيء بالكود: سماء داكنة مرصعة بالنجوم، منصات عائمة تتوهج باللون السماوي، بلورات زرقاء تتلألأ كأنها حية، وشخصية صفراء مربعة تحمل في بساطتها كل جاذبية المغامرة. كان التحدي الحقيقي ليس الرسم فحسب، بل إعطاء هذا العالم قوانين فيزيائية حقيقية. بنيت نظام حركة من الصفر — سرعة أفقية وعمودية، جاذبية متدرجة، وقفزات تحمل وزناً حقيقياً. ثم أضفت طبقة الخطر: أعداء ورديون يتحركون بانتظام على منصاتهم، ومسامير حمراء موزعة بذكاء لتجعل كل قفزة حساباً. لكن المكافأة كانت البلورات الزرقاء، كل واحدة تضيف نقاطاً إلى رصيد اللاعب وتقربه من البوابة. صممت ستة مستويات متدرجة الصعوبة، من المستوى الأول الذي يعلمك المشي والقفز، إلى "كهف الصدى" الذي يختبر كل ما تعلمته. في أعلى الشاشة، تتوهج واجهة اللاعب بثلاث قلوب وردية تمثل الحياة، وعداد نقاط يتصاعد بكل بلورة، ورقم المستوى الحالي. عندما يصطدم اللاعب بعدو أو يسقط في الفراغ، تنبض القلوب وتختفي واحدة تلو الأخرى، حتى تظهر شاشة "انتهت المحاولة" مع النقاط المحصلة، تدعو اللاعب لتحدي النيون مرة أخرى. لكن اللعبة لم تكن مجرد صفحة تفتح وتلعب. أردت أن يكون للاعب هوية في هذا العالم، فبنيت نظام تسجيل دخول وإنشاء حساب كامل بواجهة عصرية داكنة بنفس هوية النيون. اللاعب يدخل باسمه الخاص، ويحفظ تقدمه، ويتنقل بسلاسة بين شاشة الدخول وعالم اللعب. التصميم بالكامل باللغة العربية مع دعم RTL — من شاشة تسجيل الدخول إلى أسماء المستويات إلى تعليمات التحكم في أسفل الشاشة. خلف الكواليس، كانت المعركة تقنية حقيقية. اضطررت لبناء نظام Collision Detection (AABB) من الصفر لحساب التصادم بدقة بين الشخصية والمنصات المتحركة والأعداء. استخدمت Game State Machine لإدارة حالات اللعبة المختلفة — القائمة، اللعب، الفوز، الخسارة، الانتقال بين المستويات — دون أي تشتيت. وتحسين دورة الرسم بـ requestAnimationFrame لضمان سلاسة 60 إطاراً في الثانية على أي متصفح. خرج المشروع كـ لعبة ويب كاملة لا تحتاج لتحميل ولا إضافات، تعمل بمجرد فتح الرابط. عالم النيون الذي بدأ كفكرة أصبح حقيقة — له قوانينه، وأعداؤه، ومنصاته العائمة، وبواباته، ولاعبون يدخلون إليه بأسمائهم الخاصة. كل قفزة، كل بلورة، كل بوابة — كانت جزءاً من قصة أردت أن أرويها بلغة الكود.