├── img
    ├── 0.jpg
    ├── 0.png
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    ├── 9.jpg
    ├── bg.jpg
    ├── ok.jpg
    ├── bird0.png
    ├── bird1.png
    ├── head.jpg
    ├── score.jpg
    ├── start.jpg
    ├── banner.jpg
    ├── down_mod.png
    ├── message.jpg
    ├── submit.jpg
    ├── up_bird0.png
    ├── up_bird1.png
    ├── up_mod.png
    ├── up_pipe.png
    ├── down_bird0.png
    ├── down_bird1.png
    ├── down_pipe.png
    └── game_over.jpg
├── js
    ├── baseObj.js
    ├── block.js
    └── bird.js
├── css
    └── index.css
└── index.html


/img/0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/0.jpg


--------------------------------------------------------------------------------
/img/0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/0.png


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/1.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/6.jpg


--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/7.jpg


--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/8.jpg


--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/9.jpg


--------------------------------------------------------------------------------
/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/bg.jpg


--------------------------------------------------------------------------------
/img/ok.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/ok.jpg


--------------------------------------------------------------------------------
/img/bird0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/bird0.png


--------------------------------------------------------------------------------
/img/bird1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/bird1.png


--------------------------------------------------------------------------------
/img/head.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/head.jpg


--------------------------------------------------------------------------------
/img/score.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/score.jpg


--------------------------------------------------------------------------------
/img/start.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/start.jpg


--------------------------------------------------------------------------------
/img/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/banner.jpg


--------------------------------------------------------------------------------
/img/down_mod.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/down_mod.png


--------------------------------------------------------------------------------
/img/message.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/message.jpg


--------------------------------------------------------------------------------
/img/submit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/submit.jpg


--------------------------------------------------------------------------------
/img/up_bird0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/up_bird0.png


--------------------------------------------------------------------------------
/img/up_bird1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/up_bird1.png


--------------------------------------------------------------------------------
/img/up_mod.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/up_mod.png


--------------------------------------------------------------------------------
/img/up_pipe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/up_pipe.png


--------------------------------------------------------------------------------
/img/down_bird0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/down_bird0.png


--------------------------------------------------------------------------------
/img/down_bird1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/down_bird1.png


--------------------------------------------------------------------------------
/img/down_pipe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/down_pipe.png


--------------------------------------------------------------------------------
/img/game_over.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YangQiGitHub/FlyBird/HEAD/img/game_over.jpg


--------------------------------------------------------------------------------
/js/baseObj.js:
--------------------------------------------------------------------------------
 1 | var baseObj = {
 2 | 	//随机数
 3 | 	randomNum: function(min, max) {
 4 | 		return parseInt(Math.random() * (max - min + 1) + min);
 5 | 	},
 6 | 
 7 | 	//两个矩形元素之间的碰撞检测
 8 | 	rectangleCrashExamine: function (obj1, obj2) {
 9 | 			var obj1Left = obj1.offsetLeft;
10 | 			var obj1Width = obj1.offsetLeft + obj1.offsetWidth;
11 | 			var obj1Top = obj1.offsetTop;
12 | 			var obj1Height = obj1.offsetTop + obj1.offsetHeight;
13 | 
14 | 			var obj2Left = obj2.offsetLeft;
15 | 			var obj2Width = obj2.offsetLeft + obj2.offsetWidth;
16 | 			var obj2Top = obj2.offsetTop;
17 | 			var obj2Height = obj2.offsetTop + obj2.offsetHeight;
18 | 
19 | 			if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
20 | 				return true;
21 | 			}
22 | 			return false;
23 | 	},
24 | };
25 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
 1 | #wrapBg{/*游戏背景*/
 2 | 	width: 343px;height: 480px; 
 3 | 	margin: 0 auto;
 4 | 	background-image:url(../img/bg.jpg);
 5 | 	position: relative;
 6 | 	top: 100px;
 7 | 	overflow: hidden;
 8 | }
 9 | 
