1.1 开始界面
start.gif
游戏的大背景
上下移动的游戏标题和翅膀摆动的小鸟
start 按钮，点击进入游戏界面
一直移动的地面
1.2 游戏界面
play.gif
显示越过障碍数量的计分器
移动的障碍物，分别是上管道和下管道
点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，
当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面
1.3 结束界面game over 提示面板
ok 按钮
2. 开发“开始界面”考虑到草地的移动效果，我们在页面中加入两个草地
2.1 html<!doctype html><html><head><meta charset="utf-8" /><title>fly bird</title><link rel="stylesheet" type="text/css" href="css/index.css?1.1.11"/></head><body><div id="wrapbg"> <!--游戏背景--><div id="headtitle"> <!--开始标题--><img id="headbird" src="img/bird0.png" alt="小鸟" /> <!--标题中的小鸟--></div><button id="startbtn" ></button> <!--开始按钮--><div id="grassland1"></div> <!--草地1--><div id="grassland2"></div> <!--草地2--></div></body></html>
2.2 css#wrapbg{/*游戏背景*/width: 343px;height: 480px; margin: 0 auto;background-image:url(../img/bg.jpg);position: relative;top: 100px;overflow: hidden; }#headtitle{/*开始标题*/width: 236px;height: 77px;background-image: url(../img/head.jpg);position: absolute; left: 53px; top: 100px; }#headbird{/*开始标题中的小鸟*/float:right;margin-top: 25px; }#startbtn{/*开始按钮*/width: 85px;height: 29px;padding: 0;margin: 0;background-image: url(../img/start.jpg);position: absolute;left: 129px;top: 250px; }#grassland1{/*草地1*/height: 14px;width: 343px;background-image: url(../img/banner.jpg);position: absolute;top: 423px; }#grassland2{/*草地2*/height: 14px;width: 343px;background-image: url(../img/banner.jpg);position: absolute;top: 423px;left: 343px; }
将wrapbg中的overflow:hidden 注释掉的页面效果
开始界面.jpg
2.3 js小鸟煽动翅膀的效果需要用到逐帧动画的原理
逐帧动画是一种常见的动画形式（frame by frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。
bird1.png
bird0.png
2.3.1 开始标题的摆动 var jsheadtitle = document.getelementbyid("headtitle");// 获取标题var jsheadbird = document.getelementbyid("headbird"); // 获取标题中小鸟var y = 3;//标题的摆动幅度var index = 0;var imgarr = ["img/bird0.png","img/bird1.png"] //将小鸟图片路径放入一个数组，利用逐帧动画的原理做出小鸟翅膀摆动的样子var headwavetimer = setinterval(headwave,200); //设置标题上下摆动的定时器function headwave() { y *= -1; jsheadtitle.style.top = jsheadtitle.offsettop + y + "px"; jsheadbird.src = imgarr[index++];if (index == 2) { index = 0; } }
2.3.2 移动的草地 var jsgrassland1 = document.getelementbyid("grassland1"); //获取草地1 var jsgrassland2 = document.getelementbyid("grassland2"); //获取草地2 var landtimer = setinterval(landrun,30); //让草地动起来的定时器 function landrun() { if (jsgrassland1.offsetleft <= -343) {jsgrassland1.style.left = "343px"; } if (jsgrassland2.offsetleft <= -343) {jsgrassland2.style.left = "343px"; }jsgrassland1.style.left = jsgrassland1.offsetleft - 3 + "px";jsgrassland2.style.left = jsgrassland2.offsetleft - 3 + "px"; }
2.3.3 start按键 var jsstartbtn = document.getelementbyid("startbtn"); jsstartbtn.onclick = function() { //为start按键添加点击事件处理程序 jsheadtitle.style.display = "none"; //隐藏标题 clearinterval(headwavetimer); //关闭让标题摆动的定时器 jsstartbtn.style.display = "none"; //隐藏按键//待添加功能//点击开始按键进入游戏界面 }
完成后的效果（注释掉了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
function block() {this.updivwrap = null;this.downdivwrap = null;this.downheight = baseobj.randomnum(0,150);//随机生成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的碰撞检测
var baseobj = {//随机数 randomnum: function(min, max) {return parseint(math.random() * (max - min + 1) + min); },//两个矩形元素之间的碰撞检测 rectanglecrashexamine: function (obj1, obj2) {var obj1left = obj1.offsetleft;var obj1width = obj1.offsetleft + obj1.offsetwidth;var obj1top = obj1.offsettop;var obj1height = obj1.offsettop + obj1.offsetheight;var obj2left = obj2.offsetleft;var obj2width = obj2.offsetleft + obj2.offsetwidth;var obj2top = obj2.offsettop;var obj2height = obj2.offsettop + obj2.offsetheight;if (!(obj1left > obj2width || obj1width < obj2left || obj1top > obj2height || obj1height < obj2top)) {return true; }return false; }, };
下面我的想法是在start按钮点击的时候创建一个block，把这个block存储到数组blocksarr 中，在 landtimer 定时器的方法 landrun 中检查此数组的长度，如果数组不为空数组，那么就让数组中所有的block移动。
检查数组中最后一个block离开的距离，达到一定距离，就重新new 一个block，添加到数组。
检查数组中第一个block，一旦达到一定位置，就在结构中移除downdivwrap 和 updivwrap，同时在数组中删除block。
var blocksarr = []; var blockdistance = baseobj.randomnum(130,250); var landtimer = setinterval(landrun,30); //让草地动起来的定时器 function landrun() { if (jsgrassland1.offsetleft <= -343) {jsgrassland1.style.left = "343px"; } if (jsgrassland2.offsetleft <= -343) {jsgrassland2.style.left = "343px"; }jsgrassland1.style.left = jsgrassland1.offsetleft - 3 + "px";jsgrassland2.style.left = jsgrassland2.offsetleft - 3 + "px"; if (blocksarr.length) { for (var i = 0; i < blocksarr.length; i++) {blocksarr[i].moveblock(); var x =baseobj.rectanglecrashexamine(blocksarr[i].downdivwrap, bird.div); var y = baseobj.rectanglecrashexamine(blocksarr[i].updivwrap, bird.div); var z = bird.div.offsettop >= 390; if (x || y || z) { window.clearinterval(landtimer);//清除landtimer定时器bird.fallspeed = 0; //小鸟下落jswrapbg.onclick = null; //消除点击事件 } } if (blocksarr[blocksarr.length - 1].downdivwrap.offsetleft < (450 - blockdistance)) {blockdistance = baseobj.randomnum(130,250); var newblock = new block(); newblock.createblock();blocksarr.push(newblock); } if (blocksarr[0].downdivwrap.offsetleft < -50) {jswrapbg.removechild(blocksarr[0].downdivwrap);jswrapbg.removechild(blocksarr[0].updivwrap);blocksarr.shift(blocksarr[0]); } } }
当前的游戏效果
play02.gif
3.3 计分器游戏中的计分器相对较好实现，我们就实现最大为三位数的计分器吧。
html
<div id="score"> <div id="num1"></div> <div id="num2"></div> <div id="num3"></div> </div>
css样式
#score{position:absolute;left: 130px;top:50px;z-index: 1; }#score div{height: 39px;width: 28px;float: left;background-image: url(../img/0.jpg);display: none; }
js
var jsscore = document.getelementbyid("score"); var jsnum1 = document.getelementbyid("num1"); var jsnum2 = document.getelementbyid("num2"); var jsnum3 = document.getelementbyid("num3"); var score = 0;
实现计数器功能，最重要的是如何判断走过水管的数量，我们以水管的位置来判断。bird的定位left为50px，水管的宽度是62px，当水管越过小鸟的时候，水管距离它父级的定位offsetleft 是 -12px。每当有一个水管到达此位置，score++；
在start按钮的事件处理程序中加入
jsnum1.style.display = "block";// 在点击开始之后，让计数器显示出来。
if (blocksarr[0].downdivwrap.offsetleft == -12) {score++;//积分面板 if (score < 10) {jsnum1.style.backgroundimage = "url(img/" + score + ".jpg)"; } else if (score < 100) {jsnum2.style.display = "block";jsnum1.style.backgroundimage = "url(img/" + parseint(score/10) + ".jpg)";jsnum2.style.backgroundimage = "url(img/" + score%10 + ".jpg)"; } else if (score < 1000) {jsnum3.style.display = "block";jsnum1.style.backgroundimage = "url(img/" + parseint(score/100) + ".jpg)";jsnum2.style.backgroundimage = "url(img/" + parseint(score/10)%10 + ".jpg)";jsnum3.style.backgroundimage = "url(img/" + score%10 + ".jpg)"; } console.log(score); }
目前效果 ，计数器功能完成。
play03.gif
4.“结束界面”的开发当小鸟和管道碰撞或者和地面碰撞时候，隐藏计分器，弹出结束面板。
结束界面主要有“结束面板”和“ok”按钮，这里需要为“ok”按钮添加点击事件。
<div id="gameover"> <img src="img/game_over.jpg" alt="game over" /> <img src="img/message.jpg" alt="message" /> <img id="ok" src="img/ok.jpg" alt="ok" /> </div>
#gameover{position: absolute;top: 100px;text-align: center;display: none;z-index: 1; }
为“ok”按钮添加事件
jsokbtn.onclick = function() {window.location.href = "index.html"; //刷新页面 }
最终效果
play04.gif
有兴趣的朋友，可以加群下载代码，然后加上音效
以上就是js实现fly bird游戏的全过程详解的详细内容。