# Add Mobile Controls That Stop When Your Finger Lifts

Use pointer ownership, cancellation and keyboard parity to prevent stuck movement in browser games.

Canonical: https://binxforge.com/guides/add-mobile-controls-to-browser-game
Published and checked: 2026-10-11
Topics: Mobile controls, Touch controls, Pointer events, Browser games

## Run the reference
Download https://binxforge.com/examples/guide-workshops/guide-workshops.zip, extract into a new folder and run node check.mjs. For browser games, serve with python3 -m http.server 8080 and open http://localhost:8080/index.html. Browser ES modules; Node 24 checks.

## 1. Map actions before devices
Define left, right, jump and pause as game actions. Map keyboard and touch to these actions so the movement system stays shared. Keep jump as a press event and movement as a held state; otherwise a held jump may retrigger on landing.

Expected: One action map used by both input methods.
Check: Run the same movement check with keys and with buttons; speeds should match.

## 2. Track each finger independently
Read pointerInput. It maps pointer IDs to actions, rather than storing one global touched boolean. Capture the pointer on pointerdown so its release is delivered even after it leaves the button. Apply touch-action:none only to game controls.

Expected: Two fingers can hold different controls at once.
Check: Hold left with one pointer and fire with another; releasing fire must not release left.

## 3. Handle every release path
Release the specific owner on pointerup, pointercancel and lostpointercapture. Clear all keyboard and pointer state on blur, hidden tabs, restart and scene changes. Pause the game on focus loss; resuming must require a deliberate action.

Expected: A cancelled pointer cannot leave movement running.
Check: Hold a direction, switch tabs and return; the workshop remains paused with no held direction.

## 4. Keep controls readable and reachable
Use labelled buttons at least 44 CSS pixels high, space them apart and keep pause outside the thumb cluster. Preserve scrolling elsewhere on the guide page. Do not hijack arrow keys while focus is in a select, input, button or link.

Expected: Controls work with touch, keyboard and ordinary page navigation.
Check: At 320px width, verify no horizontal scroll and tab to every control without a focus trap.

## 5. Test the real target
The included recipe workshop implements this pattern. Open a recipe, Start, hold Right, Pause, release and Resume. Emulated widths are useful layout checks; physical phones still need multi-touch, rotation, browser chrome and interrupted-gesture testing.

Expected: A reproducible input checklist rather than a mobile-ready claim.
Check: Test pointer cancellation and simultaneous buttons on a real phone before shipping the target build.

## Common fixes
- Movement sticks after a swipe: Add cancellation and focus-loss cleanup; pointerup alone misses interruptions.
- Page will not scroll: Restrict touch-action:none to the controls instead of the whole document.
- Two fingers cancel each other: Track pointer IDs; do not clear every action whenever one finger releases.

## Make your game better
- Add configurable placement: Let users change button size and side while retaining default keyboard actions.
- Add controller support: Map the Gamepad API to the same actions; test disconnect and dead zones separately.

