Pantalla completa, zonas seguras y esquinas del HUD en PlayDrop

Dibuja de borde a borde e impide que la página se desplace, se amplíe o permita seleccionar texto:

<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>

Calcula el tamaño del canvas a partir de su tamaño mostrado multiplicado por devicePixelRatio, y vuelve a dibujar con resize; las ventanas cambian de tamaño en ordenadores, tabletas y plegables, y cuando el teléfono gira. El fondo y la zona de juego van por todas partes, incluso bajo las muescas y los controles del host. Solo los elementos del HUD interactivos o que hay que leer deben evitarlos. No necesitas tu propio botón de pantalla completa.

Hay dos cosas que pueden cubrir los bordes:

• Las zonas seguras del hardware, como una muesca o el indicador de inicio, de CSS env(safe-area-inset-top|right|bottom|left).
• Los controles del host, de sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, en píxeles CSS medidos desde las esquinas superior izquierda y superior derecha de la ventana del juego.

Evita la unión de ambas, nunca su suma. Un elemento del HUD arriba a la izquierda puede ir debajo del rectángulo de la esquina o a su lado; en cualquier caso, usa el mayor de cada margen:

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)); }

• Un ancho y un alto de cero significan que nada cubre esa esquina, por ejemplo en la web de escritorio, donde los controles quedan fuera del juego.
• null significa un host antiguo que no informa de las esquinas: conserva tu diseño actual con zonas seguras.
• Los valores proceden de los controles que hay realmente en pantalla, como zonas táctiles de al menos 44 puntos en los móviles, y cambian con la rotación, el cambio de tamaño y los grupos. Léelos; nunca fijes un tamaño en el código ni reserves una franja superior de ancho completo.

Cancela la suscripción con la función devuelta cuando cierres el juego.

Declara dónde funciona el juego en catalogue.json: surfaceTargets enumera desktop, mobileLandscape y mobilePortrait, y primarySurface indica aquella para la que está diseñado el juego. Activa solo lo que hayas probado. Un juego vertical que se muestra en una pantalla ancha debe llenarla igualmente con un fondo coherente en lugar de franjas negras, y un juego instantáneo debe estar pensado ante todo para vertical.

Haz que los controles sean cómodos para los pulgares: al menos 44 píxeles CSS, lejos de las esquinas reservadas y de los bordes de la pantalla donde empiezan los gestos del sistema. Usa eventos de puntero, llama a preventDefault() en los toques del juego y admite teclado y ratón en el ordenador. Los mandos se tratan en grupos locales y mandos.