🎮 优雅五子棋 - Elegant Gomoku Game

一个具有毛玻璃效果、优美UI设计的网页五子棋游戏，内置智能AI对手。右下角悬浮设计，支持在任意页面上游玩。

✨ 特性

• 🎨 毛玻璃半透明设计 - 70%默认透明度，悬停完全显示，不遮挡页面内容
• 🤖 内置AI对手 - 智能评估算法，会主动进攻也会防守你的连子
• 🎯 标准15×15棋盘 - 包含天元和星位标记，符合专业棋盘规范
• ✅ 胜负判定 - 自动检测横、竖、斜向五连，获胜棋子有脉冲高亮动画
• 🔵 最后一步标记 - 蓝色边框高亮显示最新落子
• ↩️ 悔棋功能 - 支持一键回退（同时撤销玩家和AI的一步）
• 🔄 重新开始 - 随时开启新对局
• 🔽 最小化支持 - 可收起为小按钮节省空间
• 🌙 深色模式适配 - 自动跟随系统主题切换
• 📱 响应式设计 - 适配不同屏幕尺寸
• 🚀 零依赖可直接运行 - 仅需一个浏览器即可游玩

🚀 快速开始

推荐直接从 GitHub 安装到 DSH： dsh plugin --profile web add github:zixing2333/dsh-gmk-game

直接运行

直接在浏览器中打开 index.html 文件即可开始游戏：

# Windows
start index.html

# macOS
open index.html

# Linux
xdg-open index.html

本地服务器运行（推荐）

使用任意HTTP服务器运行，例如：

# 使用Python
python -m http.server 8080

# 使用Node.js (npx)
npx serve .

# 使用PHP
php -S localhost:8080

然后在浏览器访问 http://localhost:8080

🎯 游戏玩法

1. 你执黑棋先手，点击棋盘上的交叉点落子
2. AI执白棋自动应对，会思考0.3秒后落子
3. 率先在横向、纵向或斜向连成五子者获胜
4. 获胜时连成一线的棋子会有绿色脉冲动画提示
5. 点击「🔄 重新开始」开启新对局
6. 点击「↩️ 悔棋」可以撤销你和AI各一步棋
7. 点击右上角「🔽」按钮可以最小化面板
8. 鼠标悬停在面板上时，面板会变为完全不透明

🛠️ 技术栈

• React 18 - UI框架（使用UMD版本无需构建）
• 原生CSS - 毛玻璃效果、动画、响应式布局
• 原生JavaScript - 游戏逻辑与AI算法
• 零构建依赖 - 打开HTML即可运行

📁 项目结构

gomoku-game/
├── index.html      # 入口HTML文件
├── style.css       # 样式文件（包含毛玻璃效果、动画）
├── app.js          # React组件与游戏逻辑、AI算法
├── screenshot.png  # 游戏截图
└── README.md       # 项目说明文档

🎨 设计特点

• 半透明毛玻璃（backdrop-filter: blur(12px)）面板，与背景完美融合
• 棋子采用径向渐变实现立体感（黑子深灰渐变到纯黑，白子白色渐变到浅灰）
• 棋盘使用木质色调渐变，视觉舒适
• 所有交互都有平滑过渡动画
• 按钮悬停有颜色变化反馈
• 悬停时面板轻微上浮，增加层次感

🧠 AI算法说明

当前AI采用启发式评分算法：

1. 优先获胜检查：如果AI下一步能直接五连获胜，直接落子
2. 防守优先检查：如果玩家下一步能五连获胜，立刻阻挡
3. 位置评分：对每个空位从四个方向（横/竖/两斜）评估连子数和开放端数量：
   • 活四（两端开放）：10000分
   • 冲四（一端开放）：1000分
   • 活三（两端开放）：500分
   • 其他连子按威胁程度评分
4. 中心偏好：越靠近天元（7,7）位置额外加分
5. 邻域剪枝：只评估已有棋子附近2格范围内的位置，提升效率

AI评分同时考虑进攻得分和防守得分（阻挡玩家），做出综合最优选择。

📄 开源协议

MIT License - 详见LICENSE文件

👤 作者

• GitHub: @zixing2333

---

享受游戏！ 🎉