Make your AI game playable with two thumbs

Map actions before drawing buttons

List the actions required during one round. For a simple platformer, movement and jump may be enough. Put frequent controls where they can be reached without covering the important part of the scene.

Keep the first layout generous. A small elegant button is no help if a thumb misses it during play. Test with the device held in the orientation your game expects.

I would avoid asking an AI assistant to invent the whole touch system in one pass. Start with one action and confirm that pressing, holding and releasing all behave correctly.

Treat cancellation as a real release

A touch can end outside the button, be interrupted by browser behavior or disappear when the app loses focus. Your control state must recover from those cases instead of leaving the player moving forever.

Use the input system's documented pointer handling and cancellation behavior. Keep the visible pressed state tied to the same input state that drives the game, so the interface doesn't suggest that a stuck action has stopped.

Test two simultaneous touches if the design requires them. Moving and jumping together is a different test from trying each button separately.

Let the device expose the problems

Play on a real phone and watch where your hands obscure the scene. Move essential information away from those areas. Check text size, safe screen areas and whether browser scrolling or gestures interfere with play.

Try rotating the device, switching away and returning, and restarting while an input is held. These transitions are often where a desktop-first control system reveals its assumptions.

I'd let another person play without demonstrating the controls first. Ask which action they tried to make and where they expected to press. Their hesitation is more useful than a general verdict that the game feels fine.

Sources & further reading

• MDN: mobile touch controls — accessed Sep 9, 2026