介绍
这是一个非常精简的游戏引擎,它仅仅包含了一般游戏所必须拥有的功能。
游戏引擎
主要功能如下
1. 游戏循环
2. 绘制精灵
3. 基于时间运动
4. 碰撞检测
5. 帧速率更新
4. 暂停游戏
5. 事件处理
6. 图片加载
动画循环 /游戏循环
其实游戏循环就是依赖动画循环实现的。
window.requestAnimationFrame()
传统的是window.setTimeout()
核心: 只需在播放动画时持续更新并绘制就行了。 持续更新和重绘:动画循环。
它是所有动画的核心逻辑。
setInterval setTimeout的缺点
使用setInterval实现动画循环,只需要调用一次,而setTimeOut() 则需要持续调用。
他们的问题: 对于setTimeout()它要明确告诉浏览器下一次执行动画循环的时间。所以,每次调用它都要把下次执行动画循环的时间点计算出来。
它不提供精确计时机制,它们只是让程序能在某个大致时间点上运行代码的通用方法而已。
“强制规定时间间隔的下限”。 况且浏览器也是在这么做。
比如FIREFOX 允许最小时间间隔是10ms。 后续调用的最小间隔是5ms。 这也就是说如果你以3ms 为参数来调用setTimeout()方法,浏览器就会根据规则认定参数无效。
不应主动命令浏览器何时去绘制下一frame动画,这应该由浏览器告诉你
虽然setTimeout() setInterval() 时间间隔机制不精确,不过调用的时候,会主动告知绘制下一frame的时间。然而调用者并不知道下一frame动画最佳时机,你可能根本不了解浏览器绘制动画内部机制。 我们应该让浏览器在它觉得可以绘制下一frame动画时通知你。我们用requestAnimationFrame() 实现。
function animate(time){
requestAnimationFrame(animate);
}
function animate() { ...}
实现动画效果:
animate:function(time,that){
//let self=this;
if(this.paused){
//check if the game is still paused , in PAUSE_TIMEOUT. no need to check
//more frequently
setTimeout(()=>{
window.requestNextAnimationFrame((time)=>{
//this.animate.call(this,time);
this.animate(time,that);
}) ;
},this.PAUSE_TIMEOUT);
}else{ //game is not paused
this.updateSprites(time); //Invoke sprite behavirus
//call this method again when it'