项目简介
春节麻将馆 - 民俗游戏
春节麻将馆是一个民俗游戏主题的麻将游戏项目，还原了春节期间打麻将的传统娱乐活动。项目采用深色背景和金色边框设计，提供麻将牌展示、手牌管理、摸牌出牌、胡牌判断等功能，让用户在游戏中体验传统麻将文化的魅力。
核心特点：
- 丰富牌型：包含万字牌（1-9万）、筒子牌（1-9筒）、条子牌（1-9条）、字牌（东南西北中发白）
- 游戏功能：支持洗牌、摸牌、出牌、胡牌
- 牌面展示：精美的麻将牌面设计，带有颜色区分
- 统计系统：实时显示手牌数量、弃牌数量、游戏得分
- 响应式设计：适配各种屏幕尺寸
iFlow CLI使用功能
本项目开发过程中使用了以下iFlow CLI功能：
- write_file - 创建HTML文件
- 文件路径管理 - 使用绝对路径确保文件创建位置正确
- 文档系统化创建 - 标准化的项目文档
实现过程
1. 页面结构设计
- 采用2列网格布局，左侧为麻将牌展示和游戏操作，右侧为游戏区域和统计
- 头部：麻将风格的标题区域，带有麻将emoji（
） - 主内容区：麻将牌展示、游戏操作按钮、结果提示
- 侧边栏：玩家手牌、弃牌堆、统计面板、游戏控制
2. 视觉风格
- 色彩方案：深蓝（#1a1a2e）+ 红色（#e94560）+ 金色（#f1c40f）
- 字体选择：Microsoft YaHei微软雅黑，现代简洁
- 布局特点：麻将牌3D效果、金色边框、渐变按钮
- 视觉元素：麻将emoji（）、麻将牌面、选中高亮效果
3. 功能实现
3.1 麻将牌数据结构
const TILES = [
// 万字牌（1-9万）
{ id: 'wan1', name: '一万', type: 'wan', top: '一', bottom: '万' },
// 筒子牌（1-9筒）
{ id: 'tong1', name: '一筒', type: 'tong', top: '🔵', bottom: '筒' },
// 条子牌（1-9条）
{ id: 'tiao1', name: '一条', type: 'tiao', top: '🐦', bottom: '条' },
// 字牌（东南西北中发白）
{ id: 'dong', name: '东', type: 'word', top: '东', bottom: '风' }
];
3.2 游戏状态管理
let gameState = {
playerHand: [], // 玩家手牌
discardPile: [], // 弃牌堆
selectedTile: null, // 选中的麻将牌
score: 0, // 游戏得分
gameStarted: false // 游戏开始标志
};
3.3 核心功能（8个）
- 麻将牌展示 - 展示所有麻将牌（万字、筒子、条子、字牌共34种）
- 手牌管理 - 玩家手牌的显示和选择
- 摸牌功能 - 从牌堆随机摸一张牌加入手牌
- 出牌功能 - 从手牌中选择一张牌打出
- 胡牌判断 - 简化的胡牌检测（四副顺子/刻子+一对将牌）
- 洗牌功能 - 清空手牌和弃牌堆，重新开始
- 牌面选择 - 点击麻将牌显示区选择牌
- 游戏统计 - 实时显示手牌数、弃牌数、得分
3.4 麻将牌面设计
- 万字牌：红色，上方显示汉字，下方显示"万"
- 筒子牌：蓝色，上方显示圆形图案，下方显示"筒"
- 条子牌：绿色，上方显示鸟的数量，下方显示"条"
- 字牌：紫色，上方显示汉字，下方显示属性（风/板/财/发）
4. 交互设计
- 点击麻将牌展示区的牌进行选择
- 点击手牌选择要打出的牌
- 摸牌时自动生成新牌
- 出牌时从手牌移除，加入弃牌堆
- 胡牌检测简单实现（四副+一对）
5. 响应式设计
- 2列布局在小屏幕（<900px）变为单列
- 麻将牌网格在小屏幕（<768px）从7列变为5列
- 弃牌堆网格在小屏幕从10列变为5列
- 字体大小在小屏幕自动缩小
截图
项目包含以下截图位置：
- 麻将牌展示界面
- 玩家手牌区域
- 弃牌堆显示
- 游戏统计面板
体验链接
网页体验路径：
38_春节麻将馆.html
在线部署后可分享链接。
技术亮点
- 丰富牌型 - 34种麻将牌，涵盖万字、筒子、条子、字牌
- 精美牌面 - 3D效果的麻将牌设计，颜色区分明显
- 完整流程 - 洗牌、摸牌、出牌、胡牌完整游戏流程
- 实时统计 - 手牌数、弃牌数、得分实时更新
- 简化胡牌 - 简化的胡牌判断，降低上手难度
文化意义
本项目通过麻将游戏，让用户：
- 体验中国传统麻将文化
- 了解麻将的基本规则
- 培养观察力和策略思维
- 增强对传统文化的认同感
未来改进方向
- 实现完整的麻将规则（碰、杠、吃）
- 添加更多胡牌牌型（七对、十三幺等）
- 实现多人对战功能
- 添加音效和背景音乐
- 开发智能AI对手
- 实现网络对战功能
