javascript - JavaScript，2D 游戏引擎：根据 X 和 Y 速度之间的差异，摆动角度（上、右、下、左）以匹配对角线运动

Question

我会尽力解释我首先需要什么，这是一个稍微复杂的问题（因此我需要帮助），但我希望我能相应地说明情况。这是指一个问题，下面有一个清晰简单的代码案例，知道许多问题因为没有集中注意力而被关闭，我希望在这里得到答案的帮助。

我正在开发具有自上而下世界 (RPG) 的 HTML5 游戏引擎。相关部分是使用具有 4 个方向（上、下、左、右）的标准精灵的角色。Sprite 动画使用 CSS 设置，效果很好，不是这里的重点，重要的部分是用于确定和应用角度的 JavaScript 函数。

目前我根据速度设置一个角度，所以精灵朝向它移动最快的方向。它效果很好，但我想要更多：当有对角线运动时，角度应该在 X 和 Y 方向之间交替，花更多的时间在速度最快的那个上。

我正在尝试整合此更改的系统表示。我们有一个数组，其中包含 X 和 Y 速度的两个值，例如[0.25, -0.5]表示 0.25 水平速度和 -0.5 垂直速度。角度以整数形式存储，四个值表示顺时针方向：0 = 上，1 = 右，2 = 下，3 = 左。这是我用来从速度中获取角度的函数，undefined当没有速度时返回，所以我们不想改变......它在从最快方向检索固定角度时效果很好：

// Velocity: [0] = x, [1] = y
// Angle: 0 = top, 1 = right, 2 = bottom, 3 = left
function vec2ang(vec) {
    if(-vec[1] > Math.abs(vec[0]))
        return 0; // up
    if(+vec[0] > Math.abs(vec[1]))
        return 1; // right
    if(+vec[1] > Math.abs(vec[0]))
        return 2; // down
    if(-vec[0] > Math.abs(vec[1]))
        return 3; // left
    return undefined;
}

我希望它做什么：假设我们的 X 速度为 0.5，Y 速度为 1.0。现在这意味着 Y 胜过 X，所以 2（下）总是返回超过 1（右）。相反，我想要一个循环循环，其中 2（向下）返回两次，并且一旦给定 0.5 是 1.0 的一半，则返回 1（右），所以我们给它一半的时间（2 2 1, 2 2 1, 2 2 1, ...），如果两者都是 1.0 或 0.5，则循环将在它们同样（2 1, 2 1, 2 1, ...），当然如果另一个速度为零，则只有其中一个。该检查是作为setInterval函数的一部分在每帧执行的......还请注意，此示例指的是固定速度，但 X 和 Y 可能会更改为每个调用通常缓慢转换的任何值。

我想象有两种方法可以实现这一点：一种是使用某种计数器，另一种是通过正弦函数传递系统时间（毫秒）并将 0 到 1 振荡映射以表示 X 和 Y 之间的差距。对于我正在做的事情，后一个选项似乎最好，没有额外的变量要存储，它会动态适应 X 或 Y 的变化。但我不确定如何编写振荡器和Math.sin的值new Date().getTime()，然后给出主导速度更高的阈值，因此它的特色更长。您对解决此类问题有何建议？

标签： javascripthtmlgame-engine