# H5交互应用

**Repository Path**: maifengyuan/h5-interactive-application

## Basic Information

- **Project Name**: H5交互应用
- **Description**: 存储H5实践代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-15
- **Last Updated**: 2022-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5交互应用
## 项目成员：麦锋源，高湘林
> 完成时间：2021-01-03

##### [Pages游戏体验](https://maifengyuan.gitee.io/h5-interactive-application/FinalProject_mg.html)

### 页面简介
1. index.html：加载页内容
2. index.js：游戏主程序——地图设计、NPF+吃豆人（加载页，结束页）+关卡状态样式
3. game.js：小型游戏引擎[借鉴]，画面元素构造，寻址算法[借鉴]

### 考核说明
#### 动画
1. 开始页面吃豆人张合动作；
2. 游戏进行时吃豆人的张合动作；
3. NPC眼睛随移动方向改变而改变；
4. 吃豆人接触NPC后消失的动画；
5. 按[空格]键后画面闪动的“暂停中”的提示；
6. NPC被吃掉后身体将隐藏；
7. 大豆子闪动；
8. 吃豆人接触豆子，豆子消失；

#### 交互
1. 通过键盘上下左右方向键可以控制吃豆人运动轨迹；
2. 吃豆、关卡以及生命值三种方法触发都会更新右方仪表板的数据；
3. 通过空格键可以切换游戏暂停与进行两个状态
4. 游戏结束，统计并显示总得分

### 借鉴内容
项目主要借鉴的部分存储在game.js中，包括以下的版块实现：
1. 寻路算法
2. 体积碰撞
3. NPC与主角行为判断
4. 角色动画管理（NPC围堵吃豆人）
5. 地图绘制

#### NPC行为说明：
1. NPC会在一定时间后变为灰色状态，吃豆人可以在这段时间吃掉NPC加分，随后NPC会回到起点然后复活；
2. NPC处在灰色状态时，寻路算法将与原来相反，将朝着远离吃豆人的方向运动；

##### [鸣谢：Passer-by](https://passer-by.com/)