时间戳

首页 > 解决方案 > 为什么我的 Javascript 画布不能在键盘输入上移动？

javascript - 为什么我的 Javascript 画布不能在键盘输入上移动？

问题描述

所以最近我接触了 Javascript，看了一些教程，读了一个 StackOverflow 问题，问了一个类似的问题。

出于某种原因，我的 Canvas 对象不会移动，并且我似乎做了很多其他示例一样的所有操作。

我的代码：

  document.addEventListener('keydown', function(event){
    switch (event.keyCode) {
      case 87:
      alert("w");
        break;
      case 65:
      alert("a");
        break;
      case 83:
      alert("s");
        break;
      case 68:
      moveRight();
        break;
      case 38:
      alert("up");
          break;
      case 37:
      alert("right");
        break;
      case 39:
      alert("left");
        break;
      case 40:
      alert("down");
        break;
  }
})

function moveRight() {
  var element = document.getElementById("plr");
  element.style.left = parseInt(element.style.left) - 5 + 'px';
}

// w = 87
// a = 65
// s = 83
// d = 68
// up = 38
// right = 37
// left = 39
// down = 40
#bg{
  background-color: blue;
  height: 700px;
  width: 1200px;
  position: relative;
  left: -10px;
  top: -10px;
}
#plr{
  background-color: red;
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50px;
  top: 300px;
}
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body onload="">
    <canvas id="bg"></canvas>
    <canvas id="plr"></canvas>
  </body>
</html>

我知道我在某个地方犯了一个愚蠢/小错误，但我找不到它。感谢您提供任何帮助。

标签： javascripthtmlcsskeyboard-events

解决方案

在element.style.left = parseInt(element.style.left) - 5 + 'px'尝试(parseInt(element.style.left.slice(0, -2)) - 5).toString()更改中，将“px”部分切出，然后将字符串转换为 int，在操作 x - 5 之后将输出转换为字符串并将其与“px”连接。

推荐阅读