如何让 fps 在不同客户端上以相同的速度运行答案

【问题标题】：How to make fps run at the same pace across different clients如何让 fps 在不同客户端上以相同的速度运行
【发布时间】：2016-04-18 20:31:05
【问题描述】：

服务端和客户端都有代码

 setInterval(function(){ 
    player.x++;
    player.y++;
}, 20);

我有一个 node.js / socket.io 服务器，其中播放器的 x 和 y 每帧都会更新并发送到客户端。客户端还使用相同的逻辑更新了不同的 x 和 y。客户端似乎比服务器移动得更快，所以它使游戏不同步..我应该做些什么不同的事情？

【问题讨论】：

您必须更详细地描述您试图通过客户端和服务器的双重增量实际解决的问题，以便我们可以提供更好的方法来解决该问题。显然，您不能指望代码在客户端和服务器上以相同的速度运行，因此需要使用完全不同的技术。但是，我们需要知道您要解决的真正问题是什么，以便能够提供更好的方法。

标签： javascript node.js html time socket.io

【解决方案1】：

这是一个庞大而复杂的话题，我没心情为您搜索这些话题；但一些提示/方向。
这并不是一个完整的答案，而是更多的解释，可以发表评论。

第一个：不要增加值，无论是在后端还是在前端。将它们定义为动画：{ startTime, startValue, endTime, endValue }。现在您可以随时插入当前位置，与时间间隔无关。

第二个：你必须考虑前端和后端之间的时间偏移。

3rd：检查前端是否对计时器进行了操作：这是一种常见的作弊方式。不要认为时钟的正确性是理所当然的。

第 4 点：您还必须考虑 ping，例如，当从前端接收操作时，您应该减去 ping 才能知道何时真正执行了操作。并且不要忘记一遍又一遍地检查 ping：它可能会随着时间而改变。再说一次，你只能相信你自己的时钟，你应该检查操纵（例如，人为地减慢连接速度）。谷歌ping-cheater, ...

最后：您不是第一个创建实时游戏的人。搜索这些题目，都已经解决了，以前也有人问过。
尤其是在 Flash 社区中搜索。 Flash 仍然是一个流行的游戏平台，AS3 代码应该很容易理解并移植到 JS。

【讨论】：

我真正想要的唯一答案是您的第一点，我已经对该主题进行了大量研究，并且我有一个想要实现的系统，但我只是为此简化了我的代码问题。不过，我不知道您将它们定义为动画是什么意思..
这很好提，因为我已经在生产环境中看到过这样的代码；通常由没有经验的开发人员；关于动画，我做了一个（非常）快的fiddle，所以你有个主意。可能 animation 是错误的措辞，但 tween 在 flash 世界之外几乎是未知的

【解决方案2】：

其实真的很简单，有同样问题的人只要看看这篇文章。 https://www.viget.com/articles/time-based-animation

最简单的说法是“根据你上次移动后经过的时间移动”所以只需通过从 time_then 中减去 time_now 来找到一个 deltaTime 变量。

这就是我的 updatePosition 函数现在的样子

self.updatePosition = function(){
            var now_time = (new Date).getTime();
            var delta_time = now_time - self.then_time;
            self.x += delta_time * self.velocityX;
            self.y += delta_time * self.velocityY;
            self.then_time = now_time;
        }

只需在初始化时设置 then_time 或在角色第一次开始移动时设置。

【讨论】：