# final_kof

**Repository Path**: ppshux/final_kof

## Basic Information

- **Project Name**: final_kof
- **Description**: This repository is part of my **Final_Game Series**, built during the *Show Way Plan* — a 35-day closing project for my Tencent internship and personal growth.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-10-10
- **Last Updated**: 2025-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拳皇格斗游戏 (Final_KOF)

## 项目简介

这是一个基于 Web 技术开发的拳皇格斗游戏，采用 HTML5 Canvas 和 JavaScript 构建。项目是**Final_Game 系列**的一部分，在*Show Way Plan*期间开发 — 这是我在准备腾讯实习期间为期 35 天的收官项目和个人成长计划。

![输入图片说明](image.png)

## 游戏特性

- 🎮 **双人对战**：支持两个玩家同时游戏
- 🎨 **精美动画**：使用 GIF 动画展示角色动作
- 🏃 **物理引擎**：包含重力、跳跃、移动等物理效果
- 🎯 **实时渲染**：基于 Canvas 的流畅游戏体验
- 💚 **生命值系统**：实时显示双血条，平滑的血量变化动画
- ⚔️ **攻击判定**：精确的碰撞检测和攻击判定系统
- 🎭 **完整状态机**：7种角色状态流畅切换（待机、移动、跳跃、攻击、受击、死亡）

## 技术栈

- **前端**：HTML5, CSS3, JavaScript (ES6+)
- **图形渲染**：HTML5 Canvas
- **动画**：GIF 图片序列
- **物理引擎**：自研简单物理系统
- **游戏循环**：requestAnimationFrame

## 项目结构

```
final_kof/
├── static/
│   ├── css/           # 样式文件
│   │   └── base.css   # 基础样式
│   ├── js/            # JavaScript 游戏逻辑
│   │   ├── player/    # 角色相关代码
│   │   │   ├── base.js # 角色基类
│   │   │   ├── kyo.js  # 草薙京角色
│   │   │   └── mai.js  # 不知火舞角色
│   │   ├── gamemap/   # 游戏地图
│   │   │   └── base.js # 地图基类
│   │   ├── ac_game_object/ # 游戏对象基类
│   │   │   └── base.js
│   │   ├── utils/     # 工具函数
│   │   │   └── gif.js # GIF 处理工具
│   │   └── base.js    # 主游戏类
│   └── images/        # 游戏资源
│       ├── background.gif # 背景图片
│       └── player/    # 角色动画资源
│           ├── kyo/   # 草薙京角色动画
│           │   ├── 0.gif # 待机动画
│           │   ├── 1.gif # 移动动画
│           │   └── ...   # 其他状态动画
│           └── mai/   # 不知火舞角色动画
│               ├── 0.gif # 待机动画
│               ├── 1.gif # 移动动画
│               └── ...   # 其他状态动画
└── templates/         # HTML 模板
    └── index.html     # 主页面
```

## 角色系统

### 已实现角色

- **草薙京 (Kyo)**：火焰格斗家，拥有多种技能
- **不知火舞 (Mai)**：忍者格斗家，敏捷灵活

### 角色状态

- 0: 待机
- 1: 向前移动
- 2: 向后移动
- 3: 跳跃
- 4: 攻击
- 5: 受击
- 6: 死亡

## 快速开始

1. **克隆项目**

   ```bash
   git clone https://gitee.com/ppshux/final_kof.git
   cd final_kof
   ```

   或使用 GitHub（如果有镜像）：
   ```bash
   git clone https://github.com/ppshuX/final_kof.git
   cd final_kof
   ```

