本教程为大家分享了Fly Bird小游戏的制作流程，供大家参考，具体内容如下
1.分析页面结构，理清需求和功能
游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。
1.1 开始界面
start.gif
游戏的大背景
上下移动的游戏标题和翅膀摆动的小鸟
start 按钮，点击进入游戏界面
一直移动的地面
1.2 游戏界面
play.gif
显示越过障碍数量的计分器
移动的障碍物，分别是上管道和下管道
点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，
当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面
1.3 结束界面
GAMEOVER 提示面板
OK 按钮
2. 开发“开始界面”
考虑到草地的移动效果，我们在页面中加入两个草地
2.1 HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Fly Bird</title> <link type="text/css" href="https://www.jb51.net/css/index.css"/> </head> <body> <div> <!--游戏背景--> <div> <!--开始标题--> <img src="https://www.jb51.net/img/bird0.png" alt="小鸟" /> <!--标题中的小鸟--> </div> <button ></button> <!--开始按钮--> <div></div> <!--草地1--> <div></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），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。
2.3.1 开始标题的摆动
var jsHeadTitle = document.getElementById("headTitle");// 获取标题 var jsHeadBird = document.getElementById("headBird"); // 获取标题中小鸟 var Y = 3;//标题的摆动幅度 var index = 0; var imgArr = ["https://www.jb51.net/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