Question

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

不完全确定......任何解决方案都可以正常工作，但非库特定解释会更受欢迎！

谢谢！

Answer 1

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

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

在链接的堆栈问题中，this article解释了允许您进行插值的浏览器实现。

Answer 2

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

示例：

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

- ＆GT;左上角是x = 44，y = 122（因为在0：0左下角坐标系中44：-122在0：0左上角坐标系中转换为44：122）。

Answer 3

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

HTML5 / Javascript以一定角度在屏幕上移动对象

3 个答案: