标签：背景 移动 函数 rem onload 返回 cdn drs nil
众所周知，Chrome浏览器在网络不通的情况下，会出现一个霸王龙翻越障碍的小游戏： 
这个游戏做得小巧精致，于是探究了一下它的源码，发现代码写得相当严谨并且富有技巧性，用来学习再好不过了。
游戏虽然看起来简单，但也有几千行的代码量。主要包括五个构造函数：
游戏逻辑控制函数Runner
背景管理函数Horizon
霸王龙函数Trex
分数记录函数DistanceMeter
游戏结束操作面板函数GameOverPanel
其余的方法还包含一些对移动设备的适配、针对不同屏幕加载不同的资源 、声音的播放等等。这是游戏用到的雪碧图：
为方便研究，从简单的背景管理函数开始。首先是地面的绘制。地面绘制通过HorizonLine完成：
1 //定义属性 2 3 HorizonLine.dimensions = { 4 WIDTH:600, //宽600 5 HEIGHT:12, //高12像素 6 YPOS:127 //在canvas中的位置 7 }; 8 9 var spriteDefinition = { 10 HORIZON: {x: 2, y: 54}//地面在雪碧图中的位置 11 }; 12 13 14 15 /** 16 * canvas 地面将绘制到此画布上 17 * spritePos 地面在雪碧图中的坐标 18 */ 19 function HorizonLine(canvas,spritePos) { 20 this.spritePos = spritePos; 21 this.canvas = canvas; 22 this.ctx = canvas.getContext("2d"); 23 this.dimensions = HorizonLine.dimensions; 24 25 //在雪碧图中坐标为2和602处分别为不同的地形 26 this.sourceXPos = [this.spritePos.x,this.spritePos.x + this.dimensions.WIDTH]; 27 28 this.xPos = []; //地面在画布中的x坐标 29 this.yPos = 0; //地面在画布中的y坐标 30 31 this.bumpThreshold = 0.5; //随机地形系数 32 33 this.setSourceDimesions(); 34 this.draw(); 35 }
再来看看HorizonLine原型链中的方法：
1 HorizonLine.prototype = { 2 setSourceDimesions:function() { 3 //地面在画布上的位置 4 this.xPos = [0,this.dimensions.WIDTH];//0,600 5 this.yPos = this.dimensions.YPOS; 6 }, 7 //随机地形 8 getRandomType:function() { 9 //返回第一段地形或者第二段地形 10 return Math.random() > this.bumpThreshold ? this.dimensions.WIDTH : 0; 11 }, 12 draw:function() { 13 //使用9参数的drawImage方法 14 this.ctx.drawImage(imgSprite, 15 this.sourceXPos[0], this.spritePos.y, 16 this.dimensions.WIDTH, this.dimensions.HEIGHT, 17 this.xPos[0],this.yPos, 18 this.dimensions.WIDTH,this.dimensions.HEIGHT); 19 20 this.ctx.drawImage(imgSprite, 21 this.sourceXPos[1], this.spritePos.y, 22 this.dimensions.WIDTH, this.dimensions.HEIGHT, 23 this.xPos[1],this.yPos, 24 this.dimensions.WIDTH,this.dimensions.HEIGHT); 25 }, 26 updateXPos:function(pos,increment) { 27 var line1 = pos, 28 line2 = pos === 0 ? 1 : 0; 29 30 this.xPos[line1] -= increment; 31 this.xPos[line2] = this.xPos[line1] + this.dimensions.WIDTH; 32 33 //若第一段地面完全移出canvas外 34 if(this.xPos[line1] <= -this.dimensions.WIDTH) { 35 //则将其移动至canvas外右侧 36 this.xPos[line1] += this.dimensions.WIDTH * 2; 37 //同时将第二段地面移动至canvas内 38 this.xPos[line2] = this.xPos[line1] - this.dimensions.WIDTH; 39 40 //选择随机地形 41 this.sourceXPos[line1] = this.getRandomType() + this.spritePos.x; 42 } 43 }, 44 update:function(deltaTime,speed) { 45 var increment = Math.floor(speed * (FPS / 1000) * deltaTime); 46 47 if(this.xPos[0] <= 0) {//交换地面一和二 48 this.updateXPos(0, increment); 49 } else { 50 this.updateXPos(1, increment); 51 } 52 this.draw(); 53 }, 54 reset:function() { 55 this.xPos[0] = 0; 56 this.xPos[1] = this.dimensions.WIDTH; 57 } 58 };
原型链中的方法实现了地面的运动和随机地形。
最后测试一下这一段代码：
1 window.onload = function () { 2 var h = new HorizonLine(canvas,spriteDefinition.HORIZON); 3 var startTime = 0; 4 (function draw(time) { 5 ctx.clearRect(0,0,600,150); 6 time = time || 0; 7 h.update(time - startTime,3); 8 startTime = time; 9 window.requestAnimationFrame(draw); 10 })(); 11 };
运行效果：
这样地面的绘制及滚动就完成了。
标签：背景 移动 函数 rem onload 返回 cdn drs nil
原文地址：http://www.cnblogs.com/undefined000/p/trex_1.html
