完成后的效果（注释掉了wrapBg中的overflow:hidden ）

start01.gif

接下来我们开发“游戏界面”

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