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

  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         };