在上一篇《Chrome自带恐龙小游戏的源码研究(三)》中实现了让游戏昼夜交替，这一篇主要研究如何绘制障碍物。
障碍物有两种：仙人掌和翼龙。仙人掌有大小两种类型，可以同时并列多个；翼龙按高、中、低的随机飞行高度出现，不可并行。仙人掌和地面有着相同的速度向左移动，翼龙则快一些或慢一些，因为添加了随机的速度修正。我们使用一个障碍物列表管理它们，当它们移出屏幕外时则将其从列表中移除。同时再用一个列表记录它们的类型：
1 Obstacle.obstacles = []; //存储障碍物的数组 2 Obstacle.obstacleHistory = []; //记录障碍物数组中障碍物的类型
障碍物的出现不能太频繁，也不能太稀少，太频繁立刻就gameover了，太稀少则没有挑战性，因此需要一定的规则来生成障碍物。每组障碍物之间应该有一段间隔作为落脚点，新生成的障碍物在这个间隔之外生成。如示意图所示：
因此，先定义一个最大间距系数，下面会用这个系数生成随机间距：
Obstacle.MAX_GAP_COEFFICIENT = 1.5; //障碍物最大间距系数
另外，还需要对障碍物进行一些约束及配置：
1 //每组障碍物的最大数量
2 Obstacle.MAX_OBSTACLE_LENGTH = 3;
3 //相邻的障碍物类型的最大重复数
4 Obstacle.MAX_OBSTACLE_DUPLICATION = 2;
5
6 Obstacle.types = [
7 {
8 type: ‘CACTUS_SMALL‘, //小仙人掌
9 width: 17, //宽
10 height: 35, //高
11 yPos: 105, //在画布上的y坐标
12 multipleSpeed: 4,
13 minGap: 120, //最小间距
14 minSpeed: 0 //最低速度
15 },
16 {
17 type: ‘CACTUS_LARGE‘, //大仙人掌
18 width: 25,
19 height: 50,
20 yPos: 90,
21 multipleSpeed: 7,
22 minGap: 120,
23 minSpeed: 0
24 },
25 {
26 type: ‘PTERODACTYL‘, //翼龙
27 width: 46,
28 height: 40,
29 yPos: [ 100, 75, 50 ], //有高、中、低三种高度
30 multipleSpeed: 999,
31 minSpeed: 8.5,
32 minGap: 150,
33 numFrames: 2, //有两个动画帧
34 frameRate: 1000/6, //动画帧的切换速率，这里为一秒6帧
35 speedOffset: .8 //速度修正
36 }
37 ];
障碍物的所有实现由构造函数Obstacle完成，下面是它的实现代码：
1 /**
2 * 绘制障碍物构造函数
3 * @param canvas
4 * @param type 障碍物的类型
5 * @param spriteImgPos 雪碧图坐标
6 * @param dimensions 屏幕尺寸
7 * @param gapCoefficient 障碍物间隙
8 * @param speed 障碍物移动速度
9 * @param opt_xOffset 障碍物水平偏移量
10 * @constructor
11 */
12 function Obstacle(canvas,type,spriteImgPos,dimensions,gapCoefficient,speed,opt_xOffset) {
13 this.ctx = canvas.getContext(‘2d‘);
14 this.spritePos = spriteImgPos;
15 //障碍物类型(仙人掌、翼龙)
16 this.typeConfig = type;
17 this.gapCoefficient = gapCoefficient;
18 //每个障碍物的数量(1~3)
19 this.size = getRandomNum(1,Obstacle.MAX_OBSTACLE_LENGTH);
20 this.dimensions = dimensions;
21 //表示该障碍物是否可以被移除
22 this.remove = false;
23 //水平坐标
24 this.xPos = dimensions.WIDTH + (opt_xOffset || 0);
25 this.yPos = 0;
26 this.width = 0;
27 this.gap = 0;
28 this.speedOffset = 0; //速度修正
29
30 //障碍物的动画帧
31 this.currentFrame = 0;
32 //动画帧切换的计时器
33 this.timer = 0;
34
35 this.init(speed);
36 }
37 ```
38
39 实例方法：
40 ```javascript
41 Obstacle.prototype = {
42 init:function(speed) {
43 //如果随机障碍物是翼龙，则只出现一只
44 //翼龙的multipleSpeed是999，远大于speed
45 if (this.size > 1 && this.typeConfig.multipleSpeed > speed) {
46 this.size = 1;
47 }
48 //障碍物的总宽度等于单个障碍物的宽度乘以个数
49 this.width = this.typeConfig.width * this.size;
50
51 //若障碍物的纵坐标是一个数组
52 //则随机选取一个
53 if (Array.isArray(this.typeConfig.yPos)) {
54 var yPosConfig = this.typeConfig.yPos;
55 this.yPos = yPosConfig[getRandomNum(0, yPosConfig.length - 1)];
56 } else {
57 this.yPos = this.typeConfig.yPos;
58 }
59
60 this.draw();
61
62 //对翼龙的速度进行修正，让它看起来有的飞得快一些，有些飞得慢一些
63 if (this.typeConfig.speedOffset) {
64 this.speedOffset = Math.random() > 0.5 ? this.typeConfig.speedOffset :
65 -this.typeConfig.speedOffset;
66 }
67
68 //障碍物之间的间隙，与游戏速度有关
69 this.gap = this.getGap(this.gapCoefficient, speed);
70 },
71 //障碍物之间的间隔，gapCoefficient为间隔系数
72 getGap: function(gapCoefficient, speed) {
73 var minGap = Math.round(this.width * speed +
74 this.typeConfig.minGap * gapCoefficient);
75 var maxGap = Math.round(minGap * Obstacle.MAX_GAP_COEFFICIENT);
76 return getRandomNum(minGap, maxGap);
77 },
78 //判断障碍物是否移出屏幕外
79 isVisible: function() {
80 return this.xPos + this.width > 0;
81 },
82 draw:function() {
83 //障碍物宽高
84 var sourceWidth = this.typeConfig.width;
85 var sourceHeight = this.typeConfig.height;
86
87 //根据障碍物数量计算障碍物在雪碧图上的x坐标
88 //this.size的取值范围是1~3
89 var sourceX = (sourceWidth * this.size) * (0.5 * (this.size - 1)) +
90 this.spritePos.x;
91
92 // 如果当前动画帧大于0，说明障碍物类型是翼龙
93 // 更新翼龙的雪碧图x坐标使其匹配第二帧动画
94 if (this.currentFrame > 0) {
95 sourceX += sourceWidth * this.currentFrame;
96 }
97 this.ctx.drawImage(imgSprite,
98 sourceX, this.spritePos.y,
99 sourceWidth * this.size, sourceHeight,
100 this.xPos, this.yPos,
101 sourceWidth * this.size, sourceHeight);
102 },
103 //单个障碍物的移动
104 update:function(deltaTime, speed) {
105 //如果障碍物还没有移出屏幕外
106 if (!this.remove) {
107 //如果有速度修正则修正速度
108 if (this.typeConfig.speedOffset) {
109 speed += this.speedOffset;
110 }
111 //更新x坐标
112 this.xPos -= Math.floor((speed * FPS / 1000) * deltaTime);
113
114 // Update frame
115 if (this.typeConfig.numFrames) {
116 this.timer += deltaTime;
117 if (this.timer >= this.typeConfig.frameRate) {
118 //在两个动画帧之间来回切换以达到动画效果
119 this.currentFrame =
120 this.currentFrame == this.typeConfig.numFrames - 1 ?
121 0 : this.currentFrame + 1;
122 this.timer = 0;
123 }
124 }
125 this.draw();
126
127 if (!this.isVisible()) {
128 this.remove = true;
129 }
130 }
131 },
132 //管理多个障碍物移动
133 updateObstacles: function(deltaTime, currentSpeed) {
134 //保存一个障碍物列表的副本
135 var updatedObstacles = Obstacle.obstacles.slice(0);
136
137 for (var i = 0; i < Obstacle.obstacles.length; i++) {
138 var obstacle = Obstacle.obstacles[i];
139 obstacle.update(deltaTime, currentSpeed);
140
141 //移除被标记为删除的障碍物
142 if (obstacle.remove) {
143 updatedObstacles.shift();
144 }
145 }
146 Obstacle.obstacles = updatedObstacles;
147
148 if(Obstacle.obstacles.length > 0) {
149 //获取障碍物列表中的最后一个障碍物
150 var lastObstacle = Obstacle.obstacles[Obstacle.obstacles.length - 1];
151
152 //若满足条件则添加障碍物
153 if (lastObstacle &&
154 lastObstacle.isVisible() &&
155 (lastObstacle.xPos + lastObstacle.width + lastObstacle.gap) <
156 this.dimensions.WIDTH) {
157 this.addNewObstacle(currentSpeed);
158 }
159 } else {//若障碍物列表中没有障碍物则立即添加
160 this.addNewObstacle(currentSpeed);
161 }
162 },
163 //随机添加障碍
164 addNewObstacle:function (currentSpeed) {
165 //随机选取一种类型的障碍
166 var obstacleTypeIndex = getRandomNum(0,Obstacle.types.length - 1);
167 var obstacleType = Obstacle.types[obstacleTypeIndex];
168
169 //检查随机取到的障碍物类型是否与前两个重复
170 //或者检查其速度是否合法，这样可以保证游戏在低速时不出现翼龙
171 //如果检查不通过，则重新再选一次直到通过为止
172 if(this.duplicateObstacleCheck(obstacleType.type) || currentSpeed < obstacleType.minSpeed) {
173 this.addNewObstacle(currentSpeed);
174 } else {
175 //检查通过后，获取其雪碧图中的坐标
176 var obstacleSpritePos = this.spritePos[obstacleType.type];
177 //生成新的障碍物并存入数组
178 Obstacle.obstacles.push(new Obstacle(c,obstacleType,obstacleSpritePos,this.dimensions,
179 this.gapCoefficient,currentSpeed,obstacleType.width));
180 //同时将障碍物的类型存入history数组
181 Obstacle.obstacleHistory.unshift(obstacleType.type);
182 }
183
184 //若history数组的长度大于1，则清空最前面的两个
185 if (Obstacle.obstacleHistory.length > 1) {
186 Obstacle.obstacleHistory.splice(Obstacle.MAX_OBSTACLE_DUPLICATION);
187 }
188 },
189 //检查障碍物是否超过允许的最大重复数
190 duplicateObstacleCheck:function(nextObstacleType) {
191 var duplicateCount = 0;
192 //与history数组中的障碍物类型比较，最大只允许重得两次
193 for(var i = 0; i < Obstacle.obstacleHistory.length; i++) {
194 duplicateCount = Obstacle.obstacleHistory[i] === nextObstacleType ? duplicateCount + 1 : 0;
195 }
196 return duplicateCount >= Obstacle.MAX_OBSTACLE_DUPLICATION;
197 }
198 };
最后在此前的基础上添加一段测试代码：
1 window.onload = function () {
2 var h = new HorizonLine(c,spriteDefinition.HORIZON);
3 var cloud = new Cloud(c,spriteDefinition.CLOUD,DEFAULT_WIDTH);
4 var night = new NightMode(c,spriteDefinition.MOON,DEFAULT_WIDTH);
5 var obstacle = new Obstacle(c,Obstacle.types[0],spriteDefinition,{WIDTH:600},0.6,1);
6 var startTime = 0;
7 var deltaTime;
8 var speed = 3;
9 (function draw(time) {
10 gameFrame++;
11 if(speed < 13.5) {
12 speed += 0.01;
13 }
14 ctx.clearRect(0,0,600,150);
15 time = time || 0;
16 deltaTime = time - startTime;
17 h.update(deltaTime,speed);
18 cloud.updateClouds(0.2);
19 night.invert(deltaTime);
20 obstacle.updateObstacles(deltaTime,speed);
21 startTime = time;
22 window.requestAnimationFrame(draw,c);
23 })();
24 };
最终得到的效果：
时间： 2024-10-16 10:34:49