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.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函数应执行类似redrawing画布的操作。

Javascript基于时间的渲染和动画

1 个答案: