基于Canvas的JS游戏引擎(一)

介绍

这是一个非常精简的游戏引擎，它仅仅包含了一般游戏所必须拥有的功能。

游戏引擎

主要功能如下
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'