🎮 五子棋游戏

一个功能完备、体验卓越的现代化五子棋游戏，支持多种游戏模式和精美的用户界面。

✨ 主要特性

🎯 游戏模式

• 本地游戏: 支持双人对战和人机对战
• 联机对战: 支持局域网内多人实时对战
• AI 对手: 多难度级别的智能 AI
• 大模型模式: 支持对接 OpenAI 兼容的大语言模型作为对手

🎨 视觉体验

• 6 种精美主题: 经典木纹、现代深色、翡翠绿、海洋蓝、日落橙、紫罗兰
• 横屏优化布局: 充分利用屏幕空间，左侧控制面板 + 右侧游戏区域
• 流畅动画: 使用 PixiJS 和 GSAP 实现丝滑的游戏体验
• 响应式设计: 支持多种屏幕尺寸

🔊 音效系统

• 背景音乐: 轻柔的和弦进行背景音乐
• 游戏音效: 落子、获胜、点击等音效
• 独立控制: 可单独控制背景音乐和音效的开关及音量

📊 统计功能

• 游戏统计: 自动记录总局数、胜率、连胜记录等
• 数据持久化: 统计数据本地保存，刷新后依然保留

⚡ 交互功能

• 全屏模式: 支持全屏游戏体验
• 快速入门: 首次使用会显示详细的游戏指南
• 键盘快捷键: 支持常用操作的快捷键
• 主题切换: 一键切换棋盘主题

🚀 技术栈

前端

• React 19: 现代化的用户界面框架
• TypeScript: 类型安全的开发体验
• PixiJS: 高性能的 WebGL 游戏渲染引擎
• GSAP: 专业级动画库
• TailwindCSS: 实用优先的 CSS 框架
• Zustand: 轻量级状态管理

后端

• Node.js + Express: 稳定的后端服务
• Socket.IO: 实时通信支持
• TypeScript: 全栈类型安全
• Bun: 高性能 JavaScript 运行时
• Socket.IO: WebSocket 实时通信库
• LLM 代理服务器: 解决浏览器跨域问题的本地代理，支持对接各种大语言模型 API

开发工具

• Bun: 快速的 JavaScript 运行时和包管理器
• Vite: 极速的开发服务器

🎮 游戏规则

1. 基本规则: 黑棋先行，双方轮流落子
2. 获胜条件: 横、竖、斜任意方向连成 5 子即获胜
3. 落子规则: 点击网格线交叉点处落子

🎨 主题介绍

1. 🪵 经典木纹: 传统的木质棋盘风格
2. 🌙 现代深色: 现代简约深色主题
3. 🍃 翡翠绿: 清新的翡翠绿主题
4. 🌊 海洋蓝: 深邃的海洋蓝主题
5. 🌅 日落橙: 温暖的日落橙主题
6. 🔮 紫罗兰: 优雅的紫罗兰主题

⌨️ 快捷键

• S: 打开设置面板
• H: 打开快速入门指南
• F: 切换全屏模式
• R: 重新开始游戏
• ESC: 关闭弹窗

🛠️ 安装和运行

前提条件

• Node.js 18+
• Bun 1.0+

安装依赖

bun install

启动开发服务器

bun dev

构建生产版本

bun run build

🎯 项目结构

gobang_react/
├── src/
│   ├── components/          # React组件
│   │   ├── GameBoard.tsx   # 游戏棋盘
│   │   ├── SettingsPanel.tsx # 设置面板
│   │   ├── ThemeSelector.tsx # 主题选择器
│   │   └── ...
│   ├── services/           # 业务服务
│   │   ├── ThemeService.ts # 主题管理
│   │   ├── AudioService.ts # 音效管理
│   │   └── SocketService.ts # 网络通信
│   ├── hooks/              # 自定义Hooks
│   ├── store/              # 状态管理
│   └── game/               # 游戏逻辑
├── server/                 # 后端服务
└── ...

🌟 功能亮点

1. 横屏优化布局

• 左侧控制面板显示游戏信息、主题选择、统计数据
• 右侧专注于游戏棋盘，获得更好的游戏体验
• 响应式设计，在移动设备上自动调整为垂直布局

2. 主题系统

• 6 种精心设计的主题
• 一键切换，实时预览
• 主题设置自动保存

3. 音效系统

• 程序化生成的音效，无需外部文件
• 背景音乐采用和弦进行，营造轻松氛围
• 支持音量调节和开关控制

4. 智能 AI

• 基于 Minimax 算法与 Alpha-Beta 剪枝
• 多难度级别可选
• 在 Web Worker 中运行，不阻塞 UI

5. 统计系统

• 自动记录游戏数据
• 胜率计算和连胜记录
• 数据持久化保存

📱 浏览器支持

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！

📄 许可证

GPL3 License

---

享受游戏吧！ 🎉

💎 大模型模式使用指南

在大模型模式下，你可以使用支持 OpenAI 兼容接口的大语言模型作为你的对手。

配置步骤

1. 在游戏设置面板中选择"大模型模式"
2. 配置模型参数：
   • API 地址: 模型服务的接口地址（如 https://api.openai.com/v1/chat/completions）
   • 模型名称: 使用的模型（如 gpt-3.5-turbo）
   • API 密钥: 你的 API 访问密钥
   • 温度: 控制模型输出的随机性 (0-2)
   • 最大令牌数: 模型响应的最大长度

使用代理服务器

由于浏览器的跨域安全限制，直接从前端访问 API 可能会失败。本项目提供了内置的代理服务器解决此问题：

1. 在设置中勾选"使用代理"
2. 确保代理地址为 http://localhost:3100/api/llm-proxy
3. 运行以下命令启动代理服务器：

   bun run proxy
   

   或双击项目根目录下的 start-proxy.bat 文件（Windows）

故障排除

如果遇到 404 错误或连接问题：

1. 确保代理服务器已启动并运行在正确的端口 (3100)
2. 检查 API 地址和代理地址是否正确配置
3. 验证 API 密钥是否有效
4. 检查网络连接和防火墙设置