Javascript 基于时间的渲染和动画

Question

我已经浏览了 Stackoverflow，但我似乎无法弄清楚基于时间的渲染是如何工作的。我目前正在使用 setInterval 方法，但我听说它很糟糕，因为它是基于帧的。

我基本上希望能够使用基于时间的循环在屏幕上移动玩家。

这是我用来渲染的内容，但我很确定它不是基于时间的。

setInterval(function() {

ctx.clearRect(0,0,c.width,c.height); //clear canvas

renderImage("background.png",0,0); //background

//player
renderSheet(
    "player.png", //image
    Math.floor(player.weight/10)*player.width, //horizontal index
    player.equip*player.height, //vertical index
    player.width, //player width
    player.height, //player height
    player.x, //player x
    player.y, //player y
    player.width, //player width
    player.height //player height
);
},1000/frames);  

这就是我处理运动的方式:

document.onkeydown = function(e) { //key pressed
var key = String.fromCharCode(e.keyCode); //turn key pressed into a readable string
if(key == "A") player.dir = -1;
if(key == "D") player.dir = 1;  
}
document.onkeyup = function(e) {
var key = String.fromCharCode(e.keyCode); //turn key pressed into a     readable string
if(key == "A") player.dir = 0;
if(key == "D") player.dir = 0;
}
setInterval(function() {
player.x+= 4*player.dir; //move player

},1000/frames);

请帮助阐明基于时间的运动如何工作以及如何实现! :)

Answer 1

对于基于时间的移动，您需要自上一帧以来耗时 (delta) 以及每次像素的速度。 (delta 值应该可以从游戏中的任何位置访问。)

要获取自上一帧以来的时间(以秒为单位)，请执行以下操作(假设 Game 是您的全局 Game 对象):

Game.now = Date.now();
Game.delta = Game.now - Game.past/1000
Game.past = Game.now;

您可以将不同物体的每个速度乘以delta值来获得行驶距离。

var distance = Game.delta * Object.speed;
Object.positionX += distance;

通过window.requestAnimationFrame调用每帧调用的函数以获得更流畅的动画。在您的 frame 函数中，您应该调用 update 和 render 函数。

update 函数通常会更新所有已更改的游戏对象，render 函数应该执行诸如重绘 Canvas 之类的操作。