2. **启动游戏**

   **方式一：VS Code Live Server（推荐✨）**
   - 安装 VS Code 扩展：[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
   - 右键点击 `templates/index.html` 文件
   - 选择 "Open with Live Server"
   - 浏览器会自动打开游戏

   **方式二：Python 简单服务器**
   ```bash
   python -m http.server 8000
   # 或 Python 3
   python3 -m http.server 8000
   ```
   然后访问 `http://localhost:8000/templates/index.html`

   **方式三：Node.js HTTP Server**
   ```bash
   npx http-server
   ```
   然后访问 `http://localhost:8080/templates/index.html`

3. **开始游戏**
   - Live Server 会自动打开浏览器并加载游戏
   - 其他方式请手动访问对应地址
   - 准备好享受格斗游戏吧！🎮

## 游戏操作

### 玩家 1（草薙京，左侧）
- **移动**：A（左）、D（右）
- **跳跃**：W 键
- **攻击**：空格键（Space）

### 玩家 2（不知火舞，右侧）
- **移动**：← →方向键
- **跳跃**：↑ 方向键
- **攻击**：Enter 键（回车）

## 游戏机制

### 物理系统
- **重力**：角色会受重力影响下落
- **地面检测**：角色落在地面上时停止下落
- **碰撞检测**：角色之间的碰撞和攻击判定
- **速度控制**：水平和垂直速度的独立控制

### 状态管理
每个角色都有完整的状态机，包括：
- 移动状态（待机、前进、后退）
- 战斗状态（攻击、受击、死亡）
- 特殊状态（跳跃、技能释放）

### 生命值系统
- **双层血条设计**：红色背景层 + 绿色/浅绿前景层
- **动态更新**：攻击命中时血条平滑减少
- **jQuery 动画**：使用 animate() 实现流畅的血量变化效果
- **对称布局**：左右血条从中间向两侧消耗，视觉效果更佳

## 技术亮点

### 角色渲染系统
- **智能朝向**：角色会自动面向对手，通过 Canvas 的 scale 和 translate 实现镜像翻转
- **GIF 动画系统**：每个角色状态对应独立的 GIF 动画，支持动态帧率控制
- **动画优化**：不知火舞的攻击动画经过特殊优化，只播放前1/4帧以提高攻击速度
- **死亡动画**：角色倒地动画完整播放后停留在最后一帧

### 攻击判定系统
- **精确碰撞检测**：基于矩形区域的碰撞检测算法
- **差异化攻击时机**：Kyo 第16帧判定，Mai 第8帧判定（更快）
- **攻击反馈**：被攻击角色立即进入受击状态并播放受击动画
- **连击保护**：死亡状态下免疫后续攻击

### 面向对象架构
- **继承体系**：`AcGameObject` → `Player` → `Kyo`/`Mai`，清晰的类继承关系
- **状态机模式**：每个角色维护独立的状态机，便于扩展和维护
- **模块化设计**：游戏对象、玩家、地图、控制器等模块相互独立
- **方法重写**：子类可重写父类方法实现角色特有行为（如 Mai 的快速攻击）

## 开发计划

### 已完成 ✅
- [x] 基础游戏框架搭建
- [x] 双人角色系统（草薙京、不知火舞）
- [x] 角色朝向自动翻转功能
- [x] 物理引擎（重力、跳跃、碰撞）
- [x] 攻击动画优化（Mai 快速攻击）
- [x] **攻击碰撞判定系统**
- [x] **生命值系统（血条显示和更新）**
- [x] **受击和死亡状态完整实现**
- [x] **角色状态机（7种状态流转）**
- [x] **动画帧率精细控制**

### 进行中 🚧
- [ ] 添加计时器倒计时功能
- [ ] 实现游戏胜负判定
- [ ] 添加游戏结束界面

### 计划中 📋
- [ ] 添加更多角色（八神庵、麻宫雅典娜等）
- [ ] 实现技能连招系统
- [ ] 添加音效和背景音乐
- [ ] 优化游戏性能和体验
- [ ] 添加 AI 对手模式
- [ ] 实现网络对战功能
- [ ] 添加游戏菜单和角色选择界面
- [ ] 实现回合制战斗系统
- [ ] 添加角色技能特效
- [ ] 实现防御和闪避机制

## 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 版本信息

- **当前版本**：v1.2.0
- **最后更新**：2024年10月11日
- **兼容性**：现代浏览器（Chrome 60+, Firefox 55+, Safari 12+）

## 更新日志

### v1.2.0 (2024-10-11) 🎉
- ✅ **完整生命值系统**：实现血条显示和更新机制
- 🐛 **修复血条显示bug**：解决 jQuery width() 调用错误
- ⚡ **优化不知火舞攻击响应**：攻击判定从16帧提前到8帧
- 🎬 **完善死亡动画**：Mai 和 Kyo 都有完整的倒地动画
- 🐛 **修复受击状态bug**：解决角色被打后无法恢复的问题
- 🐛 **修复攻击状态bug**：解决 Kyo 攻击后卡住的问题
- 🎨 **完善动画系统**：优化各状态的帧率和动画流畅度
- 💚 **血条动画效果**：添加 jQuery animate 实现平滑的血量变化

### v1.1.0 (2024-10-11)
- 🐛 修复不知火舞角色朝向问题（现在可以正确面向对手）
- ✨ 优化不知火舞攻击动画（只播放前1/4帧，使攻击更快速）
- 🎨 完善角色渲染系统，支持镜像翻转
- 🎮 改进游戏操作体验

### v1.0.0 (2024-10-10)
- ✨ 初始版本发布
- 🎮 实现双人对战系统
- 🎨 添加草薙京和不知火舞角色
- 🏃 实现基础物理引擎
- 🎯 完成游戏循环和渲染系统

## 许可证

本项目采用 MIT 许可证。

## 联系方式

- **项目作者**：ppshux
- **邮箱**：2064747320@qq.com
- **Gitee**：https://gitee.com/ppshux
- **GitHub**：https://github.com/ppshuX/
- **项目地址**：https://gitee.com/ppshux/final_kof

---

> "从 tc_family 到 Final_Game — 这不是结束，而是新的开始。"

---

⭐ 如果这个项目对你有帮助，请给它一个 Star！