时间戳

首页 > 解决方案 > 窗口 addEventListener keydown 不起作用

javascript - 窗口 addEventListener keydown 不起作用

问题描述

我正在编写一个游戏，当您按下箭头键时，立方体会在屏幕上移动。但它不起作用。有人可以帮帮我吗？

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>

标签： javascripthtmlcssaddeventlistenerkeycode

解决方案

使用 javascript设置transform style属性时，您不必;在字符串中添加 a。

应该这样做：

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

这是您;在transform字符串中没有的代码。

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>

推荐阅读