Chrome自带恐龙小游戏的源码研究(五)

  在上一篇《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 }
View Code

  首先还是和以往一样,对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 };
View Code

  先来看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 }
View Code

  只要计时器没有超过blinkDelay就不绘制新的图片,这样图片就会停留在上一次绘制的状态,恐龙此时是睁着眼睛的。当时间超过了blinkDelay,即执行眨眼的时间到了,这时会绘制this.currentFrame这一帧。如果这一帧是0(闭眼),由于之前设置了this.timer >= this.msPerFrame时会切换帧,当时间再次超过blinkDelay时,这时就会绘制帧1(睁眼),我们看到的效果就是眼睛闭上只有一瞬然后立刻睁开了。 如果当前帧是1(睁眼),重新设置blinkDelay,于是在deltaTime没有超过重新设置blinkDelay的情况下,都不会绘制新图片(始终保持在帧1(睁眼)),这样我们看到的效果就是睁眼的时间稍长。

下面是运行后的效果:

 

posted @ 2016-11-30 22:49  逐影  阅读(...)  评论(...编辑  收藏