Question

让我知道这项工作是否可行。 Yeah印刷(foo)

Answer 1

You have to calculate the value of x and y again after moving once. Because when you are moving the block from second time, you are just using original value of x and y computed before the for loop began.

在您的<代码>中添加这一句。

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

You have later mentioned in the comments about having a delay between each move. You can do that by creating another animate block function, having a timeout within a loop and and calling that animate block function in the timeout.

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);
  })
}

<Working demo:https://codepen.io/nikhilmopidevi/pen/gOYjgYd”rel=“nofollow noretinger”>https://codepen.io/nikhilmopidevi/pen/gOYgYgYd

友情链接