Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>Gamepad button detection</h1>
 <h3>Buttons detected:</h3>
 
  <div id="buttonStatus"></div>
  <progress id="buttonValue" value=0 min=0 max=1></progress>
 
</body>
</html>
 
var gamepad;
var buttonStatusDiv;
var analogicValueProgressBar;
window.onload = function() {
  buttonStatusDiv = document.querySelector("#buttonStatus");
   analogicValueProgressBar = document.querySelector("#buttonValue");
  requestAnimationFrame(mainloop);
  
  setInterval(scangamepads, 500);
};
function mainloop() {
  // clear, draw objects, etc...
  scangamepads();
  // Check gamepad button states
  checkButtons(gamepad);
  
  // animate at 60 frames/s
  requestAnimationFrame(mainloop);
}
//----------------------------------
// gamepad utility code
//----------------------------------
window.addEventListener("gamepadconnected", function(e) {
   // now as a global var
   gamepad = e.gamepad;
   var index = gamepad.index;
   var id = gamepad.id;
   var nbButtons = gamepad.buttons.length;
   var nbAxes = gamepad.axes.length;
   console.log("Gamepad No " + index +
               ", with id " + id + " is connected. It has " +
               nbButtons + " buttons and " +
               nbAxes + " axes");
});
window.addEventListener("gamepaddisconnected", function(e) {
   var gamepad = e.gamepad;
   var index = gamepad.index;
   console.log("Gamepad No " + index + " has been disconnected");
});
// Detect button states
function checkButtons(gamepad) {
  if(gamepad === undefined) return;
  if(!gamepad.connected) return;
  
  //console.log("t");
  var atLeastOneButtonPressed = false;
 for (var i = 0; i < gamepad.buttons.length; i++) {  
   var b = gamepad.buttons[i];
 
   if(b.pressed) {
     atLeastOneButtonPressed = true;
     buttonStatusDiv.innerHTML = 
      "Button " + i + " is pressed<br>";
     if(b.value !== undefined)
      analogicValueProgressBar.value = b.value;
   }
 }
  
  if(!atLeastOneButtonPressed) {
    buttonStatusDiv.innerHTML = "";
    analogicValueProgressBar.value = 0;
  }
}
function scangamepads() {
  var gamepads = navigator.getGamepads();
  
  for (var i = 0; i < gamepads.length; i++) {
    if(gamepads[i])
        gamepad = gamepads[i]; 
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MichelBuffapro
0viewers