我如何在js中进行桨移动答案

【问题标题】：How do I make a paddle move in js我如何在js中进行桨移动
【发布时间】：2019-11-06 03:05:32
【问题描述】：

如何使用 JS 使这个框移动我试图让我的函数指向一个函数，但它不会指向它。

我尝试使用 call 方法调用该函数，然后我尝试了 apply 方法。

我还有一个在 CSS 中工作的动画，我想知道我是否在 JS 中正确创建了动作。

console.log("hi");
var animation = {
  move: function BoxRight(elem, pos, id) {
    return this.elem1 + this.pos + this.id;
  }
};

var elem1 = document.getElementById("RightAnimate");
var pos = 0;
var id = setInterval(animation.frame, 5000);
var x = function frame() {
  if (pos == 350) {
    clearInterval(id);
  } else {
    pos++;
    elem1.style.top = pos + "px";
    elem1.style.left = pos + "px";
  }
};

function arrowFunction(event) {
  var x = event.key;
  console.log(x);
  if (x == "ArrowLeft") {
    alert("You pressed the 'left' key!");
  }
  // You had an extra slash here
  // I want to call it down here!!
  // this is the issue

  if (x == "ArrowRight") {
    animation.BoxRight.call(elem1, 0, id);

    function frame() {
      return this;
    }
  }
}

  body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

#Right-animate {
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
}

@-webkit-keyframes move-right {
  0% {
    background-color: red;
    right: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    right: 200px;
    top: 0px;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello!</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="container">
    <!-- You are missing the end quote here. Also need a tabindex -->
    <div id="Right-animate" onkeydown="arrowFunction(event)" tabindex="0"></div>
  </div>
</body>

</html>

【问题讨论】：

请同时发布您的 HTML，最好使用代码 sn-p (meta.stackexchange.com/questions/193323/…)，以便我们查看实时示例。
我不知道如何让它成为我以前做过的实时版本。
对不起，我想发布这个链接来解释新代码 sn-ps stackoverflow.blog/2014/09/16/…
@WOUNDEDStevenJones 它已按照您的要求更新为 sn-p
@WOUNDEDStevenJones 你能帮我吗？

标签： javascript eventhandler

【解决方案1】：

目前还不是很清楚您要做什么。我将假设您希望为div 设置动画以响应按键。

这是一个使用 CSS 动画实现此目的的简化示例：

const offsetDistance = 50;
const div = document.getElementById('Right-animate');
let offset = { x: 0, y: 0 };

document.body.addEventListener('keydown', event => {
  if (event.key === 'ArrowLeft') {
    offset.x -= offsetDistance;
  } else if (event.key === 'ArrowRight') {
    offset.x += offsetDistance;
  } else if (event.key === 'ArrowUp') {
    offset.y -= offsetDistance;
  } else if (event.key === 'ArrowDown') {
    offset.y += offsetDistance;
  }
  div.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
});

#Right-animate {
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
  transition: transform 0.5s;
}

&lt;div id="Right-animate"&gt;&lt;/div&gt;

【讨论】：

快速提问translate(${offset.x}px, ${offset.y}px) 在做什么？
translate 是一个 CSS 转换，它改变了元素的 x/y 位置。它的优点是硬件加速，不需要重新计算布局，不像top和left
请分享您的研究。我正在尝试将您所做的转换为多步动画。