10 | #headTitle{/*开始标题*/
11 | 	width: 236px;height: 77px;
12 | 	background-image: url(../img/head.jpg);
13 | 	position: absolute; left: 53px; top: 100px;
14 | }
15 | 
16 | #headBird{/*开始标题中的小鸟*/
17 | 	float:right;
18 | 	margin-top: 25px;
19 | }
20 | 
21 | #startBtn{/*开始按钮*/
22 | 	width: 85px;height: 29px;
23 | 	padding: 0;margin: 0;
24 | 	background-image: url(../img/start.jpg);
25 | 	position: absolute;left: 129px;top: 250px;
26 | }
27 | 
28 | #grassLand1{/*草地1*/
29 | 	height: 14px;width: 343px;
30 | 	background-image: url(../img/banner.jpg);
31 | 	position: absolute;top: 423px;
32 | }
33 | 
34 | #grassLand2{/*草地2*/
35 | 	height: 14px;width: 343px;
36 | 	background-image: url(../img/banner.jpg);
37 | 	position: absolute;top: 423px;left: 343px;
38 | }
39 | 
40 | #score{
41 | 	position:absolute;
42 | 	left: 130px;
43 | 	top:50px;
44 | 	z-index: 1;
45 | }
46 | 
47 | #score div{
48 | 	height: 39px;
49 | 	width: 28px;
50 | 	float: left;
51 | 	background-image: url(../img/0.jpg);
52 | 	display: none;
53 | }
54 | 
55 | #gameOver{
56 | 	position: absolute;
57 | 	top: 100px;
58 | 	text-align: center;
59 | 	display: none;
60 | 	z-index: 1;
61 | }
62 | 


--------------------------------------------------------------------------------
/js/block.js:
--------------------------------------------------------------------------------
 1 | function Block() {
 2 | 	this.upDivWrap = null;
 3 | 	this.downDivWrap = null;
 4 | 	this.downHeight = baseObj.randomNum(0,150);
 5 | 	this.gapHeight = baseObj.randomNum(150,160);
 6 | 	this.upHeight = 312 - this.downHeight - this.gapHeight;
 7 | 	
 8 | 	// 用来生成Div的方法
 9 | 	this.createDiv = function(url, height, positionType, left, top) {
10 | 		var newDiv = document.createElement("div");
11 | 		newDiv.style.width = "62px";
12 | 		newDiv.style.height = height;
13 | 		newDiv.style.position = positionType;
14 | 		newDiv.style.left = left;
15 | 		newDiv.style.top = top;
16 | 		newDiv.style.backgroundImage = url;  //"url(/img/0.jpg)"
17 | 		return newDiv;
18 | 	};
19 | 	
20 | 	this.createBlock = function() {
21 | 		var upDiv1 = this.createDiv("url(img/up_mod.png)", this.upHeight + "px");
22 | 		var upDiv2 = this.createDiv("url(img/up_pipe.png)", "60px");
23 | 		this.upDivWrap = this.createDiv(null, null, "absolute", "450px");
24 | 		this.upDivWrap.appendChild(upDiv1);
25 | 		this.upDivWrap.appendChild(upDiv2);//生成上方管道
26 | 		
27 | 		var downDiv1 = this.createDiv("url(img/down_pipe.png)", "60px");
28 | 		var downDiv2 = this.createDiv("url(img/down_mod.png)", this.downHeight +"px");
29 | 		this.downDivWrap = this.createDiv(null, null, "absolute", "450px", 363 - this.downHeight + "px");
30 | 		this.downDivWrap.appendChild(downDiv1);
31 | 		this.downDivWrap.appendChild(downDiv2); //生成下方的管道
32 | 		
33 | 		jsWrapBg.appendChild(this.upDivWrap);
34 | 		jsWrapBg.appendChild(this.downDivWrap);
35 | 	};
36 | 	
37 | 	this.moveBlock = function() { //控制管道移动的方法
38 | 		this.upDivWrap.style.left = this.upDivWrap.offsetLeft - 3 + "px";
39 | 		this.downDivWrap.style.left = this.downDivWrap.offsetLeft - 3 + "px";
40 | 	};	
41 | }
42 | 


