Chrome自帶恐龍小游戲的源碼研究(六)

　　在上一篇《Chrome自帶恐龍小游戲的源碼研究(五)》中實現了眨眼睛的恐龍，這一篇主要研究恐龍的跳躍。

恐龍的跳躍

　　游戲通過敲擊鍵盤的Spacebar或者Up來實現恐龍的跳躍。先用一張圖來表示整個跳躍的過程：

1. 首先規定向下為正方向，即重力加速度(g)為正，起跳的速度(v)為負，恐龍距離畫布上方的距離為yPos；
2. 每一幀動畫中，速度都會與重力加速度相加得到新的速度，再用新的速度與yPos相加得到新的yPos，改變恐龍的位置為新的yPos，表現出來為yPos不斷減小；
3. 當恐龍升至最高點，此時速度為0，並且仍具有向下的重力加速度。
4. 速度仍與重力加速度相加得到新的速度，此時速度方向向下，為正值，表現為yPos逐漸增加；
5. 落地，並使yPos不超過地面的高度，將速度重置為0，更新狀態jumping為false。

　　下面通過代碼來實現。首先注冊鍵盤事件：

document.addEventListener('keydown',onKeyDown);
document.addEventListener('keyup',onKeyUp);

        function onKeyDown(e) {
            if(keycode.JUMP[e.keyCode]) {
                if(!trex.jumping) {
                    trex.startJump(6);
                }
            }
        }

按下跳躍鍵后，執行startJump方法：

startJump: function(speed) {
    if (!this.jumping) {
        //切換到jump狀態
        this.update(0, Trex.status.JUMPING);
        //設置跳躍速度
        this.jumpVelocity = this.config.INIITAL_JUMP_VELOCITY - (speed / 10);
        this.jumping = true;
        this.reachedMinHeight = false;
    }
}

之后在每次GameLoop中更新狀態：

if (trex.jumping) {
    ctx.clearRect(0, 0, 600, 150);
    trex.updateJump(deltaTime);
}

updateJump: function(deltaTime) {
    //幀切換速率
    var msPerFrame = Trex.animFrames[this.status].msPerFrame;
    //經過的幀數
    var framesElapsed = deltaTime / msPerFrame;
    //更新y軸坐標
    this.yPos += Math.round(this.jumpVelocity * framesElapsed);
    //由於速度受重力影響，需要對速度進行修正
    this.jumpVelocity += this.config.GRAVITY * framesElapsed;

    //達到最小跳躍高度
    if (this.yPos < this.minJumpHeight) {
        this.reachedMinHeight = true;
    }
    //達到最大高度后停止跳躍
    if (this.yPos < this.config.MAX_JUMP_HEIGHT) {
        this.endJump();
    }
    if (this.yPos > this.groundYPos) {
        this.reset();
        this.jumpCount++;
    }
    this.update(deltaTime);
},

update: function(deltaTime, opt_status) {
    this.timer += deltaTime;

    if (opt_status) {
        this.status = opt_status;
        this.currentFrame = 0;
        //得到對應狀態的幀率 e.g. WAITING 1000ms / 3fps = 333ms/fps
        this.msPerFrame = Trex.animFrames[opt_status].msPerFrame;
        //對應狀態的動畫幀 e.g. WAITING [44,0]
        this.currentAnimFrames = Trex.animFrames[opt_status].frames;

        if (opt_status === Trex.status.WAITING) {
            //開始計時
            this.animStartTime = getTimeStamp();
            //設置延時
            this.setBlinkDelay();
        }
    }

    //計時器超過一幀的運行時間，切換到下一幀
    if (this.timer >= this.msPerFrame) {
        this.currentFrame = this.currentFrame === this.currentAnimFrames.length - 1 ? 0 : this.currentFrame + 1;
        this.timer = 0;
    }

    //待機狀態
    if (this.status === Trex.status.WAITING) {
        //執行眨眼動作
        this.blink(getTimeStamp());
    } else {
        this.draw(this.currentAnimFrames[this.currentFrame], 0);
    }
}

 這樣就實現了跳躍的過程。

 

