Javascript 在requestAnimationFrame游戏循环中跟踪时间/帧的最佳方式是什么？

我已经编写了非常简单的游戏教程，使用了一个简单的requestAnimationFrame游戏循环。它们不需要跟踪经过的时间或帧速率：

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

function gameLoop() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  //Drawing, etc.
  var myRAF = requestAnimationFrame(gameLoop);
}
gameLoop();

现在我想学习如何从精灵表中设置行走循环之类的动画，而不仅仅是设置静态对象的运动动画。我认为这需要首先学习如何跟踪一帧渲染所需的时间，或者您在哪个帧上。我的印象是，如果您使用RAF而不是setInterval或setTimeout（oops！），那么这是不必要的。我见过人们使用Date对象、requestAnimationFrame时间戳和performance.now，尽管我还不了解代码。如果我的目标是从spritesheets中设置动画，并确保游戏中的移动速度相同，那么对于使用requestAnimationFrame进行游戏开发，哪一个是最佳选择？我已经读到，你必须将游戏中的所有速度乘以一个时间因子，但不知道怎么做。否则，一台只有30帧每秒的速度慢的计算机在游戏中穿行，以半个速度射击子弹，而速度快的机器大约是60帧每秒，对吗

请告诉我如何在游戏循环中实现时间/帧跟踪代码，以及不同实现方法的优缺点

如果听起来像我想要一个教程，请忽略原始问题中的以下部分

如果您能使用该代码为精灵表中的行走或拍打翅膀等动作设置动画，以及如何将动作速度乘以时间因子，使每个人都能获得相同的游戏体验，那将是一件好事

---

requestAnimationFrame

接受回调。该回调传递自页面启动以来的时间（以毫秒为单位）。因此，您可以使用该时间从上一次requestAnimationFrame回调的时间中减去它，以计算出帧速率，并使用“deltaTime”以类似的速度将其他值乘以倍数

通常情况下，您会根据deltaTime移动对象。如果你的deltaTime是以秒为单位的，那么很容易根据每秒的delta来制作任何东西。例如，要每秒移动10个单位，请执行以下操作

const unitsPerSecond = 10;
x = x + unitsPerSecond * deltaTimeInSeconds

至于帧数，您只需保留自己的计数器即可

const ctx=document.querySelector（'canvas'）.getContext（'2d'）；
设x=0；
设y=0；
恒速=120；//每秒120个单位
设frameNumber=0；
设previousTime=0；
函数渲染（当前时间）{
//跟踪帧
++帧号；
//将时间转换为秒
currentTime*=0.001；
//计算自上一帧以来经过的时间
常数deltaTime=当前时间-上一个时间；
//记住下一帧的当前时间
previousTime=当前时间；
//独立地移动某些对象帧速率
x+=速度*增量时间；
y+=速度*增量时间；
//保持x和y在屏幕上
x=x%ctx.canvas.width；
y=y%ctx.canvas.height；
//清理画布
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
//画点东西
ctx.fillStyle=（帧号&0x1）？“红色”：“蓝色”；//根据帧更改颜色
ctx.fillRect（x-5，y-5，11，11）；
//根据时间画些别的东西
ctx.fillStyle='绿色'；
ctx.fillRect(
145+数学cos（当前时间）*50，
75+数学sin（当前时间）*50，
10, 10);
请求动画帧（渲染）；
}
请求动画帧（渲染）
canvas{边框：1px纯黑；}
@gman至少链接一个教程，教我所问的时间/帧部分。我会更新我的问题。