--------------------------------------------------------------------------------
/js/bird.js:
--------------------------------------------------------------------------------
 1 | var bird = {
 2 | 	flyTimer:null,//小鸟飞翔定时器
 3 | 	wingTimer:null,//小鸟翅膀摆动定时器
 4 | 	
 5 | 	div:document.createElement("div"),
 6 | 	showBird:function(parentObj) {
 7 | 		this.div.style.width = "40px";
 8 | 		this.div.style.height = "28px";
 9 | 		this.div.style.backgroundImage = "url(img/bird0.png)";
10 | 		this.div.style.backgroundRepeat = "no-repeat";
11 | 		this.div.style.position = "absolute";
12 | 		this.div.style.left = "50px";
13 | 		this.div.style.top = "200px";
14 | 		this.div.style.zIndex = "1";
15 | 		
16 | 		parentObj.appendChild(this.div);  //将小鸟DIV插入游戏界面中
17 | 	},
18 | 	
19 | 	fallSpeed: 0, //小鸟下落速度
20 | 	flyBird: function(){ //控制小鸟飞翔下落的函数
21 | 		bird.flyTimer = setInterval(fly,40);
22 | 		function fly() {
23 | 			bird.div.style.top = bird.div.offsetTop + bird.fallSpeed++ + "px";
24 | 			if (bird.div.offsetTop < 0) {  
25 | 				bird.fallSpeed = 2; //这里用于控制小鸟不要飞出界面
26 | 			}
27 | 			if (bird.div.offsetTop >= 395) {
28 | 				bird.fallSpeed = 0;
29 | 				clearInterval(bird.flyTimer); //一旦飞到地面，清除定时器
30 | 				clearInterval(bird.wingTimer); //清除翅膀摆动定时器
31 | 			}
32 | 			if (bird.fallSpeed > 12) {
33 | 				bird.fallSpeed = 12;  //鸟的最大下落速度控制在12
34 | 			}
35 | 		}
36 | 	},
37 | 	
38 | 	wingWave: function() { //控制小鸟煽动翅膀的函数
39 | 		var up = ["url(img/up_bird0.png)", "url(img/up_bird1.png)"];
40 | 		var down = ["url(img/down_bird0.png)", "url(img/down_bird1.png)"];
41 | 		var i = 0, j = 0;
42 | 		bird.wingTimer = setInterval(wing,120);//逐帧动画，小鸟煽动翅膀
43 | 		function wing() {
44 | 			if (bird.fallSpeed > 0) {
45 | 				bird.div.style.backgroundImage = down[i++];
46 | 				if (i==2) {i = 0}
47 | 			}if (bird.fallSpeed < 0) {
48 | 				bird.div.style.backgroundImage = up[j++];
49 | 				if (j==2) {j = 0}
50 | 			}
51 | 		}
52 | 	},	
53 | };
54 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset="utf-8" />
  5 | 		<title>Fly Bird</title>
  6 | 		<link rel="stylesheet" type="text/css" href="css/index.css"/>
  7 | 	</head>
  8 | 	<body>
  9 | 		<div id="wrapBg">  <!--游戏背景-->
 10 | 			<div id="headTitle"> <!--开始标题-->
 11 | 				<img id="headBird" src="img/bird0.png" alt="小鸟" /> <!--标题中的小鸟-->
 12 | 			</div>
 13 | 			<button id="startBtn" ></button> <!--开始按钮-->
 14 | 			<div id="grassLand1"></div> <!--草地1-->
 15 | 			<div id="grassLand2"></div> <!--草地2-->
 16 | 			<div id="score">
 17 | 				<div id="num1"></div>
 18 | 				<div id="num2"></div>
 19 | 				<div id="num3"></div>
 20 | 			</div>
 21 | 			<div id="gameOver">
 22 | 				<img src="img/game_over.jpg" alt="game over" />
 23 | 				<img src="img/message.jpg" alt="message" />
 24 | 				<img id="ok" src="img/ok.jpg" alt="ok" />
 25 | 			</div>
 26 | 		</div>
 27 | 	</body>
 28 | 	<script src="js/block.js" type="text/javascript" charset="utf-8"></script>
 29 | 	<script src="js/baseObj.js" type="text/javascript" charset="utf-8"></script>
 30 | 	<script src="js/bird.js" type="text/javascript" charset="utf-8"></script>
 31 | 	<script type="text/javascript">
 32 | 		var jsWrapBg = document.getElementById("wrapBg");
 33 | 		var jsHeadTitle = document.getElementById("headTitle");// 获取标题
 34 | 		var jsHeadBird = document.getElementById("headBird"); // 获取标题中小鸟
 35 | 		var blocksArr = [];  //用来储存block的数组
 36 | 		var blockDistance = baseObj.randomNum(120,350);
 37 | 		
 38 | 		var jsScore = document.getElementById("score");
 39 | 		var jsNum1 = document.getElementById("num1");
 40 | 		var jsNum2 = document.getElementById("num2");
 41 | 		var jsNum3 = document.getElementById("num3");
 42 | 		var score = 0;
 43 | 		
 44 | 		var jsGameOver = document.getElementById("gameOver");
 45 | 		var jsOkBtn = document.getElementById("ok");
 46 | 		
 47 | 		var Y = 3;//标题的摆动幅度
 48 | 		var index = 0;
 49 | 		var imgArr = ["img/bird0.png","img/bird1.png"] 
 50 | 		//将小鸟图片路径放入一个数组，利用帧动画的原理做出小鸟翅膀摆动的样子
 51 | 		var headWaveTimer = setInterval(headWave,200); //设置标题上下摆动的定时器
 52 | 		function headWave() {
 53 | 			Y *= -1;
 54 | 			jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + "px";
 55 | 			jsHeadBird.src = imgArr[index++];
 56 | 			if (index == 2) {
 57 | 				index = 0;
 58 | 			}
 59 | 		}
 60 | 		
 61 | 		var jsGrassLand1 = document.getElementById("grassLand1"); //获取草地1
 62 | 		var jsGrassLand2 = document.getElementById("grassLand2"); //获取草地2
 63 | 		
 64 | 		var landTimer = setInterval(landRun,30); //让草地动起来的定时器
 65 | 		function landRun() {
 66 | 			if (jsGrassLand1.offsetLeft <= -343) {
 67 | 				jsGrassLand1.style.left = "343px";
 68 | 			}
 69 | 			if (jsGrassLand2.offsetLeft <= -343) {
 70 | 				jsGrassLand2.style.left = "343px";
 71 | 			}
 72 | 			jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px";
 73 | 			jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px";
 74 | 			
 75 | 			if (blocksArr.length) {
 76 | 				for (var i = 0; i < blocksArr.length; i++) {
 77 | 					blocksArr[i].moveBlock();
 78 | 					var x =baseObj.rectangleCrashExamine(blocksArr[i].downDivWrap, bird.div);
 79 | 					var y = baseObj.rectangleCrashExamine(blocksArr[i].upDivWrap, bird.div);
 80 | 					var z = bird.div.offsetTop >= 390;
 81 | 					if (x || y || z) {
 82 | 						window.clearInterval(landTimer);//清除landTimer定时器
 83 | 						bird.fallSpeed = 0; //小鸟下落
 84 | 						jsWrapBg.onclick = null; //消除点击事件
 85 | 						jsScore.style.display = "none"; //隐藏计分器
 86 | 						jsGameOver.style.display = "block"; // 显示gameover面板
 87 | 					}
 88 | 				}
 89 | 				if (blocksArr[blocksArr.length - 1].downDivWrap.offsetLeft < (450 - blockDistance)) {
 90 | 						blockDistance = baseObj.randomNum(130,250);
 91 | 						var newBlock = new Block();
 92 | 						newBlock.createBlock();
 93 | 						blocksArr.push(newBlock);
 94 | 				}
 95 | 				
 96 | 				if (blocksArr[0].downDivWrap.offsetLeft == -12) {
 97 | 						score++;//积分面板
 98 | 						if (score < 10) {
 99 | 							jsNum1.style.backgroundImage = "url(img/" + score + ".jpg)";
100 | 						} else if (score < 100) {
101 | 							jsNum2.style.display = "block";
102 | 							jsNum1.style.backgroundImage = "url(img/" + parseInt(score/10) + ".jpg)";
103 | 							jsNum2.style.backgroundImage = "url(img/" + score%10 + ".jpg)";
104 | 						} else if (score < 1000) {
105 | 							jsNum3.style.display = "block";
106 | 							jsNum1.style.backgroundImage = "url(img/" + parseInt(score/100) + ".jpg)";
107 | 							jsNum2.style.backgroundImage = "url(img/" + parseInt(score/10)%10 + ".jpg)";
108 | 							jsNum3.style.backgroundImage = "url(img/" + score%10 + ".jpg)";
109 | 						}
110 | 						console.log(score);
111 | 				}
112 | 				
113 | 				if (blocksArr[0].downDivWrap.offsetLeft < -50) {
114 | 						jsWrapBg.removeChild(blocksArr[0].downDivWrap);
115 | 						jsWrapBg.removeChild(blocksArr[0].upDivWrap);
116 | 						blocksArr.shift(blocksArr[0]);
117 | 				}
118 | 			}
119 | 		}
120 | 		
121 | 		var jsStartBtn = document.getElementById("startBtn");
122 | 		jsStartBtn.onclick = function() { //为start按键添加点击事件处理程序
123 | 			jsHeadTitle.style.display = "none"; //隐藏标题
124 | 			clearInterval(headWaveTimer); //关闭让标题摆动的定时器
125 | 			jsStartBtn.style.display = "none"; //隐藏按键
126 | 			bird.showBird(jsWrapBg); //插入小鸟到界面中
127 | 			bird.flyBird(); //控制小鸟飞翔下落
128 | 			bird.wingWave(); //逐帧动画，小鸟煽动翅膀
129 | 			jsWrapBg.onclick = function(){
130 | 				bird.fallSpeed = -8;
131 | 			};
132 | 			var b = new Block();
133 | 			b.createBlock();		
134 | 			blocksArr.push(b);
135 | 			jsNum1.style.display = "block";
136 | 			//待添加功能
137 | 			//点击开始按键进入游戏界面
138 | 		}
139 | 		
140 | 		jsOkBtn.onclick = function() {
141 | 			window.location.href = "index.html"; //刷新页面
142 | 		}
143 | 		
144 | 	</script>
145 | </html>
146 | 


--------------------------------------------------------------------------------