amadeus711 / my-gobang

Vue3 + TS + TDesign + Vite 五子棋游戏

五子棋游戏

体验地址

my-gobang

功能

1. 点击棋盘直接开始人-人对战
2. 点击设置可以进行人-机对战
3. 对战时，[认输] 可直接进入对战结束状态
4. 对战时，[上一步] 为悔棋
5. 对战时，[下一步] 为撤销悔棋，当在悔棋后又走一步，则撤销悔棋失效
6. 对战结束后，[上一步]、[下一步] 可以回看本局对战情况
7. 对战结束后，点击 [清盘] 可清除对局

项目结构

├── src
│   ├── assets               # 静态资源
│   ├── components           # 共用组件
│   │   ├── Checkerboard     # 棋盘组件 
│   │   └── Piece            # 棋子组件
│   ├── hooks
│   │   └── useGobangProgram # 程序主逻辑
│   ├── utils   
│   │   ├── ai               # 电脑决策算法
│   │   ├── findEmptySeat    # 寻找空位算法 
│   │   └── hasNum           # 对局判胜算法
│   ├── views
│   │   ├── GameProgram      # 游戏界面 
│   │   ├── Gobang           # 五子棋整合界面 
│   └── └── Panel            # 显示与操作面板
├── README.md
└── package.json

项目特点

1. 代码结构层次分明，方便后续维护
2. 视图与逻辑分离，提升代码可维护性
3. 状态层次合理，提升代码阅读性
4. 特殊函数抽取，方便后续针对性优化（针对算法优化等）
5. 特殊组件抽取，方便后续替换（棋盘、棋子变更为 canvas）

可优化点

算法

1. 电脑决策算法可以使用 极大极小值搜索、Alpha-Beta 剪枝 等算法优化。
2. 基于第1点优化，可以对电脑分等级

视图

1. 可以使用 canvas 绘制棋盘、棋子
2. 可以使用 i18n 统一将文字内容抽取出来，提高语言扩展性