五子棋游戏 (Gomoku Game)

一个基于Vue3开发的现代化五子棋游戏，具有优雅的界面和流畅的游戏体验。

项目简介

这是一个纯前端实现的五子棋游戏，使用Vue3框架构建，支持双人对战模式。游戏采用标准的15×15棋盘，先连成五子者获胜。

功能特性

• ✨ 基于Vue3框架开发
• 🎮 支持双人对战模式
• 🎨 现代化渐变UI设计
• 📱 响应式布局，支持多种屏幕尺寸
• 🔄 支持悔棋功能
• 🎯 自动检测获胜条件
• 🎲 一键重新开始游戏

技术栈

• Vue 3 - 渐进式JavaScript框架
• HTML5 Canvas - 游戏棋盘渲染
• CSS3 - 现代化样式设计
• ES6+ Modules - 模块化代码组织

项目结构

gomoku/
├── index.html          # 主页面文件
├── css/
│   └── style.css      # 样式文件
├── js/
│   ├── config.js      # 游戏配置常量
│   ├── board.js       # 棋盘逻辑
│   ├── renderer.js    # 渲染器
│   ├── game.js        # 游戏主逻辑
│   └── main.js        # 入口文件
└── .gitignore         # Git忽略配置

快速开始

在线访问

直接打开 index.html 文件即可开始游戏。

本地运行

1. 克隆项目到本地：

git clone https://github.com/systiger/gomoku.git

2. 进入项目目录：

cd gomoku

3. 使用浏览器打开 index.html 文件即可开始游戏

或者使用本地服务器：

# 使用Python
python -m http.server 8000

# 使用Node.js
npx serve

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

游戏规则

1. 黑方先手，白方后手
2. 双方轮流在棋盘上落子
3. 先在横、竖、斜任意方向连成五子者获胜
4. 可以使用悔棋功能撤销上一步操作
5. 游戏结束后可以重新开始

游戏配置

可以在 js/config.js 中修改游戏参数：

• BOARD_SIZE: 棋盘大小（默认15×15）
• CELL_SIZE: 格子大小（默认40px）
• PIECE_RADIUS: 棋子半径（默认18px）
• WIN_COUNT: 获胜所需连子数（默认5）

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge

建议使用最新版本的现代浏览器以获得最佳体验。

开发计划

• 添加AI对战模式
• 添加游戏历史记录
• 支持自定义棋盘大小
• 添加音效
• 支持在线对战

贡献

欢迎提交Issue和Pull Request！

许可证

MIT License

作者

systiger

---

⭐ 如果这个项目对你有帮助，欢迎给个Star！