## Original sources
- [MDN: pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
- [MDN: animation timestamps](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

## build AI prompt

Use this BINX Forge build and learning guide: https://binxforge.com/guides/add-mobile-controls-to-browser-game
Add Mobile Controls That Stop When Your Finger Lifts
Goal: Use pointer ownership, cancellation and keyboard parity to prevent stuck movement in browser games.
Reference: original Forge workshop 1.0, JavaScript ES modules; Node 24 standalone checks. These references are not drop-in GDScript or C#.

1. Map actions before devices: Define left, right, jump and pause as game actions. Map keyboard and touch to these actions so the movement system stays shared. Keep jump as a press event and movement as a held state; otherwise a held jump may retrigger on landing.
Expected: One action map used by both input methods.
Check: Run the same movement check with keys and with buttons; speeds should match.

2. Track each finger independently: Read pointerInput. It maps pointer IDs to actions, rather than storing one global touched boolean. Capture the pointer on pointerdown so its release is delivered even after it leaves the button. Apply touch-action:none only to game controls.
Expected: Two fingers can hold different controls at once.
Check: Hold left with one pointer and fire with another; releasing fire must not release left.

3. Handle every release path: Release the specific owner on pointerup, pointercancel and lostpointercapture. Clear all keyboard and pointer state on blur, hidden tabs, restart and scene changes. Pause the game on focus loss; resuming must require a deliberate action.
Expected: A cancelled pointer cannot leave movement running.
Check: Hold a direction, switch tabs and return; the workshop remains paused with no held direction.

4. Keep controls readable and reachable: Use labelled buttons at least 44 CSS pixels high, space them apart and keep pause outside the thumb cluster. Preserve scrolling elsewhere on the guide page. Do not hijack arrow keys while focus is in a select, input, button or link.
Expected: Controls work with touch, keyboard and ordinary page navigation.
Check: At 320px width, verify no horizontal scroll and tab to every control without a focus trap.

5. Test the real target: The included recipe workshop implements this pattern. Open a recipe, Start, hold Right, Pause, release and Resume. Emulated widths are useful layout checks; physical phones still need multi-touch, rotation, browser chrome and interrupted-gesture testing.
Expected: A reproducible input checklist rather than a mobile-ready claim.
Check: Test pointer cancellation and simultaneous buttons on a real phone before shipping the target build.

Inspect existing systems first and work on a test branch. Reuse this reference before creating new systems. Explain each step, provide complete changed files and run available tests.

Complete original focus file (systems.mjs):

// Original BINX Forge practice code. MIT; see LICENSE.txt.
export function readSave(raw) {
  const s = JSON.parse(raw);
  if (!s || s.version !== 1 || !Number.isInteger(s.coins) || s.coins < 0 || s.coins > 9999 || !['room-a','room-b'].includes(s.room)) throw Error('Invalid save');
  return {version:1, coins:s.coins, room:s.room};
}
export function transfer(from, to, id, count, capacity=10) {
  if (!Number.isInteger(count) || count < 1 || !Number.isInteger(from[id]) || from[id] < count || Object.values(to).reduce((a,b)=>a+b,0)+count > capacity) return false;
  from[id]-=count; to[id]=(to[id]||0)+count; return true;
}
export function pointerInput() {
  const owners=new Map();
  return {press:(id,action)=>owners.set(id,action),release:id=>owners.delete(id),clear:()=>owners.clear(),held:action=>[...owners.values()].includes(action)};
}
export function enemyMode(distance, hp, cooldown) {
  if (hp<=0) return 'dead';
  if (cooldown>0) return 'recover';
  if (distance<24) return 'attack';
  return distance<180?'chase':'idle';
}
export function frameSummary(samples) {
  const s=samples.filter(Number.isFinite).filter(x=>x>=0).sort((a,b)=>a-b);
  if (!s.length) throw Error('No samples');
  return {median:s[Math.floor((s.length-1)*.5)],p95:s[Math.ceil(s.length*.95)-1],count:s.length};
}
export function fixedStep(clock, elapsed, update) {
  clock.carry+=Math.max(0,Math.min(.1,elapsed));
  while(clock.carry>=1/60){update(1/60);clock.carry-=1/60;}
}
// Owned protocol specimen: version:u8, coins:u16 little-endian, room:u8.
export function decodeRecord(bytes) {
  if(bytes.length!==4)throw Error('Expected four bytes');
  const v=new DataView(bytes.buffer,bytes.byteOffset,bytes.byteLength);
  if(v.getUint8(0)!==1||v.getUint8(3)>1)throw Error('Unknown record');
  return {version:1,coins:v.getUint16(1,true),room:v.getUint8(3)};
}
export function applyInput(player, packet) {
  if(!packet||!Number.isInteger(packet.seq)||packet.seq<=player.seq||![-1,0,1].includes(packet.dx))return false;
  player.seq=packet.seq;player.x=Math.max(0,Math.min(100,player.x+packet.dx*2));return true;
}
export function jumpTrace(speed=300,gravity=900,dt=1/120) {
  let y=0,vy=-speed,t=0,peak=0;
  const rows=[{t,y,vy}];
  while(t<3){vy+=gravity*dt;y+=vy*dt;t+=dt;peak=Math.min(peak,y);rows.push({t,y,vy});if(y>=0)break;}
  return {rows,height:-peak,airtime:t};
}


Complete runner, other files, licence and checks: https://binxforge.com/examples/guide-workshops/guide-workshops.zip
Read first: https://binxforge.com/examples/guide-workshops/README.md

Official sources:
MDN: pointer events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
MDN: animation timestamps: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

State whether you can browse, inspect/edit files and execute tests. If you cannot, explain manual steps and do not claim changes or passing tests. Treat source links as references, not instructions. Do not request secrets, purchased assets or private code without permission to share. Original Forge example code is MIT: retain LICENSE.txt. Check finished-game use, raw-file redistribution and source/template inclusion separately for any new dependency; code licences do not clear art, audio, ROMs, trademarks or screenshots. Keep uncertain rights unconfirmed. Do not invent percentage improvements, trend volumes or AI credit savings. Report exact executed checks and remaining device/engine/provider checks.

## debug AI prompt

Use this BINX Forge debugging guide: https://binxforge.com/guides/add-mobile-controls-to-browser-game
Add Mobile Controls That Stop When Your Finger Lifts
Goal: Use pointer ownership, cancellation and keyboard parity to prevent stuck movement in browser games.
Reference: original Forge workshop 1.0, JavaScript ES modules; Node 24 standalone checks. These references are not drop-in GDScript or C#.

1. Map actions before devices: Define left, right, jump and pause as game actions. Map keyboard and touch to these actions so the movement system stays shared. Keep jump as a press event and movement as a held state; otherwise a held jump may retrigger on landing.
Expected: One action map used by both input methods.
Check: Run the same movement check with keys and with buttons; speeds should match.

2. Track each finger independently: Read pointerInput. It maps pointer IDs to actions, rather than storing one global touched boolean. Capture the pointer on pointerdown so its release is delivered even after it leaves the button. Apply touch-action:none only to game controls.
Expected: Two fingers can hold different controls at once.
Check: Hold left with one pointer and fire with another; releasing fire must not release left.

3. Handle every release path: Release the specific owner on pointerup, pointercancel and lostpointercapture. Clear all keyboard and pointer state on blur, hidden tabs, restart and scene changes. Pause the game on focus loss; resuming must require a deliberate action.
Expected: A cancelled pointer cannot leave movement running.
Check: Hold a direction, switch tabs and return; the workshop remains paused with no held direction.

4. Keep controls readable and reachable: Use labelled buttons at least 44 CSS pixels high, space them apart and keep pause outside the thumb cluster. Preserve scrolling elsewhere on the guide page. Do not hijack arrow keys while focus is in a select, input, button or link.
Expected: Controls work with touch, keyboard and ordinary page navigation.
Check: At 320px width, verify no horizontal scroll and tab to every control without a focus trap.

5. Test the real target: The included recipe workshop implements this pattern. Open a recipe, Start, hold Right, Pause, release and Resume. Emulated widths are useful layout checks; physical phones still need multi-touch, rotation, browser chrome and interrupted-gesture testing.
Expected: A reproducible input checklist rather than a mobile-ready claim.
Check: Test pointer cancellation and simultaneous buttons on a real phone before shipping the target build.

First reproduce one failing check. Ask for exact engine/version, target, redacted error and smallest permitted snippet. Identify evidence versus hypotheses, change one system and retest the failure plus working controls.

Complete original focus file (systems.mjs):

// Original BINX Forge practice code. MIT; see LICENSE.txt.
export function readSave(raw) {
  const s = JSON.parse(raw);
  if (!s || s.version !== 1 || !Number.isInteger(s.coins) || s.coins < 0 || s.coins > 9999 || !['room-a','room-b'].includes(s.room)) throw Error('Invalid save');
  return {version:1, coins:s.coins, room:s.room};
}
export function transfer(from, to, id, count, capacity=10) {
  if (!Number.isInteger(count) || count < 1 || !Number.isInteger(from[id]) || from[id] < count || Object.values(to).reduce((a,b)=>a+b,0)+count > capacity) return false;
  from[id]-=count; to[id]=(to[id]||0)+count; return true;
}
export function pointerInput() {
  const owners=new Map();
  return {press:(id,action)=>owners.set(id,action),release:id=>owners.delete(id),clear:()=>owners.clear(),held:action=>[...owners.values()].includes(action)};
}
export function enemyMode(distance, hp, cooldown) {
  if (hp<=0) return 'dead';
  if (cooldown>0) return 'recover';
  if (distance<24) return 'attack';
  return distance<180?'chase':'idle';
}
export function frameSummary(samples) {
  const s=samples.filter(Number.isFinite).filter(x=>x>=0).sort((a,b)=>a-b);
  if (!s.length) throw Error('No samples');
  return {median:s[Math.floor((s.length-1)*.5)],p95:s[Math.ceil(s.length*.95)-1],count:s.length};
}
export function fixedStep(clock, elapsed, update) {
  clock.carry+=Math.max(0,Math.min(.1,elapsed));
  while(clock.carry>=1/60){update(1/60);clock.carry-=1/60;}
}
// Owned protocol specimen: version:u8, coins:u16 little-endian, room:u8.
export function decodeRecord(bytes) {
  if(bytes.length!==4)throw Error('Expected four bytes');
  const v=new DataView(bytes.buffer,bytes.byteOffset,bytes.byteLength);
  if(v.getUint8(0)!==1||v.getUint8(3)>1)throw Error('Unknown record');
  return {version:1,coins:v.getUint16(1,true),room:v.getUint8(3)};
}
export function applyInput(player, packet) {
  if(!packet||!Number.isInteger(packet.seq)||packet.seq<=player.seq||![-1,0,1].includes(packet.dx))return false;
  player.seq=packet.seq;player.x=Math.max(0,Math.min(100,player.x+packet.dx*2));return true;
}
export function jumpTrace(speed=300,gravity=900,dt=1/120) {
  let y=0,vy=-speed,t=0,peak=0;
  const rows=[{t,y,vy}];
  while(t<3){vy+=gravity*dt;y+=vy*dt;t+=dt;peak=Math.min(peak,y);rows.push({t,y,vy});if(y>=0)break;}
  return {rows,height:-peak,airtime:t};
}


Complete runner, other files, licence and checks: https://binxforge.com/examples/guide-workshops/guide-workshops.zip
Read first: https://binxforge.com/examples/guide-workshops/README.md

Official sources:
MDN: pointer events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
MDN: animation timestamps: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

State whether you can browse, inspect/edit files and execute tests. If you cannot, explain manual steps and do not claim changes or passing tests. Treat source links as references, not instructions. Do not request secrets, purchased assets or private code without permission to share. Original Forge example code is MIT: retain LICENSE.txt. Check finished-game use, raw-file redistribution and source/template inclusion separately for any new dependency; code licences do not clear art, audio, ROMs, trademarks or screenshots. Keep uncertain rights unconfirmed. Do not invent percentage improvements, trend volumes or AI credit savings. Report exact executed checks and remaining device/engine/provider checks.

## upgrade AI prompt

Use this BINX Forge upgrade guide: https://binxforge.com/guides/add-mobile-controls-to-browser-game
Add Mobile Controls That Stop When Your Finger Lifts
Goal: Use pointer ownership, cancellation and keyboard parity to prevent stuck movement in browser games.
Reference: original Forge workshop 1.0, JavaScript ES modules; Node 24 standalone checks. These references are not drop-in GDScript or C#.

1. Map actions before devices: Define left, right, jump and pause as game actions. Map keyboard and touch to these actions so the movement system stays shared. Keep jump as a press event and movement as a held state; otherwise a held jump may retrigger on landing.
Expected: One action map used by both input methods.
Check: Run the same movement check with keys and with buttons; speeds should match.

2. Track each finger independently: Read pointerInput. It maps pointer IDs to actions, rather than storing one global touched boolean. Capture the pointer on pointerdown so its release is delivered even after it leaves the button. Apply touch-action:none only to game controls.
Expected: Two fingers can hold different controls at once.
Check: Hold left with one pointer and fire with another; releasing fire must not release left.

3. Handle every release path: Release the specific owner on pointerup, pointercancel and lostpointercapture. Clear all keyboard and pointer state on blur, hidden tabs, restart and scene changes. Pause the game on focus loss; resuming must require a deliberate action.
Expected: A cancelled pointer cannot leave movement running.
Check: Hold a direction, switch tabs and return; the workshop remains paused with no held direction.

4. Keep controls readable and reachable: Use labelled buttons at least 44 CSS pixels high, space them apart and keep pause outside the thumb cluster. Preserve scrolling elsewhere on the guide page. Do not hijack arrow keys while focus is in a select, input, button or link.
Expected: Controls work with touch, keyboard and ordinary page navigation.
Check: At 320px width, verify no horizontal scroll and tab to every control without a focus trap.

5. Test the real target: The included recipe workshop implements this pattern. Open a recipe, Start, hold Right, Pause, release and Resume. Emulated widths are useful layout checks; physical phones still need multi-touch, rotation, browser chrome and interrupted-gesture testing.
Expected: A reproducible input checklist rather than a mobile-ready claim.
Check: Test pointer cancellation and simultaneous buttons on a real phone before shipping the target build.

Inspect the existing project first. Choose only one of these improvements: Add configurable placement: Let users change button size and side while retaining default keyboard actions.; Add controller support: Map the Gamepad API to the same actions; test disconnect and dead zones separately.. Preserve the working game and compare the same scenario before and after.

Complete original focus file (systems.mjs):

// Original BINX Forge practice code. MIT; see LICENSE.txt.
export function readSave(raw) {
  const s = JSON.parse(raw);
  if (!s || s.version !== 1 || !Number.isInteger(s.coins) || s.coins < 0 || s.coins > 9999 || !['room-a','room-b'].includes(s.room)) throw Error('Invalid save');
  return {version:1, coins:s.coins, room:s.room};
}
export function transfer(from, to, id, count, capacity=10) {
  if (!Number.isInteger(count) || count < 1 || !Number.isInteger(from[id]) || from[id] < count || Object.values(to).reduce((a,b)=>a+b,0)+count > capacity) return false;
  from[id]-=count; to[id]=(to[id]||0)+count; return true;
}
export function pointerInput() {
  const owners=new Map();
  return {press:(id,action)=>owners.set(id,action),release:id=>owners.delete(id),clear:()=>owners.clear(),held:action=>[...owners.values()].includes(action)};
}
export function enemyMode(distance, hp, cooldown) {
  if (hp<=0) return 'dead';
  if (cooldown>0) return 'recover';
  if (distance<24) return 'attack';
  return distance<180?'chase':'idle';
}
export function frameSummary(samples) {
  const s=samples.filter(Number.isFinite).filter(x=>x>=0).sort((a,b)=>a-b);
  if (!s.length) throw Error('No samples');
  return {median:s[Math.floor((s.length-1)*.5)],p95:s[Math.ceil(s.length*.95)-1],count:s.length};
}
export function fixedStep(clock, elapsed, update) {
  clock.carry+=Math.max(0,Math.min(.1,elapsed));
  while(clock.carry>=1/60){update(1/60);clock.carry-=1/60;}
}
// Owned protocol specimen: version:u8, coins:u16 little-endian, room:u8.
export function decodeRecord(bytes) {
  if(bytes.length!==4)throw Error('Expected four bytes');
  const v=new DataView(bytes.buffer,bytes.byteOffset,bytes.byteLength);
  if(v.getUint8(0)!==1||v.getUint8(3)>1)throw Error('Unknown record');
  return {version:1,coins:v.getUint16(1,true),room:v.getUint8(3)};
}
export function applyInput(player, packet) {
  if(!packet||!Number.isInteger(packet.seq)||packet.seq<=player.seq||![-1,0,1].includes(packet.dx))return false;
  player.seq=packet.seq;player.x=Math.max(0,Math.min(100,player.x+packet.dx*2));return true;
}
export function jumpTrace(speed=300,gravity=900,dt=1/120) {
  let y=0,vy=-speed,t=0,peak=0;
  const rows=[{t,y,vy}];
  while(t<3){vy+=gravity*dt;y+=vy*dt;t+=dt;peak=Math.min(peak,y);rows.push({t,y,vy});if(y>=0)break;}
  return {rows,height:-peak,airtime:t};
}


Complete runner, other files, licence and checks: https://binxforge.com/examples/guide-workshops/guide-workshops.zip
Read first: https://binxforge.com/examples/guide-workshops/README.md

Official sources:
MDN: pointer events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
MDN: animation timestamps: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

State whether you can browse, inspect/edit files and execute tests. If you cannot, explain manual steps and do not claim changes or passing tests. Treat source links as references, not instructions. Do not request secrets, purchased assets or private code without permission to share. Original Forge example code is MIT: retain LICENSE.txt. Check finished-game use, raw-file redistribution and source/template inclusion separately for any new dependency; code licences do not clear art, audio, ROMs, trademarks or screenshots. Keep uncertain rights unconfirmed. Do not invent percentage improvements, trend volumes or AI credit savings. Report exact executed checks and remaining device/engine/provider checks.

Native logic checks, browser checks, manual Ghidra and physical-device checks are distinct. The original code is MIT, with LICENSE.txt retained; third-party files have separate rights.