使用 Javascript 动态移动元素位置

Question

这是我的代码笔：https://codepen.io/apasric4/pen/qBWyqqb

这是导致我出现问题的代码：

const moveBlock=()=> {
  let x=myBlock.offsetLeft;
  let y=myBlock.offsetTop;
  keyArray.forEach(key=> {
    if (key==='ArrowRight') {
      myBlock.style.left=`${x+50}px`
    } else if (key==='ArrowLeft') {
      myBlock.style.left=`${x-50}px`
    } else if (key==='ArrowDown') {
      myBlock.style.top=`${y+50}px`
    } else if (key==='ArrowUp') {
      myBlock.style.top=`${y-50}px`
    }
  })
}

我简单介绍一下我的程序：

程序将开始按向左、向右、向上或向下键——这些命令在文档顶部显示为列表。然后您将按回车键

当按下回车键时，程序遍历键盘方向数组，块根据数组中的命令向指定方向移动。每个箭头方向都有一个条件，可以将方块移动 50px。这是一个序列，所以我们应该看到发生的事情。

但是，方块只能向右或向左移动 50px，等等只能移动一次。这是为什么？我没有正确迭代我的 x 和 y 变量吗？

Answer 1

x和y移动一次后需要重新计算。因为当你从第二次移动块时，你只是使用 x 的原始值和 for 循环开始之前计算的 y。

将此添加到您的 forEach() 方法中。

 x = myBlock.offsetLeft;
 y = myBlock.offsetTop;

您稍后在评论中提到每次移动之间有延迟。您可以通过创建另一个动画块函数、在循环中设置超时并在超时时调用该动画块函数来做到这一点。

const animateBlock = (key)=> {
    let x = myBlock.offsetLeft;
    let y = myBlock.offsetTop;

    if (key === 'ArrowRight') {
      myBlock.style.left = `${x + 50}px`
    } else if (key === 'ArrowLeft') {
      myBlock.style.left = `${x - 50}px`
    } else if (key === 'ArrowDown') {
      myBlock.style.top = `${y + 50}px`
    } else if (key === 'ArrowUp') {
      myBlock.style.top = `${y - 50}px`
    }
}


const moveBlock = () => { 
  keyArray.forEach((key, i) => {
     setTimeout(() => {
       animateBlock(key);
     }, i * 1000);
  })
}

工作演示： https://codepen.io/nikhilmopidevi/pen/gOYjgYd

使用 Javascript 动态移动元素位置

Dynamically moving element position using Javascript

javascript

css

keyboard

position

keycode