# web-kof

**Repository Path**: yimazing/web-kof

## Basic Information

- **Project Name**: web-kof
- **Description**: 拳皇项目-利用JavaScript手写2D游戏引擎
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-10-14
- **Last Updated**: 2024-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 拳皇——利用JavaScript实现2D游戏引擎

```shell
├─static
│  ├─audios
│  │      bgm.mp3 与本项目无关
│  │      
│  ├─css
│  │      base.css index页面的样式 包括背景图片 计分栏
│  │      
│  ├─images
│  │  │  logo.png 无关
│  │  │  mountain.jpg 无关
│  │  │  
│  │  ├─background
│  │  │      0.gif 背景gif
│  │  │      
│  │  └─player
│  │      └─kyo 人物不同状态的gif
│  │              0.gif 静止
│  │              1.gif 前进
│  │              2.gif 后退
│  │              3.gif 跳跃
│  │              4.gif 攻击
│  │              5.gif 受攻击
│  │              6.gif 倒地
│  │              
│  ├─js
│  │  │  base.js 实现一个类KOF，有3个成员变量：index里的div，地图(传入KOF对象的实例)，2名玩家(传入KOF对象的实例)
│  │  │  
│  │  ├─ac_game_objects
│  │  │      base.js 利用递归实现每秒渲染60帧 后续的Map Player都继承自该对象
│  │  │      
│  │  ├─controller
│  │  │      base.js 实现控制器对象 捕获在canvas画布上的键盘输入 在Map类的成员变量里定义控制器一个控制器对象 Player里的pressed_keys从					 Map对象里获取
│  │  │      
│  │  ├─game_map
│  │  │      base.js 实现地图类 里面控制血条 时间 并且render()函数中每秒清空canvas画布 防止人物移动留下残影
│  │  │      
│  │  ├─player
│  │  │      base.js 主要实现update函数的若干功能
						this.update_control(): 根据按键设置当前时间点的水平和竖直速度
  	      				this.update_move(): 根据速度计算出当前时间点过后人物应该处于的位置
        				this.update_direction(): 根据当前玩家和另外一个玩家的相对位置设定当前玩家的朝向
        				this.update_attack(): 若当前玩家处于攻击态且时间点正好在挥出拳的那一帧，则进行碰撞检测判断对方玩家是否受攻击
        				this.render(): 根据当前进行到第几帧'frame_current_cnt'判断当前应该放gif图片的第几帧 利用canvas渲染图像
        								注意如果direction是朝左的话需要镜像渲染
│  │  │      kyo.js 将特定人物的不同动作的gif图像分解成每一帧 记录在父类的'this.animations'里
│  │  │      
│  │  └─utils
│  │          gif.js 第三方工具 用来处理gif的每一帧
│  │          
│  └─videos
│          video2.mp4 无关
│          
└─templates
        index.html 应用入口

```