JS飞机大战开发

1.用户需求

用户想要自定义一款打飞机游戏:系统不断生成可随机移动且不断发射子弹的敌机，玩家需要控制战机移动躲避敌机的子弹且能够控制战机发射子弹消灭敌机。

2.需求分析

2.1 游戏规则

2.1.1 概念实体

● 我方飞机：由玩家控制的飞机，在游戏中玩家可以控制飞机在地图内上下左右移动。同时玩家可以控制飞机发射子弹。我方飞机具有血量，当血量为零时我方飞机被击毁。
● 敌方飞机：由游戏控制的飞机，可以发射子弹。游戏会控制敌方飞机左右移动，但游戏中敌方飞机会被动向下滑落。敌方飞机没有等级区别，所有敌方飞机被子弹击中后都会被击毁。
● 子弹：由飞机发射的子弹。本游戏中子弹没有等级的区别。敌方飞机被子弹击中后会爆炸，我方飞机被击中后会扣除血量。我方飞机发射的子弹向上飞行，敌方飞机发射的子弹向下飞行。

---

2.1.2 业务流程

● 飞机移动规则：飞机分为我方飞机和敌方飞机。我方飞机移动受玩家控制，我方飞机可以上下左右移动。当我方飞机移动到地图边界时，我方飞机不能向超出地图边界的方向移动。敌方飞机只能左右和向下移动，其中左右移动受游戏控制，而且不能移动出地图边界。敌方飞机会定时向下滑落，当敌方飞机滑落到地图的下方边界时会继续移动，直到移动出地图边界。
● 子弹飞行规则：子弹在游戏中都会以速度V向上或是向下移动，当子弹接触到地图边界时会继续飞行到消失。
● 飞机击毁规则：飞机在游戏中会被子弹击中，当敌方飞机被子弹击中时会直接爆炸。我方飞机被子弹击中时会扣除指定血量，当我方飞机总血量被扣完时，我方飞机爆炸，游戏结束。
● 敌机生成规则：在游戏中，整个地图上的敌机总数是一定的。当有敌方飞机被击毁或是滑落出地图边界时，游戏会生成新的敌机。新敌机会出现在地图的最上方。
● 游戏开始状态规则：在游戏刚开始，我方飞机处于地图最下方中间位置，我方飞机处于满血量位置。同时游戏会依据敌机生成策略开始生成敌机。

2.1.3 指令集

编号	指令(中文)	指令(英文)	类别
1	游戏初始化	init	系统级
2	生成战机	createPlane	系统级
3	生成敌机	createEnemy	系统级
4	子弹运动	runBullet	系统级
5	战机左移	go_left	玩家级
6	战机右移	go_right	玩家级
7	战机上移	go_up	玩家级
8	战机下移	go_down	玩家级

---

2.2 用例分析

用例：开始游戏

用例名	开始游戏
级别	用户目标
主要参与者	玩家
前置条件	无
涉众及关注点	玩家：希望快速启动游戏，快速可玩
主成功场景	玩家双击开始按钮，游戏初始化
扩展	……

用例：初始化游戏

用例名	初始化游戏
级别	系统目标
主要参与者	系统
前置条件	玩家启动游戏
涉众及关注点	系统：飞机能正常创建
主成功场景	玩家飞机创建在指定位置，随机创建多个敌机
扩展	……

用例：结束游戏

用例名	结束游戏
级别	系统目标
主要参与者	系统
涉众及关注点	系统能准确判断战机是否存在血量
前置条件	无
主成功场景	系统判断玩家战机血量为零，结束游戏
扩展	……

用例：玩游戏

用例名	玩游戏
级别	用户目标
主要参与者	玩家
涉众及关注点	玩家：游戏规则合理，不出异常
前置条件	游戏正常开始
主成功场景	系统按照玩家输入的指令对游戏元素进行变化
扩展	……

用例：子弹运动

用例名	子弹运动
级别	系统目标
主要参与者	系统
涉众及关注点	系统：双方发射的子弹按照设定正常运动
前置条件	游戏正常开始
主成功场景	玩家战机发射子弹按指定速度向上发射，敌机子弹按照随机速度向下发射
扩展	……

用例：碰撞检测

用例名	碰撞检测
级别	系统目标
主要参与者	系统
涉众及关注点	系统：对位置的碰撞作出不同响应
前置条件	游戏正常开始
主成功场景	敌机与我方发射子弹碰撞则被消灭，我方战机与敌方发射子弹碰撞战机血量减少
扩展	……

2.3 非功能性需求

● 运行平台：windows
● 输入/输出设备：键盘与电脑屏幕
● 运行环境：360浏览器

3.原型设计

3.1 UI设计

游戏开始界面

游戏界面

游戏结束界面

3.2 操作设计

表1 按键与指令对应关系

编号	按键	指令
1	↑键	飞机上移
2	↓键	飞机下移
3	←键	飞机左移
4	→键	飞机右移
5	B键	发射子弹

3.3 游戏属性设计

属性名	说明	取值
敌机创建	系统定时创建敌机	(400~2500)ms
敌机子弹创建时间	敌机子弹产生时间	(1000~3000)ms
子弹速度	子弹移动速度	30px/30ms
扣除血量	我方战机被击中扣除血量	20
我方战机血量上限	我方飞机初始血量	100
地图宽	横坐标最大值	浏览器宽度
地图长	纵坐标最大值	浏览器高度

4.代码设计

……

5.实现（部分）

5.1 血条设计

5.1.1 飞机血条效果

当我方战机被敌方子弹击中，血条会相应的变短

5.1.2 代码实现

HTML：

<div class="bloods">
	<span className = 'ge' id = "rec">100%</span>
</div>

css:

		.bloods{
			display: none;
			300px;
			height:40px;
			font-size:26px;
			font-weight:bold;
			color:white;
			text-align:center;
			text-align:center;
			border:2px solid white;
			position: absolute;
			top:20px;
			left:20px;		
			

			/* background:red; */
		}

		.ge{
			100%;
			height:40px;
			background:green;
			position:absolute;
			left:0px;
			top:0px;
		}

Js:

         var bloods = document.getElementById('rec'),
		 bloods.style.width = '300px';
		 bloods.style.height = '40px';
		 bloods.style.left = '0px';
		 bloods.style.top = '0px';
		 bloods.style.background = 'green';
		 bloods.style.display = 'block';	
         this.bloods = bloods;

         if(That.TC(That.plane,b) && b.classList.contains('b2')){
            var Plane_blood = That.plane.getAttribute('p_blood') - 20;
						
						
						if(Plane_blood){
							//b_div.style.width -= '100px';
							b_div.style.width = (parseInt(Plane_blood)) + "%";
							console.log(b_div);
							That.bloods.innerHTML = (parseInt(Plane_blood)) + '%';
							
							if(Plane_blood <= 40){
								b_div.style.background = 'red';
							}
							
							That.plane.setAttribute('p_blood',Plane_blood);
						}
         }

5.2 爆炸效果实现

5.2.1 爆炸效果

敌方飞机被子弹击中会在爆炸位置显示爆炸效果

5.2.1 敌机爆炸效果代码

HTML:

<img id = "show" src = "img/baozha_2.gif" style = "display:none"/

---

JS:

    var names = document.getElementById("show");
	document.getElementById("boom").play();
	names.style.width = '100px';
	names.style.height = '70px';
	names.style.top = l;
	names.style.left = h;
	names.style.position = 'absolute';
	names.style.display = 'block';
	window.setTimeout(function(){
		names.style.display = 'none';
	},800);

实现效果

源代码下载

JS飞机大战