Handle input, resize and accessible presentation

Input

1. Declare only the keyboard, touch and gamepad inputs you implement.
2. Check the context returned by init() when adapting the presentation.
3. Use keyboard events and pointer events within the game frame.
4. Ignore gameplay input while host-paused or outside an active run.
5. Clear held keys when paused so returning to the tab does not leave movement stuck.
6. Test on physical touch hardware.

Declaring input.touch: true does not implement your game’s touch behaviour. Games without touch support are excluded from phone and tablet browse.

Fixed and resizable rendering

For fixed logical coordinates, declare a shape and let the host fit the frame. Map pointer coordinates through the canvas’s displayed rectangle into your logical coordinate system.

For a resizable game, set display.resizable and handle resize:

import llvls from '@llvls/sdk';

const canvas = document.createElement('canvas');
document.body.append(canvas);
const resize = (viewport: llvls.Viewport): void => {
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  // Recompute your world-to-screen layout here.
};
llvls.on('resize', resize);
const context = await llvls.init();
resize(context.viewport);

This is a resize fragment, not a complete game; add the ready gate and lifecycle.

For pixel art, use a native drawing size matching the manifest’s aspect ratio and disable image smoothing as appropriate. Do not independently request fullscreen or navigate the parent page.

Respect safe-area information, reduced-motion preference and readable contrast. Test resizing during a menu, active play and a pause.