使用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`
    }
  })
}

我将简要解释一下我的程序：

程序将启动您按左、右、上或下 - 这些命令显示为文档顶部的列表。然后按回车

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

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

Answer 1

移动一次后必须再次计算x和y的值。 因为当您从第二次移动块时，您只是使用在 for 循环开始之前计算的 x 和 y 的原始值。

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

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

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

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