6

在过去一年左右的时间里，我一直在熟悉 Javascript，为了真正彻底地学习这门语言，我决定制作一个 HTML5 游戏！我遇到的问题是我完全不知道如何在屏幕上平滑地以一定角度移动图像。我可以通过将它在 x 轴上/下移动一个像素并在 y 轴上/下移动一个像素来将它移动到 45 度角，但这还不够具体。我将如何以非常特定的角度移动它？在我看来，必须有一个函数将它四舍五入到最近的像素？

不完全确定...任何解决方案都可以正常工作，尽管首选非图书馆特定的解释！

谢谢！

4

3 回答 3

1

您要查看的是线性插值（或lerp）的 javascript 实现。另一个名字是motion tween，但我相信这更像是一个动画术语，而不是游戏开发。

这个想法是你有两个坐标，开始和结束，以及动画发生的时间，你使用线性插值在两者之间制作动画。

从链接的堆栈问题中，本文解释了一个允许您进行插值的浏览器实现。

于 2012-11-28T07:20:36.820 回答
0

首先，如果您使用 HTML5 制作游戏，您应该尝试使用Canvas 元素。在 Canvas 中绘制所有游戏，而不是操纵 DOM 元素。话虽如此，移动图像（在画布内或图像标签内）的原理是用 sin/cos + 距画布/窗口左上角的距离来计算位置。

例子：

160° (South by South-East, give or take), distance 130 pixels.
sin(160)*130
  = 44.462619
cos(160)*130
  = -122.160041

--> 左上角位于 x=44，y=122（因为 0:0 左下坐标系中的 44:-122 转换为 0:0 左上坐标系中的 44:122）。

于 2012-11-28T07:21:37.830 回答
0

你将需要三角函数:) 例如，如果你想将对象移动到鼠标光标，那么你有对象坐标和鼠标坐标，你应该计算 X 和 Y 步长（对不起我的英语）

于 2012-11-28T07:21:44.780 回答