cssQuake: لعبة Quake تعمل في المتصفح بـHTML وCSS دون canvas
نسخة من لعبة id Software الصادرة عام 1996 تعرض عالم BSP الخاص بها كعُقد DOM حقيقية موضوعة بتحويلات CSS من نوع matrix3d عبر محرك PolyCSS — بلا WebGL وبلا canvas وقابلة للفحص الكامل في أدوات المطور.
مشروع cssQuake من استوديو Layoutit يشغّل لعبة Quake التي أصدرتها id Software عام 1996 في المتصفح، لكن ليس بالطريقة التي تعمل بها هذه النسخ عادة. لا يوجد هنا سياق WebGL ولا عنصر canvas: فالهندسة المكانية لعالم BSP في اللعبة ممثَّلة بعناصر HTML حقيقية تُوضع بتحويلات matrix3d في CSS باستخدام محرك PolyCSS ثلاثي الأبعاد. نُشر المشروع على Hacker News وجمع 548 نقطة.
DOM حقيقي بدل canvas
في cssQuake تصبح أوجه العالم عُقد DOM: يُوضع كل وجه بتحويل matrix3d في CSS، ويُكسى بخلفيات CSS مبكسلة، ويُجمَّع في أشكال شبكية بدل رسمه على canvas. ويمكن فحص الناتج في أدوات مطوّري المتصفح كأي صفحة أخرى. ويصف المستودع المشروع بأنه نسخة من Quake تعرض عوالم BSP كهندسة HTML/CSS ثلاثية الأبعاد حقيقية وتعمل بلغة TypeScript.
المعالجة المسبقة لبيانات Quake
ولأن CSS هو من يتولى العرض، تأتي اللعبة بأصول جاهزة. يحوّل برنامج المعالجة المسبقة بيانات Quake الأصلية إلى JSON جاهز للمتصفح وإلى أصول صور وحزم عرض من PolyCSS. وتُفكّ الأنظمة اللونية عبر لوحة ألوان Quake إلى ملفات PNG، وتتحول تسلسلات الأنظمة المتحركة إلى مدخلات لرسوم CSS المتحركة، وتحصل خرائط الحلقات على حزم عرض مُجمّعة مسبقًا كي يربط المتصفح بنية DOM جاهزة للعالم بدل إعادة بناء كل سطح عند بدء التشغيل. وتقرأ خطوة التحضير في المستودع ملفات shareware أو ملفات PAK محلية؛ أما بيانات لعبة Quake الأصلية فغير مضمّنة في المستودع.
اللعب والتنقيح
تدعم اللعبة تحكمًا قياسيًا بلوحة المفاتيح والفأرة — WASD للحركة والفأرة للنظر والنقر للرمي ومسافة للقفز وshift للجري وctrl للانحناء — إضافة إلى قائمة تُدار بأسهم الاتجاهات. ويعرض قسم التنقيح الحدود الخارجية ولوحة إحصاءات وعدّاد الإطارات في الثانية، بينما تشمل المفاتيح الإضاءة الديناميكية والجسيمات والأعداء وعلامة التصويب والأضرار والحركة، ما يجعل النسخة مفيدة للعرض كما هي مفيدة للعب. وهناك أيضًا شاشة لعدة لاعبين لإنشاء غرف باختيار الخريطة وحد الرميات وحد اللاعبين، ووضع للتسجيل.
التضمين والترخيص
يمكن تشغيل cssQuake داخل إطار iframe؛ وإضافة relayKeys=1 تجعل اللعبة ترسل إلى الصفحة الأم أحداث مفاتيح اللعب المفلترة كرسائل cssquake:key، وعلى الصفحة الأم التحقق من event.origin قبل قراءتها. الكود منشور برخصة GPL-2.0-only على GitHub حيث جمع المستودع 182 نجمة و292 إيداعًا. ولأن محرك تنسيق المتصفح نفسه هو من يقوم بالعرض، فالمشروع اختبار لمدى ما يمكن دفعه بتحويلات CSS: لعبة تصويب من منظور الشخص الأول من عام 1996 تعمل كعُقد DOM منسّقة.
SiTech — تطوير ويب مدعوم بالذكاء الاصطناعي
نبني مواقع سريعة وعصرية وندمج الذكاء الاصطناعي في سير عمل الشركات. لديك مشروع أو سؤال؟ يسعدنا مساعدتك.