← Final Day Home
RBS CODE · CONTROLLER LAB

🎮 Gamepad Mechanics Lab

Press it. Watch the number. Turn that input into a game mechanic.

Big idea: keyboards mostly say ON/OFF. Gamepads can also say direction and how much.

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.

No gamepad detected yet. Press a controller button.

Axes

Buttons

2 · Standard Gamepad map

If gamepad.mapping says standard, these are the normal browser indices.

ButtonTypical control
0A / Cross · bottom face
1B / Circle · right face
2X / Square · left face
3Y / Triangle · top face
4LB / L1
5RB / R1
6LT / L2 trigger
7RT / R2 trigger
8Back / View / Select
9Start / Menu
10Left stick click
11Right stick click
12–15D-pad Up, Down, Left, Right
16Home / center
AxisMeaning
0Left stick X · − left / + right
1Left stick Y · − up / + down
2Right stick X · − left / + right
3Right stick Y · − up / + down
Important: controllers can differ. Check mapping, and use the live tester above whenever something seems wrong.

3 · Five kinds of input

ON / OFF button

buttons[0].pressed

Jump, fire, pause.

Analog button

buttons[7].value

Trigger pressure from 0 to 1 when hardware/browser exposes it.

Joystick axis

axes[0]

Direction and amount from −1 to +1.

D-pad

buttons[12..15]

Four digital directions.

Stick click

buttons[10/11]

Sprint, crouch, lock-on.

Haptics

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.

Left stick

Move character / car.

Right stick

Aim, camera, turret.

Both sticks

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);
Browser reality: gamepad input is broadly supported, but haptic support is less consistent across browsers, operating systems and controllers. Treat rumble as a bonus that fails safely.

8 · Mechanics you can build

Racing

Left stick = steer
RT = accelerate
LT = brake
Hit wall = strong rumble

Twin-stick blaster

Left stick = move
Right stick = aim
RB = fire
Hit = short rumble

Platformer

Left stick = move
A = jump
Trigger = run amount
Land hard = tiny rumble

2-player battle

Pad 0 = player 1
Pad 1 = player 2
Each pad read separately

Pressure mechanic

Trigger gently = slow
Trigger fully = powerful

Charge shot

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.