如何在 Javascript 中使字符平滑移動

Question

我正在制作一個游戲，我想知道如何讓角色移動得更流暢。 角色已經可以移動了，但是移動的很斷斷續續； 當您單擊箭頭鍵時，它會立即出現在前方 10 個像素處。 我希望它能夠平滑移動，這樣它就不會“出現”在其自身前 10 個像素處。 這是代碼：

document.onkeydown = checkKey;
var canvas;
var ctx;

var up;
var down;
var left;
var right;

var bobX = 200;
var bobY = 200;
var bobWidth = 30;
var bobHeight = 30;

window.onload = function() {
canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");


var fps = 200; // frames per second
setInterval(function() {
    updateAll();
    drawAll();
    }, 1000/fps)

};

var drawAll = function() {
    // draw background
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // draw bob
    ctx.fillStyle = "red";
    ctx.fillRect(bobX, bobY, bobWidth, bobHeight);
};

var updateAll = function() {

if (up == true) {

    up = false;

}
if (down == true) {
    bobY += 1;
    down = false;
}
if (left == true) {
    bobX -= 1;
    left = false;
}
if (right == true) {
    bobX += 1;
    right = false;
}


};



function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
         up = true;
    }
    else if (e.keyCode == '40') {
        down = true;
    }
    else if (e.keyCode == '37') {
        left = true;
    }
    else if (e.keyCode == '39') {
        right = true;
    }

} 

我試着每次按鍵都將它移動一個像素，但是當我這樣做時它移動得非常慢。

Answer 1

您的屏幕具有最大刷新率，通常為 60 fps。 有些屏幕可以達到 120fps，但這是一種相當罕見的情況。

那么這里發生了什么：

var fps = 200; // frames per second
setInterval(function() {
    updateAll();
    drawAll();
    }, 1000/fps)

};

畫布被重繪，位置以您的屏幕無法趕上的速度更新。 您根本看不到您的角色只移動了 1 個像素而不是 10 個像素。

解決方案是使用 requestAnimationFrame 代替。 當屏幕刷新時調用：

function animate() {
    requestAnimationFrame(animate);
    updateAll();
    drawAll();
};
animate();