接下来我们开发“游戏界面”
3. “游戏界面”的开发
游戏界面中有三样元素，分别是“小鸟”，“障碍”，和“计分器”，我们依次来创建相应的对象。
3.1 小鸟
首先，创建小鸟的对象， bird.js 文件。
var bird = { flyTimer:null,//小鸟飞翔定时器 wingTimer:null,//小鸟翅膀摆动定时器 div:document.createElement("div"), showBird:function(parentObj) { this.div.style.width = "40px"; this.div.style.height = "28px"; this.div.style.backgroundImage = "url(img/bird0.png)"; this.div.style.backgroundRepeat = "no-repeat"; this.div.style.position = "absolute"; this.div.style.left = "50px"; this.div.style.top = "200px"; this.div.style.zIndex = "1"; parentObj.appendChild(this.div); //将小鸟DIV插入游戏界面中 }, fallSpeed: 0, //小鸟下落速度 flyBird: function(){ //控制小鸟飞翔下落的函数 bird.flyTimer = setInterval(fly,40); function fly() { bird.div.style.top = bird.div.offsetTop + bird.fallSpeed++ + "px"; if (bird.div.offsetTop < 0) { bird.fallSpeed = 2; //这里用于控制小鸟不要飞出界面 } if (bird.div.offsetTop >= 395) { bird.fallSpeed = 0; clearInterval(bird.flyTimer); //一旦飞到地面，清除定时器 clearInterval(bird.wingTimer); //清除翅膀摆动定时器 } if (bird.fallSpeed > 12) { bird.fallSpeed = 12; //鸟的最大下落速度控制在12 } } }, wingWave: function() { //控制小鸟煽动翅膀的函数 var up = ["url(img/up_bird0.png)", "url(img/up_bird1.png)"]; var down = ["url(img/down_bird0.png)", "url(img/down_bird1.png)"]; var i = 0, j = 0; bird.wingTimer = setInterval(wing,120);//逐帧动画，小鸟煽动翅膀 function wing() { if (bird.fallSpeed > 0) { bird.div.style.backgroundImage = down[i++]; if (i==2) {i = 0} }if (bird.fallSpeed < 0) { bird.div.style.backgroundImage = up[j++]; if (j==2) {j = 0} } } }, };
下面，实现点击start按钮时，加载小鸟。(在之前的代码基础上添加)
jsStartBtn.onclick = function() { //为start按键添加点击事件处理程序 jsHeadTitle.style.display = "none"; //隐藏标题 clearInterval(headWaveTimer); //关闭让标题摆动的定时器 jsStartBtn.style.display = "none"; //隐藏按键 bird.showBird(jsWrapBg); //插入小鸟到界面中 bird.flyBird(); //控制小鸟飞翔下落 bird.wingWave(); //逐帧动画，小鸟煽动翅膀 jsWrapBg.onclick = function(){ bird.fallSpeed = -8; }; //待添加功能 //点击开始按键进入游戏界面 }
添加小鸟后的效果
play01.gif
3.2 障碍（上方水管和下方水管）
block示意图.png
障碍分为上方管道和下方管道，如示意图所示结构嵌套，这样就可以通过随机设置DownDiv2的高度和gapHeight的高度，来改变生成障碍的形态
block.js
function Block() { this.upDivWrap = null; this.downDivWrap = null; this.downHeight = baseObj.randomNum(0,150); this.gapHeight = baseObj.randomNum(150,160); this.upHeight = 312 - this.downHeight - this.gapHeight; // 用来生成Div的方法 this.createDiv = function(url, height, positionType, left, top) { var newDiv = document.createElement("div"); newDiv.style.width = "62px"; newDiv.style.height = height; newDiv.style.position = positionType; newDiv.style.left = left; newDiv.style.top = top; newDiv.style.backgroundImage = url; //"url(/img/0.jpg)" return newDiv; }; this.createBlock = function() { var upDiv1 = this.createDiv("url(img/up_mod.png)", this.upHeight + "px"); var upDiv2 = this.createDiv("url(img/up_pipe.png)", "60px"); this.upDivWrap = this.createDiv(null, null, "absolute", "450px"); this.upDivWrap.appendChild(upDiv1); this.upDivWrap.appendChild(upDiv2);//生成上方管道 var downDiv1 = this.createDiv("url(img/down_pipe.png)", "60px"); var downDiv2 = this.createDiv("url(img/down_mod.png)", this.downHeight +"px"); this.downDivWrap = this.createDiv(null, null, "absolute", "450px", 363 - this.downHeight + "px"); this.downDivWrap.appendChild(downDiv1); this.downDivWrap.appendChild(downDiv2); //生成下方的管道 jsWrapBg.appendChild(this.upDivWrap); jsWrapBg.appendChild(this.downDivWrap); }; this.moveBlock = function() { //控制管道移动的方法 this.upDivWrap.style.left = this.upDivWrap.offsetLeft - 3 + "px"; this.downDivWrap.style.left = this.downDivWrap.offsetLeft - 3 + "px"; }; }
公共对象文件 baseObj.js ，用来提供随机数，和两个矩形div的碰撞检测