هي لعبة عن قرب مستوحاة من لعبة Minesweeper.
يعود إليكم الفريق الذي قدّم لكم squoosh.app. في هذه المرة، أنشأنا لعبة مستنِدة إلى الويب باسم PROXX (proxx.app). PROXX هي لعبة تعتمد على القرب مستوحاة من لعبة Minesweeper الأسطورية. وتقع اللعبة في الفضاء ومهمتك هي معرفة أماكن الثقوب السوداء. وهو يعمل على جميع أنواع الأجهزة، بدءًا من أجهزة الكمبيوتر المكتبي ووصولاً إلى الهواتف المزوّدة بميزات أساسية. يمكن للمستخدمين تشغيل اللعبة باستخدام الماوس أو لوحة المفاتيح أو لوحة التوجيه أو حتى باستخدام قارئ شاشة.
خط الأساس
قبل إنشاء هذه اللعبة، وضعنا الأهداف والميزانيات التالية للتطبيق:
- التجربة الأساسية نفسها: يجب أن تعمل جميع الأجهزة بالطريقة نفسها.
- سهل الاستخدام: الماوس ولوحة المفاتيح واللمس ولوحة التحكّم وقارئات الشاشة
- الأداء:
- أقل من 25 كيلوبايت من الحمولة الأولية
- أقل من 5 ثوانٍ لوقت الاستجابة (time to interactive) على شبكة الجيل الثالث البطيئة
- عرض صور متحركة بسلاسة بمعدّل 60 لقطة في الثانية
عوامل الويب
تتألف اللعبة من 4 كيانات رئيسية، وهي منطق اللعبة الأساسي وخدمة واجهة المستخدم وخدمة الحالة ورسومات الرسوم المتحركة. بما أنّنا عرفنا منذ البداية أنّه علينا تشغيل رسومات متحركة بشكل كبير في سلسلة المهام الرئيسية، نقلنا منطق اللعبة وخدمة الحالة إلى عامل ويب من أجل إبقاء سلسلة المهام الرئيسية خالية قدر الإمكان.
المعالجة المسبقة في وقت التصميم
تم إنشاء واجهة المستخدم باستخدام Preact، ما يتيح لنا تحقيق الهدف القوي لحمولة أولية أقل من 25 كيلوبايت. من أجل تقديم تجربة تحميل أولية جيدة، قرّرنا تقديم عرض أولي مُعدّ مسبقًا. نُجري المعالجة المسبقة في وقت التصميم باستخدام Puppeteer للوصول إلى الصفحة العلوية والسماح لواجهة preact بملء نموذج 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.
طاب يومك! سوما، جاك، ماريمو