# 三国杀网页游戏

一款基于经典三国杀卡牌规则的5人在线对战网页游戏，专为喜欢策略卡牌游戏的玩家设计。

![三国杀](https://img.shields.io/badge/游戏-三国杀-red)
![版本](https://img.shields.io/badge/版本-1.0.0-blue)
![技术栈](https://img.shields.io/badge/技术栈-HTML%2FCSS%2FJS-green)

## 🎮 游戏简介

三国杀网页游戏是一款完全基于浏览器运行的策略卡牌游戏，支持5人身份对战模式。游戏采用经典的身份系统、角色技能系统和卡牌战斗系统，为玩家提供紧张刺激的对战体验。

## ✨ 核心功能

### 1. 身份系统
- **5人身份模式**：1个主公、1个忠臣、2个反贼、1个内奸
- **身份隐藏**：主公身份公开，其他身份在游戏开始时隐藏
- **胜利条件**：
  - 主公：消灭所有反贼和内奸
  - 忠臣：保护主公，协助主公消灭反贼和内奸
  - 反贼：消灭主公
  - 内奸：消灭除自己外的所有角色，最后与主公单挑并获胜

### 2. 角色与技能系统
- **10+经典角色**：刘备、曹操、孙权、诸葛亮、关羽、张飞、赵云、黄月英、吕布、貂蝉等
- **独特技能**：每个角色拥有专属的主动和被动技能
  - 刘备：仁德（可以将手牌分给其他玩家）
  - 曹操：奸雄（受到伤害后可以获得造成伤害的牌）
  - 孙权：制衡（可以弃牌重新摸牌）
  - 诸葛亮：空城（没有手牌时不能成为杀的目标）
  - 关羽：武圣（可以将红色牌当作杀使用）
  - 张飞：咆哮（可以无限出杀）
  - 赵云：龙胆（可以将杀当闪，闪当杀）
  - 黄月英：集智（使用锦囊牌后可以摸一张牌）
  - 吕布：无双（使用杀时需要两张闪才能闪避）
  - 貂蝉：离间（可以指定两名男性角色决斗）
- **角色属性**：不同角色有不同的血量、攻击范围等属性

### 3. 卡牌与战斗系统
- **基础牌**：
  - 杀：对目标造成1点伤害
  - 闪：抵挡杀的效果
  - 桃：回复1点血量或救活濒死角色
- **装备牌**：
  - 武器：增加攻击距离（诸葛连弩、青龙偃月刀等）
  - 防具：提供防御效果（八卦阵、藤甲等）
  - 进攻马：减少攻击距离
  - 防御马：增加被攻击距离
- **锦囊牌**：
  - 无中生有：摸2张牌
  - 过河拆桥：弃掉目标一张牌
  - 顺手牵羊：获得目标一张牌
  - 南蛮入侵：所有其他角色需要出杀，否则受到1点伤害
  - 万箭齐发：所有其他角色需要出闪，否则受到1点伤害
  - 闪电：随机判定，受到3点雷属性伤害
  - 乐不思蜀：目标下回合跳过出牌阶段
  - 兵粮寸断：目标下回合跳过摸牌阶段
  - 铁索连环：连接多个角色，伤害会传导
  - 火攻：展示目标一张牌，如果是红色则受到1点火属性伤害
  - 火杀：造成火属性伤害
  - 雷杀：造成雷属性伤害
- **攻击距离系统**：根据武器和马匹计算攻击范围
- **回合制战斗**：摸牌阶段、出牌阶段、弃牌阶段、结束阶段

## 🎯 如何开始游戏

### 方式一：直接打开
1. 下载或克隆本仓库
2. 用浏览器打开 `index.html` 文件
3. 点击"开始游戏"按钮即可开始

### 方式二：本地服务器
```bash
# 使用 Python 启动本地服务器
python -m http.server 8000

# 使用 Node.js 启动本地服务器
npx http-server -p 8000
```

然后在浏览器中访问 `http://localhost:8000`

## 🎲 游戏流程

### 游戏开始
1. 打开网页，点击"开始游戏"按钮
2. 系统随机分配身份和角色
3. 显示游戏界面，用户在中间位置，其他4个AI玩家环绕
4. 查看自己的身份、角色、血量和手牌

### 游戏进行
1. **摸牌阶段**：点击"摸牌"按钮，从牌堆抽取2张牌
2. **出牌阶段**：
   - 点击手牌选择要使用的牌
   - 如果需要目标，点击目标玩家
   - 点击"出牌"按钮使用牌
   - 点击"技能"按钮使用角色技能
3. **结束回合**：点击"结束回合"按钮，轮到下一个玩家

### 游戏结束
- 当某一方达成胜利条件时，显示胜利/失败提示
- 查看游戏统计信息
- 点击"再来一局"按钮重新开始

## 🛠️ 技术栈

- **前端框架**：纯原生 JavaScript
- **样式**：CSS3
- **标记语言**：HTML5
- **动画效果**：CSS Animations
- **AI系统**：基于优先级的智能决策算法

## 🎨 游戏特色

- **纯前端实现**：无需后端服务器，完全在浏览器中运行
- **响应式设计**：支持不同屏幕尺寸，适配桌面和移动设备
- **精美动画**：卡牌使用、攻击、伤害等都有流畅的动画效果
- **智能AI**：4个AI玩家具有不同的策略和决策能力
- **完整规则**：实现了标准三国杀的核心规则和技能

## 📋 游戏规则

### 基本规则
- 每个玩家初始有4张手牌
- 每回合可以出一张杀（除非有特殊技能或装备）
- 血量归零时进入濒死状态，可以使用桃救活
- 主公身份在游戏开始时公开，其他身份隐藏

### 胜利条件
- **主公胜利**：消灭所有反贼和内奸
- **忠臣胜利**：主公胜利则忠臣胜利
- **反贼胜利**：消灭主公
- **内奸胜利**：消灭除自己外的所有角色，最后与主公单挑并获胜

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📝 更新日志

### v1.0.0 (2024-01-08)
- 初始版本发布
- 实现5人身份系统
- 实现10+角色和技能系统
- 实现完整的卡牌系统
- 实现AI智能决策
- 实现卡牌动画效果

## 📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

## 🙏 致谢

- 感谢经典三国杀游戏提供的灵感
- 感谢所有贡献者的支持

## 📮 联系方式

- 作者：zhangjian
- 邮箱：st2411020104@gitea.local
- 项目地址：http://hblu.top:3000/Python2025-CourseDesign/zhangjian.git
### 团队成员与贡献 
姓名	学号	       主要贡献 (具体分工)
程俊	2411020113	(组长) 核心逻辑开发、Prompt 编写
张健	2411020104	 前端界面设计
孙赫	2411020105	 文档撰写、测试与 Bug 修复

### 感想
我们三个人借助TraeCN开发三国杀网页版的经历，是一次理论落地与协作成长的双重收获。作为编程实践项目，我们从拆分需求起步：一人负责基于TraeCN搭建网页框架、实现卡牌拖拽等交互效果；一人梳理游戏核心规则，将武将技能、卡牌结算逻辑转化为可执行代码；另一人专注于多人联机同步与bug调试，分工明确让开发少走了很多弯路。开发中，TraeCN的轻量化特性帮我们省去了复杂的环境配置，代码同步和功能测试都高效不少，但难点也接踵而至。比如武将技能的触发条件嵌套、多人回合制的时序同步，都需要反复推敲逻辑。我们曾因“过河拆桥”能否对特定武将生效争执不下，最终通过查规则、写测试用例逐一验证；网页端卡牌动画卡顿的问题，也是借助TraeCN的调试工具反复优化代码才得以解决。这段经历让我们深刻体会到，小团队开发的核心不仅是技术，更是沟通与互补。有人擅长前端界面打磨，有人精通逻辑编写，彼此查漏补缺，才能高效攻克难题。当测试版本成功运行，三人在线上完成第一局对战时，那种成就感远超代码实现本身。此次开发不仅让我们掌握了TraeCN的使用技巧，更明白了从想法到产品的距离，需要耐心、协作与反复打磨。未来我们还可能用TraeCN添加更多武将和玩法模式，让这个小小的网页版三国杀更具趣味性
---

**享受游戏，祝您好运！** 🎴⚔️