JavaScript实现实现Fly Bird小游戏小游戏
主要为大家详细介绍了JavaScript实现Fly Bird小游戏的制作方法,具有一定的参考价值,感兴趣的小伙伴们可
以参考一下
本教程为大家分享了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 rel="stylesheet" type="text/css" href="css/index.css"/>
</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);