如何用chessboard.js和chess.js实现仅白方走棋、黑方静止的棋局？

嘿，我来帮你搞定这个国际象棋步数闯关游戏！用chess.js和chessboard.js完全能实现你的需求：白方按规则无限走棋、黑方全程静止，还要在限定步数内清掉所有黑棋。下面是具体的实现思路和代码示例：

1. 基础依赖与初始化 #

首先得把chess.js和chessboard.js的资源引入（假设你已经把这两个库的文件下载到本地了），然后创建棋盘容器和状态显示元素：

<!-- 引入依赖库 -->
<script src="chess.js"></script>
<script src="chessboard-1.0.0.min.js"></script>
<link rel="stylesheet" href="chessboard-1.0.0.min.css">

<!-- 棋盘容器 -->
<div id="board" style="width: 400px; margin: 20px 0;"></div>
<!-- 游戏状态与步数显示 -->
<div id="move-status">剩余步数: 5</div>
<div id="game-tip">请在限定步数内消灭所有黑方棋子！</div>

接着初始化棋局实例和棋盘，同时设置好核心的交互回调：

// 初始化国际象棋逻辑实例
const chessGame = new Chess();
// 初始化棋盘UI
const chessBoard = Chessboard('board', {
  position: 'start', // 这里可以换成自定义关卡的FEN位置
  draggable: true,
  onDragStart: handleDragStart,
  onDrop: handleDrop,
  onSnapEnd: updateBoardDisplay
});

// 限定步数配置
let remainingMoves = 5;
const moveStatusEl = document.getElementById('move-status');
const gameTipEl = document.getElementById('game-tip');

2. 锁死黑方：只允许白方操作 #

核心逻辑就是禁止黑方棋子被拖拽，并且在白方走棋后强制切回白方回合，不让黑方有任何行动机会：

function handleDragStart(source, piece) {
  // 1. 黑方棋子直接禁止拖拽
  if (piece.startsWith('b')) {
    return false;
  }
  // 2. 如果步数用完或者已经通关，禁止继续操作
  if (remainingMoves <= 0 || checkWinCondition()) {
    return false;
  }
}

function handleDrop(source, target) {
  // 用chess.js验证白方走棋是否符合规则
  const validMove = chessGame.move({
    from: source,
    to: target,
    promotion: 'q' // 默认升变为皇后，可根据需求调整
  });

  // 如果走棋无效，让棋子回到原位
  if (!validMove) return 'snapback';

  // 走棋有效，减少剩余步数
  remainingMoves--;
  moveStatusEl.textContent = `剩余步数: ${remainingMoves}`;

  // 关键：强制切回白方回合，黑方永远无法行动
  chessGame.turn('w');

  // 检查游戏状态（是否通关或步数耗尽）
  updateGameStatus();
}

function updateBoardDisplay() {
  // 同步棋盘UI与棋局逻辑的状态
  chessBoard.position(chessGame.fen());
}

3. 胜利条件与游戏结束判断 #

写一个函数判断是否消灭了所有黑方棋子，然后根据剩余步数和胜利状态更新提示：

function checkWinCondition() {
  // 遍历棋盘，统计剩余的黑方棋子数量
  const remainingBlackPieces = chessGame.board()
    .flat()
    .filter(piece => piece && piece.color === 'b');
  
  // 黑方无剩余棋子则判定胜利
  return remainingBlackPieces.length === 0;
}

function updateGameStatus() {
  if (checkWinCondition()) {
    gameTipEl.textContent = '🎉 恭喜！你成功消灭所有黑方棋子，闯关完成！';
    chessBoard.draggable(false); // 禁用拖拽，结束游戏
    return;
  }
  
  if (remainingMoves <= 0) {
    gameTipEl.textContent = '😔 步数耗尽，挑战失败！';
    chessBoard.draggable(false);
  } else {
    gameTipEl.textContent = '继续走棋，目标是消灭所有黑方棋子！';
  }
}

4. 自定义关卡扩展 #

如果要做不同的闯关关卡，只需要修改棋盘的初始FEN位置即可，比如设置一个黑方只剩王和几个兵的关卡：

// 自定义关卡的FEN字符串
const customLevelFen = '8/2p2p2/8/3k4/8/8/2P2P2/3K4 w - - 0 1';
// 加载自定义关卡
chessBoard.position(customLevelFen);
chessGame.load(customLevelFen);

这样就能完美实现你想要的效果：白方严格遵循国际象棋规则走棋，黑方全程静止无法操作，在限定步数内清完黑棋就算通关。你还可以根据需求扩展更多功能，比如多关卡切换、步数重置按钮等等~

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