Example: Buttons and Joysticks

Connect a gamepad to the computer, and click the buttons or move the different joysticks/axes. They will highlight as they are pressed.

This is a 17-button standard gamepad layout as defined on the W3C Gamepad API definition. It may not match the gamepad that is connected, but it can be used to see how the buttons/joysticks in that gamepad match the buttons in the standard gamepad.

How it works

Event handlers can be associated to the buttons using the .on() method:

gamepad.on(DIRECTION_NAME+AXE_ID, CALLBACK);

Only one action is allowed by button/joystick/axe. If you use several .on() with the same direction, the latest call to it will be the one that is applied when the joystick is pressed.

gameControl.on('connect', function(gamepad) {
  gamepad.on('select', function() {
    // do something
  });
});

Some buttons/directions have aliases, so it is easier to associate events to them. For example, if we only use the name of the direction ("up", "dowm", "right", or "left"), the event handler will be associated to that direction in the first joystick/axe:

gamepad.on('up0', function() {
  // do something
});

gamepad.on('up', function() {
  // do something
});

Using aliases doesn't mean that you will be able to use more than one action per direction, as they are the same.

The available direction aliases are:

• up: equivalent to up0.
• down: equivalent to down0.
• right: equivalent to right0.
• left: equivalent to left0.

The available button aliases are:

• l1: equivalent to button4. Left back button 1
• l2: equivalent to button6. Left back button 2
• r1: equivalent to button5. Right back button 1
• r2: equivalent to button7. Right back button 2
• select: equivalent to button8. (Works for Select/Back in some gamepads)
• start: equivalent to button9. (Works for Start/Forward in some gamepads)
• power: equivalent to button16. It is the power button available on some gamepads (e.g. the XBox logo button)