輕跳

　　如果持續按住Spacebar或者Up不放，跳躍總是能達到最大高度的，但很多情況下我們只是輕輕敲擊一下鍵盤然后就放手了，這時的游戲表現為恐龍只跳起一個很低的高度，然后開始下落，一般稱之為“輕跳”、“小跳”。這看起來是根據按鍵時長來決定跳躍高度，實現起來有一定的難度，但實際情況卻比較簡單，只監聽鍵盤的onkeyup事件即可。

function onKeyUp(e) {
    if (keycode.JUMP[e.keyCode]) {
        trex.endJump();
    }
}

當鍵盤抬起時，執行endJump方法，而endJump方法也十分簡單：

endJump: function() {
    if (this.reachedMinHeight && this.jumpVelocity < this.config.DROP_VELOCITY) {
        this.jumpVelocity = this.config.DROP_VELOCITY;
    }
}

首先要判斷是否達到了最小跳躍高度，this.reachedMinHeight這個變量非常有用，它避免了游戲角色只跳起數像素然后落地這樣的無意義跳躍。此時如果向上的速度仍比較大的話，則強制減小為this.config.DROP_VELOCITY以便能夠更快地下落。

下圖分別是“大跳”和“小跳”的區別：

          

 

快速落地

　　在跳躍過程中如果按下了Down鍵，恐龍會加速下降。

function onKeyDown(e) {
    //......
    if(keycode.DUCK[e.keyCode]) {//Down
        if(trex.jumping) {
            trex.setSpeedDrop();   //加速下降
        }
    }
}

松開鍵位時取消加速：

function onKeyUp(e) {
    //......
    if (keycode.DUCK[e.keyCode]) {
        trex.speedDrop = false;
    }
}

在構造函數中添加setSpeedDrop方法：

setSpeedDrop: function() {
    this.speedDrop = true;
    this.jumpVelocity = 1;    //將速度設置為1，正方向(向下為正方向)
}

還需要對updateJump方法做一些更新：

updateJump:function (deltaTime) {
    //......
    
    //更新y軸坐標
    if (this.speedDrop) {
        //SPEED_DROP_COEFFICIENT為加速倍數，初始設定為3
    this.yPos += Math.round(this.jumpVelocity *       this.config.SPEED_DROP_COEFFICIENT * framesElapsed);
    } else {
    this.yPos += Math.round(this.jumpVelocity * framesElapsed);
    }  


    //達到最小跳躍高度
    //speedDrop也能觸發reachedMinHeight
    if (this.yPos < this.minJumpHeight || this.speedDrop) {
    this.reachedMinHeight = true;
    }

    //達到最大高度后停止跳躍
    //speedDrop也能觸發endJump
    if (this.yPos < this.config.MAX_JUMP_HEIGHT || this.speedDrop)         {
    this.endJump();
    }
//......

}

效果如下圖所示，在跳躍過程中按住Down，可以發現下落速度比平時快：

閃避

　　在地面上按住Down鍵，恐龍會進入閃避狀態。首先還是從keydown方法入手：

if (keycode.DUCK[e.keyCode]) {
    e.preventDefault();
    if (trex.jumping) {
        trex.setSpeedDrop();
    } else if (!trex.jumping && !trex.ducking) {
        trex.setDuck(true);    //閃避
    }
}

keyup方法取消閃避：

function onKeyUp(e) {
    if (keycode.JUMP[e.keyCode]) {
        trex.endJump();
    }
    if (keycode.DUCK[e.keyCode]) {
        trex.speedDrop = false;
        trex.setDuck(false);   //取消閃避
    }
}

setDuck方法：

setDuck: function(isDucking) {
    if (isDucking && this.status !== Trex.status.DUCKING) {
        this.update(0, Trex.status.DUCKING);
        this.ducking = true;
    } else if (this.status === Trex.status.DUCKING) {
        this.update(0, Trex.status.RUNNING);
        this.ducking = false;
    }
}

最終效果如下(Spacebar或Up跳躍；Down快速下降/閃避)：