当前位置：首页 > news >正文

React 实现五子棋人机对战小游戏

news 2025/7/20 17:00:46

项目简介

本项目是一个基于 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;
}