🎮 Gamepad Mechanics Lab
Press it. Watch the number. Turn that input into a game mechanic.
1 · Connect + inspect your controller
Plug in / pair the controller, then press a button. Some browsers do not expose a pad until the page has received controller input.
Axes
Buttons
2 · Standard Gamepad map
If gamepad.mapping says standard, these are the normal browser indices.
| Button | Typical control |
|---|---|
| 0 | A / Cross · bottom face |
| 1 | B / Circle · right face |
| 2 | X / Square · left face |
| 3 | Y / Triangle · top face |
| 4 | LB / L1 |
| 5 | RB / R1 |
| 6 | LT / L2 trigger |
| 7 | RT / R2 trigger |
| 8 | Back / View / Select |
| 9 | Start / Menu |
| 10 | Left stick click |
| 11 | Right stick click |
| 12–15 | D-pad Up, Down, Left, Right |
| 16 | Home / center |
| Axis | Meaning |
|---|---|
| 0 | Left stick X · − left / + right |
| 1 | Left stick Y · − up / + down |
| 2 | Right stick X · − left / + right |
| 3 | Right stick Y · − up / + down |
mapping, and use the live tester above whenever something seems wrong.3 · Five kinds of input
buttons[0].pressed
Jump, fire, pause.
buttons[7].value
Trigger pressure from 0 to 1 when hardware/browser exposes it.
axes[0]
Direction and amount from −1 to +1.
buttons[12..15]
Four digital directions.
buttons[10/11]
Sprint, crouch, lock-on.
rumble()
Give physical feedback for hits, treasure, explosions.
4 · Held vs pressed once
Held
if (padButton(0)) {
move(player, 0, -5);
}Runs every frame while the button stays down.
Pressed once
if (padJustPressed(0)) {
jump();
}Good for jump, shoot, open, pause — one action per press.
5 · Joystick mechanics
Simple 360° movement
let stick = leftStick();
move(player,
stick.x * 7,
stick.y * 7
);Half push ≈ half speed. Full push ≈ full speed.
Dead zone
let x = padAxis(0, 0.15); let y = padAxis(1, 0.15);
Small accidental values near zero become 0, stopping joystick drift.
Move character / car.
Aim, camera, turret.
Move with left + aim independently with right.
6 · Analog triggers = pressure
On many standard controllers, buttons 6 and 7 are the lower triggers. Their value can range from 0 to 1.
Accelerator
let gas = padButtonValue(7); move(car, gas * 12, 0);
Variable power
let power = padButtonValue(7); shoot(power * 20);
Hardware and browser mappings vary, so verify trigger values in the live inspector.
7 · Haptic vibration lab
Strong magnitude controls low-frequency/heavier rumble. Weak magnitude controls higher-frequency/lighter rumble. Both normally use 0–1. Duration is milliseconds.
// tiny pickup rumble(0.15, 0.25, 80);
// crash rumble(1.0, 0.35, 300);
8 · Mechanics you can build
Left stick = steer
RT = accelerate
LT = brake
Hit wall = strong rumble
Left stick = move
Right stick = aim
RB = fire
Hit = short rumble
Left stick = move
A = jump
Trigger = run amount
Land hard = tiny rumble
Pad 0 = player 1
Pad 1 = player 2
Each pad read separately
Trigger gently = slow
Trigger fully = powerful
Hold trigger
Read value / time
Release to fire
9 · The complete beginner loop
function gameLoop() {
let stick = leftStick();
move(player, stick.x * 6, stick.y * 6);
if (padJustPressed(0)) {
console.log("A pressed once!");
}
updatePadButtons();
requestAnimationFrame(gameLoop);
}
gameLoop();
Why a loop? A gamepad is normally polled continuously. Every frame you ask: “Where is the stick now? Which buttons are down now?”
10 · Independence challenges
EASY Move a square with the left stick.
EASY A button teleports the treasure.
MEDIUM Use RT pressure as car speed.
MEDIUM Right stick aims while left stick moves.
MEDIUM Collect treasure → tiny buzz. Hit trap → strong 300ms rumble.
LEVEL UP Two controllers control two players.