JSFiddle - React, Tailwind, and code Playground

by SĂ©bastien Lorentz

HTML

<body>
  <label for="dartKey">Click on the while box and press the fire button of your choice</label>
  <br>
  <input type="text" id="dartKey" />
  <!--<p id="axis0">
    axis0
  </p>
  <p id="axis1">
    axis1
  </p>-->
  <span id="ball">
  </span>
  <div id="darts">

  </div>
  <div id="ennemies">

  </div>
</body>

CSS

#ball {
  background-color: red;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
  z-index: 1;
}

.dart {
  background-color: black;
  height: 20px;
  width: 0px;
  border: 1px solid black;
  transform-origin: 0 0;
  position: absolute;
}
body
{
  overflow:hidden;
}

JavaScript

var html = document.documentElement;
var gamepads = {};
var gameloop, keyMapper; // loops
var ballSize = 50;
var dartLength = 20;
var ballPos = {
  left: (html.clientWidth - 25) / 2,
  top: (html.clientHeight - 25) / 2
};
var darts = new Array();
var dartsInterval = 175; // 250ms
var dartsBuffer = dartsInterval;
var dartsSpeed = 5; // 5px/loop
var loopDelta = 5; //5ms between each loop

function changeDartKeyLoop() {
  var gamepad = navigator.getGamepads()[0];
  //console.log("mapping");
  gamepad.buttons.forEach(function(button, index) {
    if (button.pressed == true) {
      clearInterval(keyMapper);
      document.getElementById("dartKey").value = index;
      document.getElementById("dartKey").blur();
      return;
    }
  });

}

function gamepadHandler(event, connecting) {
  var gamepad = event.gamepad;
  console.log(event);
  // Note :
  // gamepad === navigator.getGamepads()[gamepad.index]

  if (connecting) {
    gamepads[gamepad.index] = gamepad;
    gameloop = setInterval(function() {
      loop();
    }, loopDelta);
  } else {
    delete gamepads[gamepad.index];
    clearInterval(gameloop);
  }
}

function loop() {
  if (typeof navigator.getGamepads()[0] == "undefined") {
    return;
  }
  var gamepad = navigator.getGamepads()[0];
  var RealLeft = gamepad.axes[0];
  var RealTop = gamepad.axes[1];
  /*document.getElementById("axis0").innerHTML = RealLeft;
  document.getElementById("axis1").innerHTML = RealTop;*/
  var left = (Math.abs(RealLeft) > 0.2) ? (Math.round(RealLeft * 10) / 10) : (0);
  var top = (Math.abs(RealTop) > 0.2) ? (Math.round(RealTop * 10) / 10) : (0);
  if (ballPos.left + left > html.clientWidth - ballSize) {
    ballPos.left = html.clientWidth - ballSize;
  } else if (ballPos.left + left < 0) {
    ballPos.left = 0;
  } else {
    ballPos.left += left;
  }
  if (ballPos.top + top > html.clientHeight - ballSize) {
    ballPos.top = html.clientHeight - ballSize;
  } else if (ballPos.top + top < 0) {
    ballPos.top += 0;
  } else {
 ...