هي فئة من ألعاب التقارب مستوحاة من لعبة minesweeper.
عاد الفريق الذي جلب لك squoosh.app. هذه المرة، أنشأنا لعبة مستندة إلى الويب اسمها PROXX (proxx.app). PROXX هي لعبة تقارب مستوحاة من اللعبة الأسطورية Minesweeper. تقع اللعبة في الفضاء، ومهمتك هي معرفة مكان الثقوب السوداء. تعمل هذه الخدمة على جميع أنواع الأجهزة، بدءًا من أجهزة الكمبيوتر المكتبية وصولاً إلى الهواتف العادية. يمكن للمستخدمين تشغيل اللعبة باستخدام الماوس ولوحة المفاتيح ولوحة التحكم حتى مع قارئ الشاشة.
خط الأساس
قبل إنشاء هذه اللعبة، نحدد الأهداف والميزانيات التالية للتطبيق:
- التجربة الأساسية نفسها: يجب أن تعمل جميع الأجهزة بالطريقة نفسها
- تسهيل الاستخدام: الماوس ولوحة المفاتيح واللمس ولوحة التحكّم وقارئات الشاشة
- الأداء:
- أقل من 25 كيلوبايت من الحمولة الأولية
- أقل من 5 ثوانٍ (وقت التفاعل) على شبكة الجيل الثالث البطيئة
- صور متحرّكة بمعدّل 60 لقطة في الثانية
عمال الويب
وتتألف اللعبة من 4 كيانات رئيسية، وهي منطق اللعبة الأساسية وخدمة واجهة المستخدم وخدمة الحالة والرسومات المتحركة. وبما أنّنا عرفنا منذ البداية أنّنا بحاجة إلى تشغيل رسومات متحرّكة بشكل كبير على سلسلة التعليمات الرئيسية، نقلنا منطق اللعبة وخدمة الحالة إلى عامل ويب لإبقاء سلسلة التعليمات الرئيسية مجانية قدر الإمكان.
العرض المُسبَق لوقت الإنشاء
تم تصميم واجهة المستخدم باستخدام Preact حيث تتيح لنا تحقيق هدفنا القوي لحمولة أولية يقل حجمها عن 25 كيلوبايت. لتوفير تجربة تحميل مبدئية جيدة، قررنا عرض العرض الأول مسبقًا. نعرض المحتوى مسبقًا في وقت الإنشاء باستخدام Puppeteer للوصول إلى أعلى الصفحة ونترك مسبقًا ملء نموذج العناصر في المستند (DOM). يتم بعد ذلك نشر نموذج العناصر في المستند (DOM) على شكل تسلسلي إلى HTML وحفظه باسم index.html
لوحة الرسم المتحرك، (غير مرئي) DOM لإمكانية الوصول
نعرض رسومات اللعبة في لوحة باستخدام WebGL. تكون لوحة الرسم مسئولة عن الرسوم المتحركة في الخلفية واللوحة الأخرى لشبكة اللعبة في الأعلى. لدينا أيضًا جدول HTML يحتوي على أزرار لأسباب متعلقة بإمكانية الوصول، أعلى كلتا اللوحتين، ولكنه يظهر غير مرئي (التعتيم: 0). على الرغم من أنّ ما تراه هو عرض لوحة حالة اللعبة، يتفاعل اللاعب مع جدول DOM غير المرئي، ما يتيح لنا إرفاق مستمعي الأحداث والاعتماد على إدارة التركيز في المتصفّح.
من خلال الاحتفاظ بعنصر DOM في لوحة الرسم، يمكننا الاستفادة من ميزات تسهيل الاستخدام المضمَّنة في المتصفّحات. على سبيل المثال: عن طريق ضبط role="grid" في جدول الألعاب،
يمكن لقارئات الشاشة الإعلان عن صف وعمود الخلية محل التركيز
دون الحاجة إلى تنفيذ ذلك.
التجميع لتقسيم الرمز وتجميعه
يصل الحجم الإجمالي للتطبيق إلى 100 كيلوبايت مضغوطة في ملف gzip. وبالتالي، 20 كيلوبايت مخصصة للحمولة الأولية (index.html). نستخدم Rollup.js لهذا المشروع. لقد شاركنا التبعيات المشتركة بين سلسلة التعليمات الرئيسية وعامل الويب لدينا، ويمكن لـ Rollup وضع هذه التبعيات المشتركة في مقطع منفصل يجب تحميله مرة واحدة فقط. تكرر الحزم الأخرى مثل webpack التبعيات المشتركة التي ينتج عنها التحميل المزدوج.
التوافق مع الهواتف العادية
تحصد الهواتف الذكية العادية مثل هواتف KaiOS رواجًا سريعًا. هذه الأجهزة محدودة بالموارد بشكل كبير، ولكن أسلوبنا في استخدام موظفي الويب كلما تمكّنا من توفير تجربة تفاعلية بشكل كبير على هذه الهواتف أيضًا. بما أن الهواتف العادية تأتي مع واجهة إدخال مختلفة (لوحة مفاتيح ومفاتيح أرقام، بدون شاشة تعمل باللمس)، فقد طبّقنا أيضًا واجهة تعتمد على المفتاح.
الخطوات التالية
لقد قضينا وقتًا ممتعًا في تصميم هذه اللعبة قبل انعقاد مؤتمر Google I/O لعام 2019، لذا سنأخذ بعض الوقت المناسب للراحة، لكن نخطط للعودة مع المزيد من المستندات المفصّلة حول كل جانب من جوانب اللعبة.
وحتى ذلك الحين، اطلع على المحادثة التي قدمتها ماريكو في مؤتمر I/O حول هذا المشروع.
ويمكنك تصفُّح الرمز في مستودع proxx GitHub.
طاب يومك! سورما، جيك، ماريكو