js开发飞机大战需求文档

飞机大战游戏需求文档

游戏玩法介绍：玩家控制一架英雄机,可以发射子弹 , 屏幕上方下落敌机和炸药包

打到奖励的炸药包, 可以双发子弹 , 也可能获得生命1条. 打到小飞机可以加5分奖励. 被小飞机或炸药包碰到减生命1条, 生命为0 , 游戏结束.

游戏过程

启动游戏

-英雄起始生命3条, 游戏分数0分开始游戏

-界面中,任意位置点击鼠标,开始游戏暂停游戏

移出屏幕游戏暂停 , 移回屏幕游戏继续游戏结束

生命值为0游戏结束,当游戏处于结束状态, 任意点击可初始化数据,游戏重新开始

游戏主程序

ShootGame ：游戏状态：Begin，Started，Pause，Over

| ---- 英雄机 Hero 状态：Moving，Dead

| ---- 敌机 Airplane 状态：Moving，Dead

| ---- 子弹 Bullet 状态：Moving，Dead

| ---- 炸药包 Bee 状态：Moving，Dead

实现思路：

1. 打开页面，背景开始走动；

2. 点击开始，飞机开始不断发射子弹，敌人随机出现在上方；

3. 当敌人碰到子弹，敌人消失；

4. 当敌人（敌机和炸弹）和飞机相遇，飞机死亡，结束游戏；

界面实现：

菜单界面：“飞机大战”Logo， “开始游戏”按钮，“玩法介绍”按钮

统一规定：screenWidth = window.innerWidth 屏幕宽度

背景图片-位置：bg_left:(screenWidth-bg_width)/2,bg_Top: 50

背景图片大小：bg_width = 480*0.7, bg_height = 850*0.7

英雄飞机的大小:plane_w = 102*0.7, plane_h = 126*0.7

英雄飞机可飞行的范围：left(bg_left,bg_Top + bg_width - plane_w)

Top(bg.offsetTop, bg.offsetTop + bg_height - plane_h )

把所有用到多次的数据都用变量存储起来，以方便后期的修改和调整

数据处理：

获取已经创建好的div 的宽高
div.style.width =>_px; 使用parseInt()转换，即可获取该div的宽度
div.style.height =>_px; 使用parseInt()转换，即可获取该div的高度

获取已经创建好的div 的位置
1.div.style.left =>_px; 使用parseInt()转换，即可获取该div的宽度
div.style.top =>_px; 使用parseInt()转换，即可获取该div的高度
2.div.offsetLeft => 可直接获取div的left值
div.offsetTop =>可直接获取div的top值
注意：offsetLeft 和offsetTop 只能获取，不能重新赋值
所以在改变div的left,top值的时候只能去修改div.style.left和div.style.top的值

键盘操作：

菜单界面：

1. 点击“开始游戏”进入游戏界面

2. 点击“游戏玩法”显示玩法介绍图

游戏主界面：

1. 鼠标点击任意位置开始游戏，或者键盘任意键被按下开始游戏，或者进入游戏页面直接开始游戏

2. 游戏界面，可通过“WASD”或者上下左右键操控飞机飞行

游戏简介界面：游戏规则介绍，点击“玩法介绍”按钮，将Logo替换成操作指南图片

游戏主界面：分数显示，英雄飞机生命值显示，以及各种对象的显示

游戏暂停界面：

切换游戏状态，所以物体静止，英雄飞机动画继续播放

游戏结束界面：分数显示，重新开始

显示分数和“重新开始按钮”

游戏对象：

1. 英雄飞机：

飞机的状态：飞行（移动），攻击（发射子弹），死亡（爆炸）---> 游戏结束

2. 子弹

生成，移动，击中敌机（爆炸），（飞出边界）消失

3. 敌机：

三种类型敌机：

小敌机：生成，移动，死亡（爆炸），（飞出边界）消失生命值：1

中型敌机：生成，移动，死亡（爆炸），（飞出边界）消失生命值：4

大型敌机：生成，移动，死亡（爆炸），（飞出边界）消失生命值：7

4. 炸弹：生成，移动，（飞出边界）消失，爆炸-->表示击中英雄飞机

游戏对象具体设计：

