用h5的canvas做游戏用到了requestAnimationFrame来刷新画面，然后我在考虑角色移动是用上面的函数呢各位有什么建议？

Question

用h5的canvas做游戏用到了requestAnimationFrame来刷新画面，然后我在考虑角色移动是用上面的函数呢还是用settimeout回调呢？问题卡点是在角色移动速度必须是固定的，例如1秒移动64px，还必须是平滑移动

Answer 1

可以通过在requestAnimationFrame的回调里获取实时时间，并通过时间差计算来确定某一事件的执行时机和参数。对于固定频率的任务，可以预先计算好每两帧之间的差量，在回调里应用这一差量，这种方法实时计算量较小，可以优化性能。对于频率不固定的任务，则需要确定其参数-时间函数，在回调里执行该函数，获得与初始帧的差量，并应用此差量，这种方法相对直观，但是如果计算时间过长，会降低动画的帧率。
letlastFrameMoment=Date.now();
lettotalDurations=0;
constanimationRequiredDuration=123456;//随便写的，具体值需要按所需频率进行计算
constframeHandler=()=>{
window.requestAnimationFrame(function(){
constthisMoment=Date.now();
totalDurations+=thisMoment-lastFrameMoment;
lastFrameMoment=thisMoment;
if(totalDurations>=animationRequiredDuration){
//在这里执行画布重绘函数
totalDurations=0;//重置，进入下一个帧的计时
}
frameHandler();//递归调用
});
}
这样的好处是这个时间差可以用于任何需要固定频率的任务，比如游戏里不止有一种角色的时候，如果封装得当，每个角色只要注册自己的频率和开始时间，将这些参数push到一个任务队列里，就可以自动计算每个任务需要在哪些帧执行，并且将同一帧的所有任务合并计算，减少重绘画布的次数以优化性能，而不是给每个角色都弄一个定时器，毕竟使用了定时器之后，requestAnimationFrame其实就没多大意义了。
                            

Answer 2

game-loop了解一下.
你这个问题实际上就frame-based与time-based的选择.
基于帧实现简单,但不同设备运行的频率可能不一致,会产生影响游戏功能的问题.以打地鼠为例.假设地鼠的生命周期是10帧,性能差的设备更新一帧花的时间比性能强的设备长,那地鼠的实际存活时间就长--换句话说,用旧设备的玩家将占优势.
基于时间相对复杂,将游戏更新与画面更新拆开,但既然拆开,就存在同步的问题.忘了是哪款游戏,里面有个激光照射枪,产生的伤害是按时间算的,照射越长,伤害越高.有人发现,如果照射怪物时,暂停游戏,等一段时间,再开始,怪物会瞬间死亡,这实际上就是画面停止时,游戏更新没有暂停导致的.
所以,用哪种,看项目复杂度了.简单搞搞,那就基于帧,简单粗暴.产品比较事儿,那就基于时间,梳理清楚时间线.画画原型.