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快速下降/闪避)：