如何整合Chess.js与Chessboard.js实现随机对局？

别担心，我来一步步带你完成整合，实现你想要的随机对局效果：

步骤1：引入Chess.js脚本 #

你已经把chess.min.js放进js文件夹了，现在只需要在HTML的<head>里，添加引入标签（放在Chessboard.js脚本前后都可以，习惯上先加载逻辑库）：

<script src="js/chess.min.js"></script>

修改后的<head>部分应该是这样：

<head>
  <title>Chess Match</title>
  <link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="js/chess.min.js"></script>
  <script src="js/chessboard-0.3.0.min.js"></script>
</head>

步骤2：初始化棋局与棋盘 #

接下来替换页面底部的脚本，完成三个核心操作：初始化棋局逻辑、绑定棋盘显示、实现随机走子逻辑。完整代码如下：

// 初始化Chess实例，负责处理棋局规则、走子逻辑
var game = new Chess();

// 初始化棋盘，同步Chess实例的当前局面
var board = ChessBoard('board', {
  position: game.fen(), // 用Chess生成的局面字符串渲染棋盘
  showNotation: true // 可选：开启棋盘坐标标注
});

// 实现随机走子的核心函数
function makeRandomMove() {
  // 获取当前局面下所有合法走法
  var moves = game.moves();
  
  // 如果棋局结束（将死、和棋等），停止走子
  if (moves.length === 0) return;
  
  // 随机挑选一个合法走法
  var randomIndex = Math.floor(Math.random() * moves.length);
  var selectedMove = moves[randomIndex];
  
  // 执行走子操作
  game.move(selectedMove);
  
  // 更新棋盘显示最新局面
  board.position(game.fen());
  
  // 延迟1秒后继续下一轮走子，模拟对局节奏
  setTimeout(makeRandomMove, 1000);
}

// 页面加载完成后启动随机对局
$(document).ready(function() {
  makeRandomMove();
});

关键细节说明 #

• game.fen()：Chess.js通过FEN字符串标准化描述棋局状态，Chessboard.js可以直接用这个字符串渲染对应棋盘，这是两者同步的核心。
• game.moves()：返回当前局面下所有合法走法的数组，随机选取就能实现“随机对局”的效果。
• setTimeout：控制每一步的间隔，你可以根据需求调整毫秒数（比如改成500就是半秒走一步）。

把这些代码替换你原来的脚本部分，刷新页面就能看到自动进行的随机对局啦！

内容的提问来源于stack exchange，提问作者Rexam