一个采用欢乐斗地主经典布局风格的纯原生 HTML/CSS/JavaScript 斗地主小游戏。
发布日期: 2025-10-21
修复内容:
- 🐛 修复CSS gap负值bug - CSS的gap属性不支持负值，导致卡牌全部堆叠
- ✨ 改用margin负值 - 正确实现卡牌重叠效果
- � 修复CSS语法错误 - 修复.bottom-cards-label缺少闭合括号
- 🧹 清理重复CSS - 删除多处重复的样式定义
- 🎯 优化显示效果 - 添加overflow: visible确保卡牌正确显示
影响范围:
- ✅ 左侧玩家手牌现在正确重叠显示
- ✅ 顶部玩家手牌现在正确重叠显示
- ✅ 底部玩家手牌现在正确重叠显示
- ✅ 所有出牌区域卡牌正确重叠显示
- ✅ 底牌区域卡牌正确重叠显示
Linux/Mac:
cd /workspaces/ddz
python3 -m http.server 8000Windows:
cd \workspaces\ddz
python -m http.server 8000./start.sh
start.bat- ✅ 叫地主、抢地主机制
- 单张、对子、三张
--- - 三带一、三带对
- 顺子、连对、飞机
## 🎯 游戏特色 - 炸弹、王炸
- 四带二、四带两对
### 完整的斗地主规则
- ✅ 标准 54 张牌（含大小王）### 游戏功能
- ✅ 叫地主、抢地主机制- ✅ 人机对战（1个玩家 vs 2个AI）
- ✅ 15 种完整牌型识别- ✅ AI智能出牌
- ✅ 智能 AI 对战- ✅ 提示功能
- ✅ 倍数计算系统- ✅ 倍数计算
- ✅ 游戏结果显示
### 支持的牌型- ⭐ **倒计时系统**（新增）
| 牌型 | 示例 | 说明 |- ⭐ **消息提示**（新增）
|------|------|------|
| 单张 | 3 | 任意单牌 |### UI特性
| 对子 | 33 | 两张相同 |- ✅ 欢乐斗地主风格界面
| 三张 | 333 | 三张相同 |- ⭐ **独立出牌区域**（v1.2新增）
| 三带一 | 3334 | 三张+单张 |- ⭐ **优化的玩家布局**（v1.2优化）
| 三带对 | 33344 | 三张+对子 |- ⭐ **动态渐变背景**（v1.1优化）
| 顺子 | 34567 | 5张以上连续 |- ⭐ **3D卡牌效果**（v1.1优化）
| 连对 | 334455 | 3对以上连续 |- ⭐ **流畅的动画效果**（v1.1优化）
| 飞机 | 333444 | 连续的三张 |- ✅ 响应式设计
| 飞机带翅膀 | 33344456 | 飞机+单/对 |- ✅ 卡牌选择交互
| 炸弹 | 3333 | 四张相同 |- ⭐ **实时消息反馈**（v1.1新增）
| 王炸 | 小王大王 | 最大的牌 |
| 四带二 | 333345 | 四张+两单 |## 项目结构
| 四带两对 | 33334455 | 四张+两对 |
-
🎨 欢乐斗地主经典布局 - 左侧、上方、下方三个玩家位置├── index.html # 主页面
-
🎯 中央出牌区域 - 三个玩家的出牌集中显示在中央├── css/
-
⏰ 倒计时系统 - 叫地主 15秒、抢地主 10秒、出牌 20秒│ └── style.css # 样式文件
-
💬 Toast 消息提示 - 操作反馈及时清晰├── js/
-
✨ 流畅动画 - 发牌、出牌、按钮等都有流畅动效│ ├── card.js # 扑克牌类
-
🌈 动态渐变背景 - 5 色循环渐变，视觉舒适│ ├── player.js # 玩家类
│ ├── cardType.js # 牌型判断
---│ ├── ai.js # AI逻辑
│ ├── game.js # 游戏主逻辑
│ └── main.js # 入口文件
-
开始游戏 - 点击"开始游戏"按钮├── audio/ # 音效资源
-
发牌阶段 - 自动发牌，每人 17 张，3 张底牌└── README.md # 说明文档
-
叫地主 - 点击"叫地主"或"不叫"（15秒倒计时）```
-
抢地主 - 有人叫后可以抢（10秒倒计时）
-
出牌 - 地主先出，按规则出牌（20秒倒计时）## 快速开始
-
结算 - 一方出完所有牌即获胜
-
选牌 - 点击卡牌选中（卡牌上浮），再次点击取消Windows用户：
-
出牌 - 选好牌后点击"出牌"按钮```bash
-
提示 - 点击"提示"获取可出牌建议双击运行 start.bat
-
不要 - 点击"不要"跳过本轮```
-
💡 卡牌上浮 = 已选中```bash
-
💡 红色闪烁 = 倒计时紧急（≤5秒）./start.sh
-
💡 金色边框 = 出牌区域有牌```
-
💡 超时自动 = 不叫/不抢/不要
脚本会自动：
---- 检测Python环境
- 启动HTTP服务器
- 自动打开浏览器（Windows）
ddz/---
├── index.html # 游戏主页面
├── css/### 方式1：直接打开
│ └── style.css # 完整样式表1. 下载项目文件
├── js/2. 用浏览器打开 `index.html` 即可开始游戏
│ ├── card.js # 卡牌类
│ ├── player.js # 玩家类### 方式2：使用本地服务器
│ ├── cardType.js # 牌型识别（15种）```bash
│ ├── ai.js # AI 决策引擎# 使用Python启动
│ ├── game.js # 游戏流程控制python -m http.server 8000
│ ├── ui.js # UI 渲染和交互
│ └── main.js # 入口文件# 或使用Node.js的http-server
├── images/npx http-server
│ ├── avatar-player.svg # 玩家头像```
│ └── avatar-farmer.svg # 农民头像
├── audio/ # 音效目录（预留）然后在浏览器访问 `http://localhost:8000`
├── start.sh # Linux 启动脚本
├── start.bat # Windows 启动脚本## 游戏玩法
└── README.md # 本文档
```### 开始游戏
1. 点击"开始游戏"按钮
---2. 系统自动发牌（每人17张，留3张底牌）
## 🎨 设计风格### 叫地主阶段
- 根据手牌情况选择"叫地主"或"不叫"
### 布局特点- 可以叫1分、2分或3分
采用**欢乐斗地主**的经典三角形布局：- 叫3分直接成为地主
- **上方玩家**（AI 电脑玩家1）- 屏幕顶部居中
- **左侧玩家**（AI 电脑玩家2）- 屏幕左侧垂直居中### 抢地主阶段
- **下方玩家**（你）- 屏幕底部，手牌展开显示- 如果有人叫地主，其他玩家可以选择"抢地主"
- **中央区域** - 游戏信息、出牌区域、底牌展示- 抢地主会增加游戏倍数
### 视觉效果### 出牌阶段
- 🌈 多彩动态渐变背景（紫-蓝-青-绿-金）1. 地主获得3张底牌，优先出牌
- 🎴 3D 卡牌效果（阴影、圆角、高光）2. 点击手牌选择要出的牌（选中的牌会上浮）
- 💫 流畅动画（发牌、出牌、选牌）3. 点击"出牌"按钮出牌
- 💧 水波纹按钮效果4. 可以点击"提示"获取出牌建议
- ⏱️ 倒计时脉冲动画5. 点击"不要"跳过本轮
- 🔔 Toast 滑入滑出
### 胜利条件
---- 先出完所有手牌的一方获胜
- 地主胜利或农民胜利
## 💻 技术实现
## 牌型说明
### 技术栈
- **HTML5** - 语义化结构### 基础牌型
- **CSS3** - Flexbox、动画、渐变、毛玻璃- **单张**：任意一张牌
- **JavaScript ES6+** - 类、箭头函数、解构- **对子**：两张相同点数的牌
- **纯原生实现** - 零依赖，快速加载- **三张**：三张相同点数的牌
### 核心算法### 组合牌型
- **洗牌算法** - Fisher-Yates 随机洗牌- **三带一**：三张 + 一张单牌
- **牌型识别** - 正则+统计+连续性检测- **三带对**：三张 + 一个对子
- **AI 决策** - 手牌评估+牌型生成+压牌策略- **顺子**：五张及以上连续的牌（不含2和王）
- **出牌验证** - 规则引擎，类型和大小检查- **连对**：三对及以上连续的对子
- **飞机**：两个及以上连续的三张
### 性能优化- **飞机带翅膀**：飞机 + 等量单牌/对子
- CSS `transform` 硬件加速
- 事件委托减少监听器### 炸弹牌型
- DOM 操作批量化- **炸弹**：四张相同点数的牌
- 定时器及时清理- **王炸**：大王 + 小王（最大）
---## 牌力大小
## 🐛 常见问题点数：3 < 4 < 5 < 6 < 7 < 8 < 9 < 10 < J < Q < K < A < 2 < 小王 < 大王
### Q1: 游戏打不开？特殊规则：
**A**: 确保已启动 HTTP 服务器（需要 Python 3），然后访问 http://localhost:8000- 王炸 > 炸弹 > 其他牌型
- 相同牌型比点数大小
### Q2: 倒计时到 0 会怎样？- 不同牌型（非炸弹）不能比较
**A**: 自动执行默认操作（不叫/不抢/不要），避免卡住游戏流程
## AI策略
### Q3: AI 太强/太弱怎么办？
**A**: 可以编辑 `js/ai.js` 文件，调整评分权重参数AI根据手牌情况智能决策：
- **叫地主**：根据牌力（王、2、炸弹、三张等）评估
### Q4: 如何修改界面颜色？- **出牌**：
**A**: 编辑 `css/style.css`，搜索对应的颜色值（如 `#ffd700`）修改 - 优先出单张、对子等小牌
- 保留炸弹和大牌
### Q5: 可以添加音效吗？ - 智能跟牌策略
**A**: 可以！在 `audio/` 目录放入音频文件，在 `js/ui.js` 中调用 `new Audio().play()` - 队友出牌时适当放过
---## 技术实现
## 🎯 游戏技巧### 核心类
- **Card**：扑克牌类，管理牌的创建、洗牌、排序
### 地主策略- **Player**：玩家类，管理手牌和角色
- 💎 拿到王、炸弹、多个三张时积极叫地主- **CardType**：牌型分析类，判断和比较牌型
- 💎 先出小牌，后手大牌压制- **AI**：AI决策类，实现电脑玩家逻辑
- 💎 及时炸弹阻止农民跑牌- **Game**：游戏主逻辑，控制游戏流程
- **GameUI**：UI控制类，处理界面交互
### 农民策略
- 🌾 配合队友，不要单打独斗### 特色功能
- 🌾 记住队友出过的大牌1. **智能牌型识别**：自动识别所有标准牌型
- 🌾 适时使用炸弹帮助队友2. **AI出牌算法**：基于规则的AI决策系统
3. **提示系统**：为玩家推荐最优出牌方案
### 通用技巧4. **动画效果**：流畅的卡牌动画和过渡效果
- ⚡ 注意倒计时，避免超时自动跳过
- ⚡ 善用"提示"功能学习出牌## 浏览器兼容性
- ⚡ 观察对手剩余牌数，调整策略
支持现代浏览器：
---- Chrome 60+
- Firefox 60+
## 🚀 部署上线- Safari 12+
- Edge 79+
### 本地部署
已配置！直接运行启动脚本即可。## 后续优化方向
### 静态托管### 功能增强
本项目是纯静态网站，可直接部署到：- [ ] 添加音效系统（出牌、获胜音效等）
- **GitHub Pages** - 免费托管- [ ] 添加背景音乐
- **Vercel** - 一键部署- [ ] 记牌器功能
- **Netlify** - 拖拽上传- [ ] 历史记录
- **Nginx/Apache** - 自己的服务器- [ ] 难度选择（简单/中等/困难AI）
只需将整个项目文件夹上传即可，无需任何构建步骤。### UI优化
- [ ] 更多动画效果
---- [ ] 自定义主题
- [ ] 移动端适配优化
## 📊 项目数据- [ ] 全屏模式
- 代码行数: ~2,500 行### 玩法扩展
- 文件数量: 11 个核心文件- [ ] 欢乐豆系统
- 牌型种类: 15 种- [ ] 排行榜
- AI 策略: 多层决策树- [ ] 成就系统
- 浏览器支持: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+- [ ] 多人联机对战
- [ ] 癞子斗地主模式
---
## 开发说明
## ⭐ 项目特色
### 代码结构
- ✅ **完整实现** - 所有斗地主规则100%实现- 采用面向对象设计
- ✅ **原生代码** - 零依赖，代码清晰易懂- 模块化开发，职责分离
- ✅ **经典布局** - 采用欢乐斗地主的三角形布局- 易于扩展和维护
- ✅ **智能 AI** - 具有挑战性的 AI 对手
- ✅ **精美 UI** - 流畅动画和舒适配色### 自定义开发
- ✅ **易于扩展** - 代码结构清晰，便于二次开发如需修改游戏逻辑：
- `card.js`：修改牌的定义
---- `cardType.js`：添加新牌型
- `ai.js`：调整AI策略
## 📝 更新日志- `game.js`：修改游戏规则
- `style.css`：调整UI样式
### v1.0.0 (初始版本)
- 完整的游戏逻辑实现## 许可证
- 15 种牌型识别
- AI 智能出牌MIT License
### v1.1.0## 作者
- 添加倒计时系统
- Toast 消息提示欢乐斗地主小游戏
- UI 大幅美化
---
### v1.2.0 (当前版本) ⭐
- **采用欢乐斗地主经典布局****开始享受游戏吧！祝你好运！🎮**
- 优化中央出牌区域
- 精简文档，保留核心
---
## 🎉 开始游戏
现在就启动服务器，体验经典的斗地主游戏吧！
```bash
python3 -m http.server 8000
访问 http://localhost:8000 开始游戏！
Made with ❤️ | 纯原生实现 | 欢乐斗地主风格
项目版本: v1.2.0 | 更新日期: 2025-10-21