我的游戏循环加速，角色留下踪迹

Question

代码：

// create stuff
var ghObj = {
x : 0,
y : 0
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ghost = new Image();
ghost.src = "ghost.png"

//define variables
var ghostMove = function () {
    ghObj.x+=(Math.floor(Math.random() * 9 - 4))
    console.log(ghObj.x)
    ghObj.y+=(Math.floor(Math.random() * 9 - 4))
}

var ghostCheck = function () {
    if (ghObj.x<0) {
        ghObj.x=0
    }
    if (ghObj.x>390) {
        ghObj.x=390
    }
    if (ghObj.y<0) {
        ghObj.y=0
    }
    if (ghObj.y>390) {
        ghObj.y=390
    }
}

var drawIm = function (sprite, position) {
    ctx.save();
    ctx.translate(position.x, position.y);
    ctx.drawImage(sprite, 0, 0, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
    ctx.restore();
};

// begin "game" when ghost is loaded
ghost.onload = function() {
    mainLoop()
}

// main loop
    function() {

    ghostMove()

    ghostCheck()

    drawIm(ghost, ghObj)

    setInterval(mainLoop, 1000) 
}

抱歉有点长。

应该发生的是幽灵以稳定的速度在屏幕上随机移动。相反，它随机但越来越快地移动，并在各处留下自己的副本。

恢复功能不是每次都要清屏吗？

我的游戏循环有问题吗？提前致谢。

Answer 1

function mainLoop(){
  setInterval(mainLoop,100);
}

我认为错误很明显。我建议改用 setTimeout 或 requestAnimationFrame ...这应该会删除 duplicates 我认为这是一种错觉 ...

我的游戏循环加速，角色留下踪迹

My Game loop accelerates and character leaves a trail

javascript

game-loop