Javascript node.js和canvas，gameloop不同步

我正在制作多人实时太空射击游戏。起初，我只创建了一个单人本地版本的游戏，看看如何做。游戏运行平稳，每秒60帧。我对内核和性能很满意，所以我开始将其移植到多玩家版本。作为游戏的服务器，我使用node.js

我希望每个玩家都能看到游戏的相同“状态”，并对游戏有相同的体验，所以我决定只将玩家输入传递给服务器，让服务器计算所有内容

问题是，服务器端的游戏循环应该使用哪种方法

服务器正在计算敌人的位置和子弹。我使用了

setInterval

方法：

setInterval(function() {
    for(var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        enemy.move();
        enemy.fire();
    }
    io.emit('enemies', enemies);
}, 1000 / 60)

在客户端，我运行

requestAnimationFrame

循环：

socket.on('enemies', function(enemies) {
    self.enemies = enemies;
});
var run = function() {
    for(var i = 0; i < self.enemies.length; i++) {
        (function(i) {
            var enemy = self.enemies[i];
            if(enemy.alive) {

                for(var i = 0; i < enemy.primary_bullets_pool.length; i++) {
                    var bullet = enemy.primary_bullets_pool[i];
                    if(bullet.alive) {
                        self.context.fillStyle = 'red';
                        self.context.fillRect(bullet.x, bullet.y, bullet.w, bullet.h);
                    }
                }

                self.context.drawImage(self.images[enemy.model], enemy.x, enemy.y, enemy.w, enemy.h);
            }
        }(i));
    }

    window.requestAnimationFrame(run);
};

socket.on（'敌人'，函数（敌人）{
自我敌人=敌人；
});
var run=function（）{
for（var i=0；i

---

现在用户体验很差。敌人在屏幕上“跳跃”，而不是平稳移动。我试着给间歇时间计时。如果用10毫秒而不是1000/60，情况会好一点，但仍然可以看到抖动。正确的方法是什么，这样每个玩家都可以在任何给定的时间看到处于相同位置的敌人，并且移动顺利？

从目前的情况看，你似乎在每一个“滴答”都更新敌人的位置，正如你所注意到的，如果服务器不能足够快地更新他们的位置，这将显得紧张不安

理想情况下，您不希望您的服务器必须不断向所有玩家发送所有敌人的位置事件，以实现平滑移动。对于一些应该完全由客户机处理的事情来说，这是很大的开销

我的建议是不要每次“滴答”都更新客户机上敌人的位置，而是在敌人开始移动（或开始向不同方向移动）时接受敌人应该向其移动的一组坐标，然后设置动画。这将为您带来您想要的更流畅的体验

GameDev Stack Exchange中的一些答案应该为您提供实现“移动到”功能的正确方向

socket.on('enemies', function(enemies) {
    self.enemies = enemies;
});
var run = function() {
    for(var i = 0; i < self.enemies.length; i++) {
        (function(i) {
            var enemy = self.enemies[i];
            if(enemy.alive) {

                for(var i = 0; i < enemy.primary_bullets_pool.length; i++) {
                    var bullet = enemy.primary_bullets_pool[i];
                    if(bullet.alive) {
                        self.context.fillStyle = 'red';
                        self.context.fillRect(bullet.x, bullet.y, bullet.w, bullet.h);
                    }
                }

                self.context.drawImage(self.images[enemy.model], enemy.x, enemy.y, enemy.w, enemy.h);
            }
        }(i));
    }

    window.requestAnimationFrame(run);
};