我如何编程每秒帧数

Question

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

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

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

我正在寻找一个非常特殊的答案，您可能无法从上面的文字中得到我想要的东西，所以我将列出我不想要的答案以使其更容易。

我不是寻找：

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

我正在寻找：

解释它是如何编码的，或者它是如何神奇地出现的。
通过几行示例代码来了解它是如何完成的。
如果不能在 Web 应用程序中完成，请告诉我原因。
可帮助我了解 FPS 的有用信息来源的链接

我已经尝试找到答案的内容：

浏览了很多 Google 搜索词，我尝试了很多不同的方法来确定我应该使用什么搜索词，但它要么把我带到关于如何编程 FPS 计数器或第一人称的页面射手.
通过尝试一系列不同的搜索词来检查 Stack overflow 是否已经有了答案。
试图了解他们在 Unity 中是如何做到的。

我不确定我是否使用了正确的搜索词，但我使用了很多涉及 "Coding fps"、"Frame rates per second programming"、"programming the core of the game" 的搜索词，但我不能找到它。如果您知道更好的方法来解决我的问题或知道更好的搜索词，请也告诉我。

Answer 1

例如在 javascript 中，为了制作游戏我会使用 'draw loop'。

例如，如果我有一个字符，我想以每秒 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 的。

我如何编程每秒帧数

How do I program frames per second

javascript

frame-rate

web-applications