ملء الشاشة والمناطق الآمنة وزوايا واجهة اللعب في ألعاب PlayDrop

ارسم من حافة إلى حافة، وامنع الصفحة من التمرير والتكبير وتحديد النص:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<style>
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
  body { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  canvas { display: block; width: 100vw; height: 100dvh; }
</style>

احسب حجم عنصر canvas من حجمه المعروض مضروبًا في devicePixelRatio، وأعد الرسم عند resize؛ فالنوافذ يتغير حجمها على أجهزة الكمبيوتر والأجهزة اللوحية والأجهزة القابلة للطي وعند تدوير الهاتف. تمتد صور الخلفية وساحة اللعب إلى كل مكان، بما في ذلك تحت نتوءات الشاشة وأدوات تحكم المضيف. ولا تحتاج إلى تجنبها إلا عناصر واجهة اللعب التفاعلية والمقروءة. ولا تحتاج إلى زر خاص بك لملء الشاشة.

يمكن لشيئين أن يغطيا الحواف:

• المناطق الآمنة للجهاز، مثل نتوء الشاشة أو مؤشر الشاشة الرئيسية، من CSS env(safe-area-inset-top|right|bottom|left).
• أدوات تحكم المضيف، من sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }، بوحدات بكسل CSS مقيسة من الزاويتين العلويتين اليسرى واليمنى لمنطقة عرض اللعبة.

تجنّب المساحة التي يغطيها أيٌّ منهما، ولا تجمع المسافتين أبدًا. يمكن لعنصر واجهة لعب في أعلى اليسار أن يقع أسفل مستطيل الزاوية أو بجانبه؛ وفي الحالتين استخدم الأكبر من كل مسافة:

const root = document.documentElement.style;
function layoutHud(corners) {
  const left = corners?.topLeft ?? { width: 0, height: 0 };
  const right = corners?.topRight ?? { width: 0, height: 0 };
  root.setProperty("--pd-tl-h", `${left.height}px`);
  root.setProperty("--pd-tr-h", `${right.height}px`);
}
layoutHud(sdk.host.reservedCorners);
const stop = sdk.host.onReservedCornersChange(layoutHud);

.score { position: absolute; left: max(12px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top), var(--pd-tl-h, 0px)); }
.lives { position: absolute; right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top), var(--pd-tr-h, 0px)); }

• العرض والارتفاع الصفريان يعنيان أن لا شيء يغطي تلك الزاوية، كما على موقع الكمبيوتر، حيث تقع أدوات التحكم خارج اللعبة.
• تعني null مضيفًا أقدم لا يبلّغ عن الزوايا: احتفظ بتخطيطك الحالي مع المناطق الآمنة.
• تأتي القيم من أدوات التحكم الظاهرة فعلًا على الشاشة، مثل مناطق اللمس التي لا تقل عن 44 نقطة على الهواتف، وتتغير مع التدوير وتغيير الحجم والمجموعات. اقرأها؛ ولا تثبّت حجمًا في الكود أبدًا ولا تحجز شريطًا علويًا بعرض الشاشة كله.

ألغِ الاشتراك باستخدام الدالة المعادة عندما تُنهي اللعبة.

صرّح بالأماكن التي تعمل فيها اللعبة في catalogue.json: تسرد surfaceTargets القيم desktop وmobileLandscape وmobilePortrait، ويحدد primarySurface الواجهة التي صُممت لها اللعبة. لا تفعّل إلا ما اختبرته. واللعبة العمودية المعروضة على شاشة عريضة يجب أن تملأها مع ذلك بخلفية متناسقة بدل الأشرطة السوداء، ويجب أن تكون لعبة Instant عمودية أولًا.

اجعل أدوات التحكم مريحة للإبهام: 44 بكسل CSS على الأقل، بعيدًا عن الزوايا المحجوزة وحواف الشاشة حيث تبدأ إيماءات النظام. استخدم أحداث المؤشر، واستدعِ preventDefault() على لمسات اللعبة، وادعم لوحة المفاتيح والفأرة على الكمبيوتر. وتجد وحدات التحكم في المجموعات المحلية ووحدات التحكم.