Question

我正在制作游戏，我想知道如何让角色更顺畅地移动。角色已经可以移动了，但它的移动确实很不稳定;当您单击箭头键时，它会立即显示前10个像素。我希望它顺利移动，因此它不会出现＃34;比自己提前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();

如何在Javascript中使角色顺利移动

1 个答案: