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

接着上一节，我们来讲一下引擎后面的部分

碰撞检测

碰撞检测分事前检测和事后检测：
priori collision detection / posteriori collision detection
提前探知是否会发生碰撞 或 事发之后才检测到碰撞

事前碰撞可能会失效，因为计算小球在下一帧的位置来检测碰撞，容易出错。它是根据当前速率估算的，而帧速率突然改变，估算的结果就不准了。
事前的准确度不够高！

外接图形判断法

以下是外接矩形检测法

ballWillHitLedge:function(sprite,ledge){
        let fps=sprite.fps;
        let spriteRight=sprite.left+sprite.width,
            ledgeRight=ledge.left+ledge.width,
            spriteBottom=sprite.top+sprite.height*2, //here is sprite.height*2!!! not so accureately!
            nextSpriteBottomEstimate=spriteBottom+sprite.velocityY/fps;
            //外接矩形 碰撞检测
            //此处的碰撞检测包含了3种情况，sprite在ledge的左边缘上，但还没超出
            //sprite在ledge的右边缘上，但还没超出，
            //sprite整体在ledge里面。 后面的identify会判断出来
        return spriteRight>ledge.left&&
                sprite.left<ledgeRight&&
                spriteBottom<ledge.top&&
                nextSpriteBottomEstimate>ledge.top;
    },

分离轴定理SAT与最小平移向量MTV

外接矩形 外接圆 和 光线投射法检测碰撞。 不适用于检测任意多边形之间的碰撞。

分离轴定理：只适用于凸多变形！
把受测的两个多边形置于一堵墙前面，用光线照射它们，然后根据其阴影部分是否相交来判断二者有没有相撞。

它们在任意一条轴上都不重叠就是没有碰撞。 只要能在任何一条轴上找到互相分离的投影，就说明两个多边形没有发生碰撞，一旦发生了碰撞就肯定在所有的轴上都找不到互相分离的投影。
我们要对 两个图形的 每个边都做一次投影， 也就是说 这个多边形有几条边就有多少个投影轴！
不过只要在任何一个投影轴上检测到互相分离的投影就可以结束检测！

帧速率更新

解释

动画是由一系列FRAME图像组成的。 这些图像的显示频率就叫做“frame速率”
frame rate 。

更新公式
我们要计算frame rate (每秒 frame per second fps)

上次绘制frame的时间从当前时间中减去，得到了这两frame动画的时间差，然后再用1000除以这个以ms为单位的时间差。 于是就得出了动画每秒播放的frame数。

以不同的frame rate 执行各种任务
很多动画程序是播放动画的时候还要执行其他任务。 比如，播放动画时还要执行其他任务。
所以要学把不同的任务安排在不同的frame rate上执行。

   //有关帧速率的对象属性
  //Time
    this.startTime=0;
    this.lastTime=0;
    this.gameTime=0;
    this.fps=0;
    this.STARTING_FPS=60;

  //Update the frame rate, game time, and the last time the application 
    //drew an animation frame
    tick:function(time){
   
        this.updateFrameRate(time);
        this.gameTime=(getTimeNow())-this.startTime;
    },
 // Update the frame rate, based on the amount of time it took
   // for the last animation frame only.
    updateFrameRate:function(time){
   
        //Here calculate the fps!
        if (this.lastTime===0)
            this.fps=this.STARTING_FPS;
        else
            this.fps=1000/(time-this.lastTime);
    },

我们在游戏循环中会调用这个tick来更新游戏时间，以及更新游戏帧速率。
time-lastTime 即帧之间的相隔时间，然后用1000除以它就是每秒多少帧， fps的值

暂停游戏