# uno-game

**Repository Path**: ynx520/uno-game

## Basic Information

- **Project Name**: uno-game
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-30
- **Last Updated**: 2026-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
	<img src="./assets/uno_icon.png" width="200" alt="UNO 游戏" />
</p>

<h3 align="center">
  基于 JavaScript 构建的 UNO 在线卡牌游戏 🎴
</h3>

<p align="center">
	<a href="https://lerna.js.org/">
		<img alt="lerna" src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="maintained with lerna"/>
	</a>
	<a href="https://github.com/microsoft/TypeScript">
		<img alt="typescript" src="https://camo.githubusercontent.com/41c68e9f29c6caccc084e5a147e0abd5f392d9bc/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
	</a>
	<a href="https://github.com/guilhermebkel/uno-game">
		<img alt="mit license" src="https://img.shields.io/github/license/guilhermebkel/uno-game?color=0051ff" />
	</a>
</p>
<p align="center">
	<a href="https://github.com/guilhermebkel/uno-game">
		<img alt="unoenty build" src="https://github.com/guilhermebkel/uno-game/workflows/Unoenty%20CI/badge.svg" />
	</a>
	<a href="https://github.com/guilhermebkel/uno-game">
		<img alt="unapy build" src="https://github.com/guilhermebkel/uno-game/workflows/Unapy%20CI/badge.svg" />
	</a>
</p>

<p align="center">
	<img src="./assets/main_preview.gif" alt="游戏预览" />
	<br></br>
	<a href="https://uno.guilherr.me">点击这里开始游戏</a>
</p>

## 📌 项目简介

一个简洁的 UNO 在线多人卡牌游戏，支持实时对战。玩家可以创建或加入游戏房间，与好友一起体验经典 UNO 玩法。

## 🏗️ 项目架构

本项目采用 **Monorepo** 架构，通过 [Lerna](https://lerna.js.org/) + **npm workspaces** 管理多个子包：

| 包名 | 说明 | 目录 |
|---|---|---|
| `@uno-game/unapy` | 后端 API 服务 | `packages/unapy` |
| `@uno-game/unoenty` | 前端 Web 客户端 | `packages/unoenty` |
| `@uno-game/protocols` | 共享协议/类型定义 | `packages/shared/protocols` |
| `@uno-game/error-handler` | 共享错误处理 | `packages/shared/error-handler` |

## 🔧 技术栈

### 后端
- **运行时**：Node.js (Express)
- **语言**：TypeScript
- **实时通信**：Socket.IO + MsgPack 二进制解析器
- **数据存储**：Redis (ioredis) + 内存存储
- **多实例同步**：socket.io-redis 适配器

### 前端
- **框架**：React 16 + TypeScript
- **UI 库**：Material UI 4
- **拖拽交互**：React DnD（支持 HTML5 和 Touch 后端）
- **构建工具**：CRACO (Create React App Configuration Override)
- **路由**：React Router DOM
- **动画**：Lottie

### 工程化
- **Monorepo 管理**：Lerna
- **代码规范**：ESLint + Husky + lint-staged
- **提交规范**：Git Commit Message Linter
- **容器化**：Docker + Docker Compose
- **CI/CD**：GitHub Actions

## 🎮 游戏规则

- 支持最多 **8 名玩家** 同时游戏
- 完整实现经典 UNO 卡牌规则：
  - **数字牌** (0-9)：四色（红、黄、蓝、绿）
  - **跳过牌** (Block)：跳过下一位玩家
  - **反转牌** (Reverse)：改变出牌方向
  - **+2 牌**：下家摸 2 张牌
  - **变色牌** (Change Color)：选择当前颜色
  - **+4 牌**：下家摸 4 张牌并选择颜色
- 支持 **+2/+4 叠加** 机制
- 每回合有 **30 秒** 时间限制（开发环境 100 秒）
- 超时自动由系统代打
- 支持 AFK（离开）状态管理

## 🚀 快速开始

### 1. 克隆项目
```sh
git clone https://github.com/guilhermebkel/uno-game.git
cd uno-game
```

### 2. 安装依赖
```sh
# 安装所有共享依赖
# 安装 API 和客户端依赖
# 链接所有包的依赖关系
# 创建环境变量文件
npm run setup
```

### 3. 启动 Redis
```sh
npm run dev:resources
```

### 4. 启动开发服务器

分别在 `packages/unapy` 和 `packages/unoenty` 目录下执行：
```sh
npm run dev
```

- 后端 API 运行在 **http://localhost:5000**
- 前端客户端运行在 **http://localhost:4000**

## 👏 参与贡献

1. 将项目克隆到本地
2. 按照 **Git Karma** 规范创建新分支，如 `feat/my-awesome-feature`
3. 完成开发后提交 Pull Request

## 🗺️ 开发计划

我们正在持续改进这个游戏，可以在 [**Roadmap**](https://github.com/guilhermebkel/uno-game/projects/1) 中查看后续计划。欢迎提交想法、建议和 Bug 反馈！

## 💫 贡献者

感谢所有为本项目做出贡献的开发者！

<table>
  <tr>
    <td align="center">
			<a
				href="https://github.com/ArcaneDiver"
				title="ArcaneDiver"
			>
				<img src="https://avatars.githubusercontent.com/ArcaneDiver" width="100px;" alt=""/>
				<br />
				<sub>
					<b>Michele Della Mea</b>
				</sub>
			</a>
		</td>
		<td align="center">
			<a
				href="https://github.com/lcscout"
				title="lcscout"
			>
				<img src="https://avatars.githubusercontent.com/lcscout" width="100px;" alt=""/>
				<br />
				<sub>
					<b>Lucas Coutinho de Oliveira</b>
				</sub>
			</a>
		</td>
  </tr>
</table>