javascript - 使用 JavaScript 增加元素位置的问题

Question

以前的 QUESTION 我已经引导我构建了下面的代码。我想做的是根据键盘箭头选择向上/向下/向左/向右增加元素

"<div id="test"></div>"

一次 20 个像素(或者我选择的任意数量)。我的“左”和“右”方向在大部分情况下都有效，但当我尝试改变方向时，一些有趣的事情不断发生。首先，无论我最初选择先走哪个方向，在第一次按键时都不起作用，我必须按两次向左或向右的箭头键才能开始转换。然后一旦转换开始工作；如果我向左行驶然后想向右改变方向；它向左移动，即使我至少按了一次右键，然后它才朝着与我选择的键相对应的正确方向前进。这有点难以用文字来解释，所以这里是代码笔，所以你可以明白我的意思。 <强> CODEPEN (按几次左右箭头键，以便清楚地看到问题)

此外，函数 moveDown() 和 moveUp() 甚至根本不移动框定位。为了尝试解决问题，我添加了 console.log('moveUp') 和 console.log('moveDown') 以查看控制台是否在我敲击它时识别了键码，它显然可以识别。它甚至可以识别我何时敲击左键或右键，但在它开始向左键和右键上的正确方向移动之前，它仍然至少运行一次错误的方向。

我觉得这与未清除的转换有关，或者使用 IF 语句可能不是读取关键代码的基本方法？

还考虑过使用 switch case 进行 JavaScript 键代码识别，但我很确定问题仍然是一样的，而且我还不够熟练，无法实现 switchcase。

All I WANT 是我使用键盘上的箭头告诉它去的方向的框，我很接近，但正如你所看到的，我遗漏了一些关键概念

document.addEventListener("keydown", keyBoardInput);
var left = 0;
var top = 0;


function moveUp() {
  console.log('moveUp');
  document.getElementById("test").style.top = top + "px";
  top -= 20;
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  document.getElementById("test").style.top = top + "px";
  top += 20;
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  document.getElementById("test").style.left = left + "px";
  left -= 20;
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  document.getElementById("test").style.left = left + "px";
  left += 20;
  document.getElementById("test").style.transition = "all 1s";
};

function keyBoardInput() {
  var i = event.keyCode;

  if (i == 38) {
    moveUp()
  };

  if (i == 40) {
    moveDown()
  };

  if (i == 37) {
    moveLeft()
  };

  if (i == 39) {
    moveRight()
  };
};

#test {
  position: relative;
  width: 30px;
  border: 1px solid blue;
  height: 10px;
  top: 0px;
  left: 0px;
}

<div id="test"></div>

Answer 1

2 个问题:你更新你的全局变量太晚了，在元素上使用它之前就做吧。并且变量名“top”是保留的，只需使用另一个(参见 this blog post )。这里的代码:

document.addEventListener("keydown", keyBoardInput);
var left = 0;
var topx = 0;


function moveUp() {
  console.log('moveUp');
  topx -= 20;
  document.getElementById("test").style.top = topx + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  topx += 20;
  document.getElementById("test").style.top = topx + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  left -= 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  left += 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function keyBoardInput() {
  var i = event.keyCode;

  if (i == 38) {
    moveUp()
  };

  if (i == 40) {
    moveDown()
  };

  if (i == 37) {
    moveLeft()
  };

  if (i == 39) {
    moveRight()
  };
};

#test {
  position: relative;
  width: 30px;
  border: 1px solid blue;
  height: 10px;
  top: 0px;
  left: 0px;
}

<div id="test"></div>