1. 生成的所有对象都是div , 便于计算两个对象是否发生碰撞（原理：判读是否在一个平面内）

2. 每个对象都由一张图片表示

3. 属性：width , height, left, top, Hp（血量）,

4. 对象的功能（方法）：

根据不同的对象，设定不同的功能函数：

移动--Move():

坐标系中图形位置的移动, 都是通过改变left, top的值做到的

如: 横向移动: -left 左移 +left右移

如：纵向移动: -top 上移 +top 下移

攻击--Attack():-飞机攻击--生成子弹

动画切换--Animation():各种飞机飞行时的动态效果

死亡/爆炸--Death/Boom(): 当对象被击中的时候，触发爆炸效果，然后消失

对象死亡的时候出现爆炸效果并消失

消失--Dispear():消除游戏对象：对象超出边界消失，对象死亡显示爆炸效果后消失

公用函数：

碰撞--HitCheck():判断两个物体是否发生碰撞

生成Div--CreateDiv(): 根据参数，生成相应的div

js开发飞机大战需求文档相关推荐

python飞机大战概要设计说明书_飞机大战概要设计文档 4改
飞机大战概要设计文档规格说明书 1. 引言部分 1.1目的该文档描述的是飞机大战的概要设计,主要内容包括飞机大战功能简介等. 本文档预期的读者包括全体小组成员及指导教师. 1.2 范围 1.2.1 ...
python飞机大战概要设计_飞机大战概要设计文档 4改
飞机大战概要设计文档规格说明书 1. 引言部分 1.1目的该文档描述的是飞机大战的概要设计,主要内容包括飞机大战功能简介等. 本文档预期的读者包括全体小组成员及指导教师. 1.2 范围 1.2.1 ...
Android 系统（191）---ODM 开发用户常见需求文档（九）
Android 系统(191)---ODM 开发用户常见需求文档(九) 阅读数:1122 一:去除摄像头的假对焦框 (vendor/) (mediatek/proprietary/packages/a ...
Android 系统（132）---ODM 开发用户常见需求文档（六）
ODM 开发用户常见需求文档(六) 一:锁卡界面显示哪张SIM卡 (frameworks/base/packages/Keyguard/src/com/mediatek/keyguard/Teleph ...
Android 系统（131）---ODM 开发用户常见需求文档（五）
ODM 开发用户常见需求文档(五) 一:图库中的照片全屏显 (packages/apps/Gallery2/) 第一种: [java] view plaincopy diff --git a/src/ ...
Android 系统（130）---ODM 开发用户常见需求文档（四）
ODM 开发用户常见需求文档(四) 一:取消用户模式 (frameworks/) diff --git a/base/packages/SystemUI/res/layout/keyguard_sta ...
【敏捷开发】从需求文档出发聊敏捷
做这项调研的初心是什么? 需求文档解析成本太高,还存在高风险. RD解析一遍,QA解析一遍.而且还存在风险让产品开发过程更加和谐,而不是紧张和对峙需求的用户视角,非PM,RD视角当自问心中的用户 ...
Android 系统（128）---ODM 开发用户常见需求文档（二）
Android6.0 MTK 需求文档(二) 一:相机中的右边的预览窗口查看图片后选择删除,屏幕界面下方会有一条横线(去除横线的办法) (packages/apps/Gallery2/src/com/ ...
python飞机大战概要设计_飞机大战详细设计文档第三次修改
飞机大战详细设计说明书 1. 引言部分本部分主要说明项目背景和术语定义等. 1.1编写目的本部分阐明编写详细设计说明书的目的,指明读者对象. 该文档的目的是描述设计飞机大战的每个模块的细节,包括模 ...
软件开发中的需求文档由谁来编写_使用 RStudio 中的 Rmarkdown 编写演示文档
首先介绍一下 R 这个在数据分析和统计学中使用的非常广泛的一门语言: R 是一个数据分析.统计建模和作图的软件,它包含一门计算机语言称为 R 语言,R 语言与通常的 C.C++.Java 等编程语言相 ...

js开发飞机大战需求文档

飞机大战游戏需求文档

js开发飞机大战需求文档相关推荐

最新文章

热门文章