How to make a mobile game with AI: browser first

This guide is for browser games that play well on phones. It covers what to ask your AI tool for, what to check on a real device and what our catalog shows. Every tool fact on this page is as of September 2026 and links to its source.

Should you build a browser game or a store app?

Build the browser game first. It reaches phones from one codebase, and you can wrap it in an app later. web.dev describes a progressive web app as a web app that reaches any user on any device with a single codebase (web.dev).

Route	What you ship	What you need
Web game	A URL that opens in the phone’s browser	Web hosting
Installable web app	The same game plus a web app manifest	HTTPS and a manifest
Store app	The web game inside a native shell such as Capacitor	A store account and the store’s review

For an installable web app, Chromium-based browsers need a manifest with a name, 192 px and 512 px icons, a start URL and a display mode, served over HTTPS. A service worker is not required (MDN).

Capacitor describes itself as a cross-platform native runtime for building iOS and Android apps with web tooling (Capacitor). For Google Play alone, a Trusted Web Activity opens your web app full screen inside an Android app, and Chrome’s docs point to the Bubblewrap CLI to build one (Chrome docs).

Apple’s App Review Guidelines ask for features, content and UI beyond a repackaged website (guideline 4.2), so plan more than a wrapper for the App Store (Apple).

What phone-ready games in the catalog do

In our catalog, 256 of the 404 games list mobile (63%). Data note: counts come from the live games in our catalog as of September 30, 2026, and “list mobile” means the entry’s platforms include mobile.

Puzzle games list it more often than the catalog as a whole, and roguelikes less often. A game can carry up to three genres, so the counts overlap.

Genre	Games	List mobile
Action	176	108 (61%)
Adventure	51	32 (63%)
Arcade	61	39 (64%)
Casual	25	17 (68%)
Puzzle	47	36 (77%)
Racing	31	21 (68%)
Roguelike	22	9 (41%)
RPG	22	14 (64%)
Shooter	93	56 (60%)
Simulation	67	41 (61%)
Strategy	65	44 (68%)
All games	404	256 (63%)

Mobile games are also more likely to have online multiplayer: 127 of the 256 (50%), against 46 of the other 148 (31%).

Some entries describe how they handle phones. Block Yard was built mobile first, so its interface is meant for touch. Cannon Clash was made simple and fast to play on mobile, with touch screens in mind. Rainy Day Sort is designed for touch screens, and its creator made it as an answer to mobile puzzle games crowded with ads.

Ophidian, a Snake game, adds on-screen arrow keys for phones and tablets. Survive Coders gives each voice-command power a keyboard key and a touch target on phones. In Ombres, a party game, players scan a QR code and steer from their own phone.

Touch controls with pointer events

Ask for pointer events, not mouse events. MDN says pointer events create a single event model for a mouse, a pen or touch, including several fingers. Each finger has its own pointerId, and isPrimary marks the first touch, so a twin-stick layout can tell two thumbs apart (MDN).

Stop the browser from taking the gesture. It handles panning and pinching by default, and a page that uses pointer events gets a pointercancel event when it does. Setting touch-action: none on the game canvas disables browser handling of panning and zooming there (MDN).

Leave page zoom alone. MDN warns that user-scalable=no stops people with low vision from reading a page, and says WCAG requires at least 2x scaling (MDN). Apply touch-action to the canvas only.

Size buttons for thumbs. WCAG 2.2 sets 24 by 24 CSS pixels as the minimum target size at Level AA and 44 by 44 at Level AAA (W3C, W3C). For an on-screen game button, use the larger size.

Make it fit any phone screen

Start with the viewport tag. MDN recommends <meta name="viewport" content="width=device-width"> (MDN). Then handle four things:

• Canvas size. In Three.js, renderer.setSize() takes the device pixel ratio into account, and setPixelRatio() sets it (Three.js docs). Our suggestion: cap the ratio at 2 to protect the frame rate.
• Scaling. In Phaser, the Scale Manager’s FIT mode adjusts the game to fit its target area while keeping the aspect ratio, and autoCenter centers it (Phaser docs).
• Browser bars. vh matches the large viewport, so content can hide when the address bar expands. dvh follows the bars and fits the visible area (MDN).
• Notches. Keep controls inside the safe area with env(safe-area-inset-bottom) and its siblings (MDN).

Orientation needs a choice. Locking it with the Screen Orientation API usually works only on mobile devices in full screen, and MDN marks it as not Baseline (MDN). Design for both orientations, or show a rotate hint.

Sound and battery

Start audio after the first tap. MDN says playback of media with audio is generally blocked when it starts programmatically in a tab with no user interaction. A Web Audio start() call outside a user input event follows the same rules (MDN). Put a “Tap to start” screen first.

The Screen Wake Lock API keeps the screen from dimming or locking while your game runs. MDN lists it as Baseline 2025, and the browser releases the lock when the page is hidden, so request it again when the page becomes visible (MDN):

let lock = null;
const keepAwake = async () => {
  try { lock = await navigator.wakeLock?.request('screen'); } catch { lock = null; }
};
keepAwake();
document.addEventListener('visibilitychange', () => {
  if (lock && document.visibilityState === 'visible') keepAwake();
});

How to test a mobile game

Test on hardware, then automate what you can.

1. Play on a real phone. Open your local server or a preview URL from the phone.
2. Inspect an Android phone from your computer. Chrome DevTools remote debugging needs USB debugging on the phone, and Toggle Screencast shows the phone’s screen in DevTools (Chrome docs).
3. Emulate phones in tests. Playwright has a registry of device settings, such as iPhone 13, for the user agent, screen size, viewport and touch. isMobile turns on the meta viewport and touch events (Playwright docs).
4. Give the agent a check it can run. Anthropic’s guide says to give Claude a check it can run: tests, a build or a screenshot to compare (Claude Code docs).

Emulation misses real-device quirks, so play the finished game on a phone before you publish.

Prompts to adapt

Replace the brackets.

Touch controls:

Make this game playable on a phone. Use pointer events, not mouse events. Drag anywhere on the left half of the screen to move and tap the right half to act. Set touch-action: none on the canvas only. Make every on-screen button at least [44] by [44] CSS pixels and keep controls inside the safe area.

Fit and audio:

Make the canvas fill the screen on any phone in portrait and landscape. Use dvh units, handle resize and orientation changes, and cap the pixel ratio at [2]. Show a “Tap to start” screen, and create the audio context only after that tap.

Test:

Write a Playwright test that opens the game with the iPhone 13 device, taps through one full round and takes a screenshot at the end. Run it, fix what fails and show me the screenshot.

Next: publish it

• Where to publish a browser game: portals, their size limits and how to find players.
• Make a game with AI: 10 prompts to copy and adapt has more templates.
• How to make game assets with AI covers small downloads and sprite sizes.
• Vibe coding game jam shows how many top entries list mobile.
• How to make a game with AI and vibe coding a game cover the basics.
• Browse the puzzle and casual hubs, or the Three.js and Phaser hubs.