当我将角色向右移动时，如何逐帧迭代多个精灵？

Question

我以前从未制作过 html5 游戏，我为一个简单的穿越游戏制作了一些精灵。我想让我的角色在向右移动时使用四个不同的精灵帧的数组，然后循环直到最后一个，直到我停止移动，然后它会反转循环并循环回到原始的精灵帧。 我希望左右移动都具有该功能。我想要相同的功能，但向左移动时精灵面向相反的方向。 如果我的角色与敌方精灵发生碰撞，我希望每个方向的第五个精灵帧触发并在游戏结束时保持精灵。这是一个存在两个精灵的游戏，玩家在与敌人碰撞时移动的每个方向都有一个。玩家的精灵总数为 10，每个方向五个，其中每个方向使用四个，除非在触发特定方向的第五个时发生碰撞。

敌人的精灵只有两帧，无限循环，直到游戏结束。

最后一帧用于目标，它是一个不会改变的静态帧。

我怎样才能做到这一点？

我是新人，所以我不知道我是否应该或如何准确地构建一个数组来循环遍历每个方向的图像，或者我是否应该做一些 for 循环或 if 循环或每个循环？

Answer 1

要从递增的数字中获取循环索引，请使用模运算符：

sprite_index = step_number % 4

那么sprite_index 将是 0,1,2,3,0,1,2,3,0,1,2,3,... 因为step_number 会像 0,1,2,3 一样增加， 4,5,6,7,8,9,10,11...

不要使用循环，因为无论如何您已经有一个用于移动字符等的循环。里面有一个额外的循环，它将在主循环运行时停止。