干瞪眼卡牌游戏

一个基于WebSocket的实时两人对战干瞪眼卡牌游戏。

项目结构

gan_deng_yan/
├── client/          # React前端 (端口5173)
├── server/          # Node.js后端 (端口3001)
├── docs/            # 项目文档
│   ├── gan_deng_yan_rules.md    # 游戏规则
│   ├── gan_deng_yan_dev_doc.md  # 开发文档
│   ├── gan_deng_yan_ui_ux_roadmap.md # UI/UX路线图
│   ├── GAN_DENG_YAN_MULTIPLAYER_ROADMAP.md # 多人模式路线图
│   ├── BUGFIX_REPORT.md     # Bug修复报告
│   ├── PHASE1_ENHANCEMENTS.md # Phase 1 增强报告
│   ├── PHASE2_ENHANCEMENTS.md # Phase 2 增强报告
│   └── PHASE3_ENHANCEMENTS.md # Phase 3 增强报告
├── README.md        # 项目说明
└── LICENSE          # 开源许可证

技术栈

• 前端: React 18 + TypeScript + Vite + Tailwind CSS
• 后端: Node.js + Express + Socket.io + TypeScript
• 实时通信: WebSocket
• 开发工具: Concurrently (同时运行前后端)

快速开始

1. 安装依赖

# 安装所有依赖 (根目录、客户端、服务端)
npm run install:all

2. 开发模式

# 同时启动前后端开发服务器
npm run dev

# 或者分别启动
npm run dev:client  # 前端 http://localhost:5173
npm run dev:server  # 后端 http://localhost:3001

3. 构建部署

# 构建生产版本
npm run build

# 启动生产服务器
npm start

游戏功能 (MVP版本)

✅ 已实现功能 (v2.7) ✨:

• WebSocket实时连接
• 自动匹配多人玩家（2-6人）
• 54张标准扑克牌发牌系统
• 完整牌型支持：
  • 单张牌 (蓝色)
  • 对子 (蓝色) + 百搭对子
  • 顺子 (绿色) + 百搭顺子
  • 三张炸弹 (橙色) + 百搭三张
  • 四张炸弹 (红色) + 百搭四张
  • 王炸 (紫色) - 大王+小王组合
• 炸弹压制系统：
  • 炸弹可压制所有非炸弹牌型
  • 四张炸弹 > 三张炸弹
  • 王炸 > 所有炸弹
• 特殊牌规则：
  • 数字2特殊压制：只能被小王、大王或炸弹压制
  • 大小王单张最强：大王 > 小王 > 2 > A
  • 顺子限制：2无法参与顺子
  • 特殊牌视觉标识：橙色边框 + 星星标记
• 百搭功能 🎭：
  • 对子百搭：1张普通牌 + 1张大小王 = 对子
  • 三张百搭：2张相同牌 + 1张大小王 / 1张普通牌 + 2张大小王
  • 四张百搭：3张相同牌 + 1张大小王 / 2张相同牌 + 2张大小王
  • 顺子百搭：大小王可以填补顺子中的空缺
  • 王炸优先：大王+小王优先识别为王炸
• 现代化UI设计 ✨：
  • 动态渐变背景动画
  • 毛玻璃效果面板 (深度优化对比度)
  • 3D卡牌hover效果 (完全不透明化)
  • 特殊牌发光动画
  • 炸弹脉冲效果
  • 响应式移动端适配
  • 视觉层次深度调整，完美的文字可读性
• 智能交互体验 🎮：
  • 快捷键支持 (Space/Enter/P/A/ESC)
  • 单击选择/双击选择同点数
  • 实时牌型提示和颜色编码
  • 卡牌tooltip提示
  • 超快速点击反馈 (80ms响应) ⚡
• 主题切换系统 🎨：
  • 深色/浅色模式一键切换
  • 炫酷主题切换按钮（太阳☀️/月亮🌙）
  • 本地存储用户偏好设置
  • 平滑过渡动画效果
  • 全界面响应式适配
  • 优化卡牌颜色对比度 (红桃/方块鲜艳红色，黑桃/梅花纯白色，王牌鲜艳紫色)
• 房间管理优化 ⏰：
  • 5分钟等待超时保护机制
  • 实时倒计时显示 (MM:SS格式)
  • 智能超时：房间满员或游戏开始时自动停止
  • 超时自动断开连接并返回主页
• 完整游戏循环 🔄：
• 智能牌型识别和验证
• 轮流出牌机制 + 摸牌规则
• 过牌功能
• 胜负判定
  • 再玩一次功能 (含炫酷特效) ✨

🚧 计划功能 (下一阶段):

• 🎵 音效系统和背景音乐
• 🤖 AI对战模式（单人练习）
• 📊 游戏统计和排行榜
• 👥 观战模式和好友系统
• 🎨 更多主题选项（节庆主题等）

游戏规则简介

1. 目标: 第一个打光手牌的玩家获胜
2. 牌型:
   • 单张: 任意一张牌
   • 对子: 两张相同数值的牌
   • 顺子: 3张及以上连续牌 (不含2和大小王)
   • 三张炸弹: 三张相同数值的牌
   • 四张炸弹: 四张相同数值的牌
   • 王炸: 大王+小王 (最强牌型)
3. 大小顺序: 3 < 4 < ... < K < A < 2 < 小王 < 大王
4. 出牌规则:
   • 首出可出任意合法牌型
   • 普通牌型必须相同类型且更大
   • 炸弹可压制任何非炸弹牌型
   • 王炸可压制任何牌型

开发测试

本地测试

1. 启动开发服务器: npm run dev
2. 打开两个浏览器窗口访问 http://localhost:5173
3. 分别输入不同昵称加入游戏
4. 系统自动匹配并发牌开始游戏

API测试

# 测试服务端健康状态
curl http://localhost:3001

# 预期返回
{"message":"干瞪眼游戏服务端运行中","stats":{"activeGames":0,"connectedPlayers":0}}

Socket.io事件

• join-game: 加入游戏
• play-cards: 出牌
• pass: 过牌
• game-state: 游戏状态更新
• your-turn: 轮到玩家出牌

项目特点

• 🎮 实时对战: WebSocket确保低延迟同步
• 🎨 现代UI: Tailwind CSS + 响应式设计
• 🛡️ 类型安全: 全TypeScript开发
• 🚀 快速开发: Vite热更新 + 自动重启
• 📱 移动友好: 支持手机浏览器
• 🎯 MVP优先: 核心功能先行，逐步扩展

部署说明

项目已配置好Railway部署：

• 环境变量: NODE_ENV, PORT, CLIENT_URL
• 构建命令: npm run build
• 启动命令: npm start

开发贡献

1. Fork项目
2. 创建功能分支
3. 提交修改
4. 发起Pull Request

许可证

MIT License

---

🃏 享受干瞪眼游戏的乐趣！