نقدّم لك PROXX

لعبة تعتمد على القرب، مستوحاة من لعبة "ألغام minesweeper"

Mariko Kosaka

يعود إليكم الفريق الذي قدّم لكم squoosh.app. هذه المرة، أنشأنا لعبة على الويب باسم PROXX (proxx.app). ‫PROXX هي لعبة تعتمد على القرب مستوحاة من لعبة Minesweeper الأسطورية. تتمثّل لعبة "الثقوب السوداء" في مغامرة في الفضاء، ومهمتك هي العثور على الثقوب السوداء. وهو يعمل على جميع أنواع الأجهزة، بدءًا من أجهزة الكمبيوتر المكتبي ووصولاً إلى الهواتف المزوّدة بميزات أساسية. يمكن للمستخدمين تشغيل اللعبة باستخدام الماوس أو لوحة المفاتيح أو لوحة التوجيه، حتى مع استخدام قارئ شاشة.

PROXX على هاتف جوّال بسيط

خط الأساس

قبل إنشاء هذه اللعبة، وضعنا الأهداف والميزانيات التالية للتطبيق:

  • توفير التجربة الأساسية نفسها: يجب أن تعمل جميع الأجهزة بالطريقة نفسها.
  • يمكن الوصول إليه: الماوس ولوحة المفاتيح والشاشة التي تعمل باللمس ووحدة التحكّم في الألعاب وبرامج قراءة الشاشة
  • الأداء:
    • أقل من 25 كيلوبايت من الحمولة الأولية
    • أقل من 5 ثوانٍ لوقت الاستجابة (time to interactive) على شبكة الجيل الثالث البطيئة
    • عرض صور متحركة بسلاسة بمعدّل 60 لقطة في الثانية
جهاز Pixelbook يعمل بنظام PROXX
PROXX على جهاز Pixelbook.

عمال الويب

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

المعالجة المسبقة في وقت التصميم

تم إنشاء واجهة المستخدم باستخدام Preact، لأنّها تتيح لنا تحقيق هدفنا المكثّف لتحميل حِزمة أولية لا تقلّ عن 25 كيلوبايت. من أجل تقديم تجربة تحميل أولية جيدة، قرّرنا تقديم عرض أوّل مُعَدّ مسبقًا. نُجري المعالجة المسبقة في وقت التصميم باستخدام Puppeteer للوصول إلى الصفحة العلوية والسماح لواجهة preact بملء DOM. بعد ذلك، يتم تسلسل عنصر DOM الناتج إلى HTML وحفظه باسم index.html.

لوحة للصور المتحركة، ونموذج عناصر في المستند (غير مرئي) لإمكانية الاستخدام

نعرض رسومات اللعبة في لوحة رسم باستخدام WebGL. تتحمّل لوحة واحدة مسؤولية الصورة المتحركة في الخلفية ولوحة أخرى لشبكة اللعبة في الأعلى. لدينا أيضًا جدول HTML يحتوي على أزرار لتسهيل الاستخدام، ويظهر فوق كلتا اللوحةَين، ولكن تم إخفاؤه (الشفافية: 0). على الرغم من أنّ ما يظهر لك هو لوحة رسومات تعرض حالة اللعبة، يتفاعل اللاعب مع جدول DOM غير المرئي، ما يتيح لنا إمكانية إرفاق مستمعي حدث والاعتماد على إدارة التركيز في المتصفّح.

من خلال إبقاء عنصر DOM في اللوحة، يمكننا الاستفادة من ميزات تسهيل الاستخدام المضمّنة في المتصفّحات. على سبيل المثال: من خلال ضبط role="grid" على جدول اللعبة، يمكن لتطبيقات قراءة الشاشة الإعلان عن صف وعمود الخلية التي يتم التركيز عليها بدون الحاجة إلى تنفيذ ذلك.

تجميع الحِزم وتقسيم الرموز

ينخفض إجمالي حجم التطبيق إلى 100 كيلوبايت مضغوط بتنسيق gzip. من هذا الحجم، يتم تخصيص 20 كيلوبايت لتحميل المحتوى الأولي (index.html). نستخدم Rollup.js في هذا المشروع. لدينا تبعيات مشترَكة بين سلسلة المهام الرئيسية ومعالج الويب ، ويمكن أن تضع ميزة Rollup هذه التبيّعات المشترَكة في قطعة منفصلة لا يلزم تحميلها إلا مرة واحدة. إنّ أدوات تجميع الحِزم الأخرى، مثل webpack، تكرّر التبعيات المشترَكة مما يؤدي إلى التحميل المزدوج.

الهواتف العادية المتوافقة

تزداد شعبية الهواتف الذكية المزوّدة بميزات أساسية، مثل هواتف KaiOS، بشكلٍ سريع. هذه الأجهزة محدودة الموارد للغاية، ولكن سمح لنا النهج الذي نتّبعه في استخدام Web Workers كلما أمكننا بتقديم تجربة سريعة الاستجابة على هذه الهواتف أيضًا. بما أنّ الهواتف المزوّدة بميزات أساسية تأتي مع واجهة إدخال مختلفة (أداة تحكم اتجاهية وأرقام مفاتيح، بدون شاشة تعمل باللمس)، فعدنا أيضًا باستخدام واجهة مستندة إلى المفاتيح.

رجل يلعب لعبة PROXX على هاتف عادي أصفر
PROXX على هاتف جوّال بسيط

الخطوات التالية

لقد قضينا وقتًا رائعًا ولكنّنا كنّا مشغولين في إنشاء هذه اللعبة في الوقت المناسب لعرضها في مؤتمر Google I/O لعام 2019، لذلك سنأخذ بعض الوقت للاستراحة، ولكننا نخطّط للعودة بمزيد من مستندات التفصيل حول كلّ من هذه الجوانب في اللعبة.

وحتى ذلك الحين، يمكنك الاطّلاع على المحاضرة التي قدّمتها "ماريكو" في مؤتمر I/O حول هذا المشروع.

يمكنك تصفُّح الرمز البرمجي في مستودع proxx على GitHub.

طاب يومك! سوما، جاك، ماريمو