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

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

该程序将启动您按向左、向右、向上或向下键——这些命令以列表的形式出现在文档的顶部。然后你将按回车键

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

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

Answer 1

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

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

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

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

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