我如何编程每秒帧数

Question

嘿，我是一年级学生，我想尝试在我的网站上使用 html、javascript、css 和 php 制作一个简单的 2D 游戏。我仍在写我将如何做到这一点，但我陷入了每秒帧数的制作方式，它们是否神奇地出现在我的游戏中，或者我是否需要自己编程。我之前写过一个简单版本的口袋妖怪系列，你可以在其中四处走动，随机遇到怪物，它们只是具有不同的等级和属性。然而，角色每次点击走 16px，他不能走 16px，一步一步。这就是我想要的，但我无法理解它。

现在我想设计一些类似的东西，一个可以四处走动、收集东西并沿途做一些小任务的角色。我希望角色行走顺畅，NPC 也一样。

我想知道如何让我的游戏达到 60fps，每次我按下一个按钮 60 帧过去，每 1 秒我希望我的角色走一些像素，例如 32 像素，但他必须在 30 帧 0.5 秒内走完其中的 32 个。我该如何编码？

我正在寻找一个非常具体的答案，而您可能无法从上面的文字中得到我想要的答案，因此我将列出我不想要的答案以使其更容易。

我不是在寻找：

• 有关在何处编写游戏的提示，例如在 unity 中。
• 大量代码行。
• 游戏制作教程。
• 如何对 FPS 计数器进行编程。

我正在寻找：

• 解释它是如何编码的，或者它是如何神奇地出现的。
• 只需几行示例代码即可了解它是如何完成的。
• 如果无法在网络应用中完成，请告诉我原因。
• 可以帮助我了解 FPS 的有用信息来源的链接

我已经试图找到答案：

• 浏览了很多 Google 搜索字词，我尝试了很多不同的方法来确定应该使用哪些搜索字词，但它要么将我带到有关如何编程 FPS 计数器或第一人称射击游戏的页面。
• 通过尝试一堆不同的搜索词来检查 Stack Overflow 是否已经找到了答案。
• 试图了解他们如何在 Unity 中做到这一点。

我不确定我是否使用了正确的搜索词，但我使用了很多涉及“编码 fps”、“每秒帧速率编程”、“编程游戏核心”的词，但是我找不到它。如果您知道解决我的问题的更好方法或知道更好的搜索词，请告诉我。

Answer 1

例如在 javascript 中，要制作游戏，我会使用“绘制循环”。

例如，如果我有一个角色，我想以每秒 60 帧的速度每帧向左移动 1 个像素，我会这样做：

    var fps = 60; 
    var charX = //Whatever your charachters x position
    function moveChar(){
        charX++;
    };

    var loop = setInterval(moveChar,1000/fps);

显然 moveChara 看起来会非常不同。这段代码——如果你添加所有必要的部分，精灵将以 60 fps 的速度移动。您仍然需要一张图片（使用 JS 或 HTML 动态添加）

这适用于原版 JS 和 html。