@[toc]飞机大战
飞机大战小游戏相关说明
需求说明
- 己方飞机与敌方飞机
- 己方发射子弹，摧毁敌方飞机
- 击毁一辆敌方飞机得分
- 己方飞机碰撞敌方飞机游戏结束统计分数
功能说明
主要功能
- 鼠标移动己方飞机
- 己方飞机发射子弹
- 敌方飞机随机生成，运动方向由上到下
- 模式难度选择：敌机的数量、敌机的移动速度等
次要功能
- 敌方不同类型飞机
- 己方不同类型飞机
技术说明
掌握基本的前端技术，熟练使用CSS、JS代码，完成游戏的布局与动态交互作用
飞机大战小游戏建立与代码实现
- 创建新文件夹来存放飞机大战小游戏文件如图一
- 主文件夹里面创建两个子文件夹(img,music);一个HTML文件(planegame.html);一个JS文件（plane.js);一个CSS文件（plane.css）。用来存放游戏的图片，音频及代码。如图二所示。
- 找图片（图三）与音频资源（图四）简单的P（录）一下：
4. 页面前期布局
游戏布局主代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="Anthor" content="寻至善" /> <title>飞机大战1.0版</title> <link type ="text/css" href="plane.css" rel="stylesheet" /> </head> <body> <div id="box"> <div id="level"> <h1></h1> <p>简单模式</p> <p>中等模式</p> <p>困难模式</p> <p style="color: #f00">地狱模式</p> </div> <div id="map"> <div id="BiuAll"></div> </div> <div id="score">0</div> <div id="restart"> <p class="p1">您的最终得分是：<span>0</span></p> <p class="p2">获得称号：<span>青铜</span></p> <p class="p3">重新开始</p> </div> </div> <script type="text/javascript" src="plane.js"></script> </body> </html> ``
CSS布局代码：
#map{ overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("img/cover.png"); } #level{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } #level h1{ font-size: 40px; padding-top: 60px; padding-bottom: 150px; line-height: 60px; text-align: center; color: #fff; } #level p{ margin: 30px auto; width: 200px; height: 35px; line-height: 35px; text-align: center; background: #fff; font-weight: bolder; cursor: pointer; } #level p:hover{ background: pink; color: #fff; } #map .plane,#map .biu,#map .enemy,#map .boom,#map .boom2{ position: absolute; } #map .plane{ z-index: 8; } #map .biu{ z-index: 10; } #map .boom2{ z-index: 11; animation: bling 2s 1; animation-fill-mode: forwards; } #map .enemy{ z-index: 9; } #map .boom{ z-index: 7; animation: fade .8s 1; animation-fill-mode: forwards; }
小结
HTML与CSS是前端的搭建与装饰部分，后面将进行Javascript主要交互功能的完善。
