在上一篇《Chrome自带恐龙小游戏的源码研究(四)》中实现了障碍物的绘制及移动，从这一篇开始主要研究恐龙的绘制及一系列键盘动作的实现。
会眨眼睛的恐龙
在游戏开始前的待机界面，如果仔细观察会发现恐龙会时不时地眨眼睛。这是通过交替绘制这两个图像实现的：
可以通过一张图片来了解这个过程：
为实现图片的切换，需要一个计时器timer，并且需要知道两张图片切换的时间间隔msPerFrame。当计时器timer的时间大于切换的时间间隔msPerFrame时，将图片切换到下一张，到达最后一张时又从第一张开始，如此反复。下面是实现代码：
1 Trex.config = {
2 BLINK_TIMING:3000, //眨眼间隔
3 WIDTH: 44, //站立时宽度
4 WIDTH_DUCK: 59, //闪避时宽度
5 HEIGHT: 47, //站立时高度
6 BOTTOM_PAD: 10,
7 MIN_JUMP_HEIGHT: 30 //最小起跳高度
8 };
9 //状态
10 Trex.status = {
11 CRASHED: ‘CRASHED‘, //与障碍物发生碰撞
12 DUCKING: ‘DUCKING‘, //闪避
13 JUMPING: ‘JUMPING‘, //跳跃
14 RUNNING: ‘RUNNING‘, //跑动
15 WAITING: ‘WAITING‘ //待机
16 };
17 //元数据(metadata)，记录各个状态的动画帧和帧率
18 Trex.animFrames = {
19 WAITING: {//待机状态
20 frames: [44, 0],//动画帧x坐标在44和0之间切换，由于在雪碧图中的y坐标是0所以不用记录
21 msPerFrame: 1000 / 3 //一秒3帧
22 },
23 RUNNING: {
24 frames: [88, 132],
25 msPerFrame: 1000 / 12
26 },
27 CRASHED: {
28 frames: [220],
29 msPerFrame: 1000 / 60
30 },
31 JUMPING: {
32 frames: [0],
33 msPerFrame: 1000 / 60
34 },
35 DUCKING: {
36 frames: [262, 321],
37 msPerFrame: 1000 / 8
38 }
39 };
40
41 function Trex(canvas,spritePos){
42 this.canvas = canvas;
43 this.ctx = canvas.getContext(‘2d‘);
44 this.spritePos = spritePos; //在雪碧图中的位置
45 this.xPos = 0; //在画布中的x坐标
46 this.yPos = 0; //在画布中的y坐标
47 this.groundYPos = 0; //初始化地面的高度
48 this.currentFrame = 0; //初始化动画帧
49 this.currentAnimFrames = []; //记录当前状态的动画帧
50 this.blinkDelay = 0; //眨眼延迟(随机)
51 this.animStartTime = 0; //动画开始的时间
52 this.timer = 0; //计时器
53 this.msPerFrame = 1000 / FPS; //默认帧率
54 this.config = Trex.config; //拷贝一个配置的副本方便以后使用
55 this.jumpVelocity = 0; //跳跃的初始速度
56
57 this.status = Trex.status.WAITING; //初始化默认状态为待机状态
58
59 //为各种状态建立标识
60 this.jumping = false; //角色是否处于跳跃中
61 this.ducking = false; //角色是否处于闪避中
62 this.reachedMinHeight = false; //是否到达最小跳跃高度
63 this.speedDrop = false; //是否加速降落
64 this.jumpCount = 0; //跳跃次数
65
66 this.init();
67 }
首先还是和以往一样，对Trex这个构造函数进行基本的配置，然后在原型链中添加操作方法：
1 Trex.prototype = {
2 init:function() {
3 this.groundYPos = DEFAULT_HEIGHT - this.config.HEIGHT - this.config.BOTTOM_PAD;
4 this.yPos = this.groundYPos;
5 //计算出最小起跳高度
6 this.minJumpHeight = this.groundYPos - this.config.MIN_JUMP_HEIGHT;
7
8 this.draw(0,0);
9 this.update(0,Trex.status.WAITING);
10 },
11 setBlinkDelay:function () {
12 //设置随机眨眼间隔时间
13 this.blinkDelay = Math.ceil(Math.random() * Trex.config.BLINK_TIMING);
14 },
15 update:function (deltaTime,opt_status) {
16 this.timer += deltaTime;
17
18 if(opt_status) {
19 this.status = opt_status;
20 this.currentFrame = 0;
21 //得到对应状态的帧率 e.g. WAITING 1000ms / 3fps = 333ms/fps
22 this.msPerFrame = Trex.animFrames[opt_status].msPerFrame;
23 //对应状态的动画帧 e.g. WAITING [44,0]
24 this.currentAnimFrames = Trex.animFrames[opt_status].frames;
25
26 if(opt_status === Trex.status.WAITING) {
27 //开始计y时
28 this.animStartTime = getTimeStamp();
29 //设置延时
30 this.setBlinkDelay();
31 }
32 }
33
34 //计时器超过一帧的运行时间，切换到下一帧
35 if (this.timer >= this.msPerFrame) {
36 this.currentFrame = this.currentFrame === this.currentAnimFrames.length - 1 ?
37 0 : this.currentFrame + 1;
38 this.timer = 0; //重置计时器
39 }
40
41 //待机状态
42 if(this.status === Trex.status.WAITING) {
43 //执行眨眼动作
44 this.blink(getTimeStamp());
45 }
46 },
47 blink:function (time) {
48 var deltaTime = time - this.animStartTime;
49
50 if(deltaTime >= this.blinkDelay) {
51 this.draw(this.currentAnimFrames[this.currentFrame],0);
52
53 if (this.currentFrame === 1) {//0闭眼 1睁眼
54 //设置新的眨眼间隔时间
55 this.setBlinkDelay();
56 this.animStartTime = time;
57 }
58 }
59 },
60 draw:function (x,y) {
61 var sourceX = x;
62 var sourceY = y;
63 var sourceWidth = this.ducking && this.status != Trex.status.CRASHED ?
64 this.config.WIDTH_DUCK : this.config.WIDTH;
65 var sourceHeight = this.config.HEIGHT;
66 sourceX += this.spritePos.x;
67 sourceY += this.spritePos.y;
68
69 this.ctx.drawImage(imgSprite,
70 sourceX, sourceY,
71 sourceWidth, sourceHeight,
72 this.xPos, this.yPos,
73 this.config.WIDTH, this.config.HEIGHT);
74 }
75 };
先来看update方法中的这段代码：
1 if (this.timer >= this.msPerFrame) {
2 this.currentFrame = this.currentFrame === this.currentAnimFrames.length - 1 ?
3 0 : this.currentFrame + 1;
4 this.timer = 0;
5 }
这段代码实现了两个帧之间的切换，但如果只是单纯地以相同时间间隔来切换两张图片，那么得到的效果是不正确的，会出现频繁眨眼的情况。而实际情况是，闭眼只是一瞬间，睁开眼睛的时间则比较长。Chrome开发人员非常巧妙地解决了这个问题：
1 blink:function (time) {
2 var deltaTime = time - this.animStartTime;
3
4 if(deltaTime >= this.blinkDelay) {
5 this.draw(this.currentAnimFrames[this.currentFrame],0);
6
7 if (this.currentFrame === 1) {//0闭眼 1睁眼
8 //设置新的眨眼间隔时间
9 this.setBlinkDelay();
10 this.animStartTime = time;
11 }
12 }
13 }
只要计时器没有超过blinkDelay就不绘制新的图片，这样图片就会停留在上一次绘制的状态，恐龙此时是睁着眼睛的。当时间超过了blinkDelay，即执行眨眼的时间到了，这时会绘制this.currentFrame这一帧。如果这一帧是0(闭眼)，由于之前设置了this.timer >= this.msPerFrame时会切换帧，当时间再次超过blinkDelay时，这时就会绘制帧1(睁眼)，我们看到的效果就是眼睛闭上只有一瞬然后立刻睁开了。 如果当前帧是1(睁眼)，重新设置blinkDelay，于是在deltaTime没有超过重新设置blinkDelay的情况下，都不会绘制新图片(始终保持在帧1(睁眼))，这样我们看到的效果就是睁眼的时间稍长。
下面是运行后的效果：
时间： 2024-10-10 20:55:27