项目简介
本项目是一个基于 React + Vite + TailwindCSS 实现的五子棋人机对战小游戏,支持多种难度选择,界面美观,体验流畅。适合用于前端技术展示、算法教学、休闲娱乐等多种场景。
项目亮点
- 三种难度:支持“易”、“中”、“难”三种 AI 难度,适合不同水平玩家。
- 自适应棋盘:棋盘大小随难度自动调整,最高支持 20×20。
- 极简美观 UI:采用 TailwindCSS,界面现代、响应式,棋子高光与阴影细腻。
- 无依赖后端:纯前端实现,开箱即用。
- AI 算法:内置启发式评分与邻域搜索,AI 具备一定挑战性。
适用场景
- 前端项目作品集/简历展示
- 算法与人工智能入门教学
- 休闲娱乐小游戏
- 代码重构与性能优化练习
核心代码分析
1. 棋盘与状态管理
- 棋盘数据结构为二维数组,
EMPTY
=0,PLAYER
=1,AI
=2。 - 通过
useState
管理棋盘、当前回合、胜负状态等。
const [board, setBoard] = useState(createEmptyBoard(15));
const [playerTurn, setPlayerTurn] = useState(true);
const [winner, setWinner] = useState(null);
2. 胜负判定
checkWin(board, x, y, who, size)
:判断某一方是否五连。
3. AI 核心算法
- 难度切换:通过
difficulty
状态切换不同评分表和策略。 - 评分函数:
evaluatePoint
评估每个空位的进攻/防守价值。 - 启发式搜索:
findBestScoreMove
/findBestScoreMoveSimple
选出最优落子点。 - 邻域搜索:
findNearPlayer
优先在玩家棋子周围落子,提升效率。
易评分
function findBestScoreMoveSimple(board, size) {
const scoreTable = [0, 1, 10, 100, 1000, 100000];
let bestScore = -Infinity;
let candidates = [];
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if (board[y][x] === EMPTY) {
let score =
evaluatePoint(board, x, y, AI, scoreTable, size) +
evaluatePoint(board, x, y, PLAYER, scoreTable, size) * 0.7;
score +=
Math.floor(size / 2) -
Math.abs(x - Math.floor(size / 2)) -
Math.abs(y - Math.floor(size / 2));
if (score > bestScore) {
bestScore = score;
candidates = [{ x, y }];
} else if (score === bestScore) {
candidates.push({ x, y });
}
}
}
}
if (candidates.length > 0) {
return { candidates };
}
return null;
}
难、中评分
function findBestScoreMove(board, size) {
const scoreTable = [0, 10, 100, 1000, 10000, 1000000];
let bestScore = -Infinity;
let candidates = [];
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if (board[y][x] === EMPTY) {
let score =
evaluatePoint(board, x, y, AI, scoreTable, size) +
evaluatePoint(board, x, y, PLAYER, scoreTable, size) * 0.8;
if (score > bestScore) {
bestScore = score;
candidates = [{ x, y }];
} else if (score === bestScore) {
candidates.push({ x, y });
}
}
}
}
if (candidates.length > 0) {
return { candidates };
}
return null;
}
4. UI 渲染
- 棋盘采用 SVG 绘制线条,棋子用渐变和阴影模拟立体感。
- 胜负弹窗、难度切换按钮均为响应式设计。