Search code examples
javascripthtmlcssaddeventlistenerkeycode

window addEventListener keydown not working

I am coding a game where a cube moves across the screen when you press the arrow keys down. But it doesn't work. Can someone please help me?

var playerElement = document.getElementById('playerEl');
var playerY = 0;
var playerX = 0;
window.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 37:
      playerX -= 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
      break;
    case 38:
      playerY -= 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
      break;
    case 39:
      playerX += 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
      break;
    case 40:
      playerY += 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
      break;
  }
}, true);
#playerEl {
  width: 50px;
  height: 50px;
  background: grey;
  display: inline-block;
  transform: translate(1%, 1%);
}
<body style="height:100vh;width:100vw;">
  <div id="playerEl"></div>
</body>

Solution

  • When setting the transform style property using javascript, you don't have to add a ; in the string.

    It should be done like this:

    playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)";

    Here's your code without the ; in the transform strings.

    var playerElement = document.getElementById('playerEl');
var playerY = 0;
var playerX = 0;
window.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 37:
      playerX -= 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
      break;
    case 38:
      playerY -= 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
      break;
    case 39:
      playerX += 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
      break;
    case 40:
      playerY += 100;
      playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
      break;
  }
}, true);
    #playerEl {
  width: 50px;
  height: 50px;
  background: grey;
  display: inline-block;
  transform: translate(1%, 1%);
}
    <body style="height:100vh;width:100vw;">
  <div id="playerEl"></div>
</body>