游戏绘制循环的 Javascript setInterval 运行不一致

Question

我正在开发一个使用 Node.js 作为服务器的多人游戏。目前它只是一个 2D 三 Angular 形，玩家可以在屏幕上行驶。游戏循环在服务器上运行，并将游戏世界状态的更新发送到客户端。客户端有一个正在运行的绘制循环，它使用更新后的位置和方向将三 Angular 形绘制到 Canvas 上。

问题:

我为绘制循环使用了间隔为 30 毫秒的 setInterval。然而，游戏的运动可能会变得相当紧张。我已经尝试测量从一个循环开始到下一个循环所花费的时间，如下面的代码所示。结果表明，循环之间的时间介于 1 毫秒到 200 毫秒之间。

示例控制台输出:

looptime: 59
looptime: 14
looptime: 22
looptime: 148
looptime: 27

我在客户端运行的唯一其他事情是 onkeyup/onkeydown 监听器和 socket.io 监听器，用于将数据发送到服务器。非常感谢任何帮助。

代码:

...

function init(){
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        setInterval(draw, 30);
    }
}

function draw(){

    timeNow = new Date().getTime();
    console.log('looptime: '+(timeNow-startDrawTime));
    startDrawTime = new Date().getTime();
    var ctx = document.getElementById('canvas').getContext('2d');
    triX = tri.pos.x;
    triY = tri.pos.y;

    ctx.save();
    ctx.clearRect(0,0,400,400);// clear canvas

    ctx.save();
    ctx.translate(triX, triY);
    ctx.rotate(tri.orientation);

    ctx.save();
    ctx.beginPath();
    ctx.arc(0,0,5,0,Math.PI*2, true);
    ctx.stroke();
    ctx.restore();

    //draw tri

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.moveTo(0, -5);
    ctx.lineTo(5, 5);
    ctx.lineTo(-5, 5);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    ctx.restore();

    ctx.restore();
    //console.log('looptime: '+((new Date().getTime())-time));
}

Answer 1

这就是 setTimeout 的设计方式。 Javascript 是按顺序运行的，如果完成一个循环需要更长的时间，那么完成这个循环需要更长的时间。

在这种情况下，保持一致只是性能问题，而且您的代码原样有很多问题。我用一些性能改进对其进行了注释。

它在 Firefox 中运行缓慢的原因是因为 console.log 语句。把它拿出来，它会运行得更快。 console.log 过去在 chrome 中也很慢，我只有开发版，但我认为它早就被修复了。任何运行的调试器都会变慢，这是正常的。

function init() {
    // Never ever reference the DOM unless you absolutely have to
    // So we do it once, here, outside of the loop
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    if (canvas.getContext) {
        setInterval(draw, 30, canvas, ctx);
    }
}

function draw(canvas, ctx) {

    timeNow = new Date().getTime();
    // console statements can be slow in some browsers, so make sure they're gone from the final product
    console.log('looptime: ' + (timeNow - startDrawTime));
    startDrawTime = new Date().getTime();

    triX = tri.pos.x;
    triY = tri.pos.y;
    // This clears the transformation matrix and resets the canvas
    canvas.width = canvas.width;

    ctx.save();
    ctx.translate(triX, triY);
    ctx.rotate(tri.orientation);

    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.restore();

    //draw tri
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.moveTo(0, -5);
    ctx.lineTo(5, 5);
    ctx.lineTo(-5, 5);
    // no need to close the path since we aren't stroking
    ctx.fill();
    //console.log('looptime: '+((new Date().getTime())-time));
}​