I am making a game in HTML5+JS and I want it to have USB gamepad support using the Gamepad API, but I want the controls to usually match up with the game. So, if there is a gamepad with the up arrow as the 5th button, and there is a gamepad with the up arrow as the first button, the program knows which button is the up arrow and can do the correct function for the up arrow. Is there a way to do this?
Gamepad API has a canonical gamepad layout called the Standard Gamepad. If the Gamepad's mapping is "standard" then the browser has already reordered buttons and axes to match the canonical layout.
If the mapping is the empty string, it means the browser doesn't recognize your gamepad and doesn't know how to reorder its buttons to match the canonical layout. The buttons are presented in some consistent order, but the order isn't standard and may differ between browsers.
The problem is that many PC gamepads use the HID protocol which doesn't enable applications to identify the positioning of each button on the gamepad. Applications need some extra information to know how to remap buttons on these gamepads. If the browser doesn't have that extra information, you may need to collect it yourself and apply the remapping step in your app.