当前位置：首页 > VUE

vue实现中国象棋

2026-02-20 21:16:50VUE

Vue实现中国象棋的核心思路

使用Vue.js实现中国象棋需要结合组件化开发、状态管理和棋盘交互逻辑。Vue的响应式特性非常适合处理棋盘状态变化和棋子移动。

棋盘与棋子组件设计

创建两个主要组件：棋盘组件(ChessBoard)和棋子组件(ChessPiece)。棋盘组件负责渲染9x10的网格，棋子组件作为其子组件动态生成。

<template>
  <div class="chess-board">
    <div 
      v-for="(row, rowIndex) in board" 
      :key="rowIndex" 
      class="chess-row"
    >
      <div 
        v-for="(cell, colIndex) in row" 
        :key="colIndex" 
        class="chess-cell"
        @click="handleCellClick(rowIndex, colIndex)"
      >
        <ChessPiece 
          v-if="cell" 
          :piece="cell"
          :selected="selectedPiece && selectedPiece.row === rowIndex && selectedPiece.col === colIndex"
        />
      </div>
    </div>
  </div>
</template>

游戏状态管理

使用Vue的reactive或Pinia/Vuex管理游戏状态，包括：

vue实现中国象棋

当前棋盘布局
当前回合(红方/黑方)
选中的棋子
游戏历史记录(用于悔棋)

const gameState = reactive({
  board: initializeBoard(),
  currentPlayer: 'red',
  selectedPiece: null,
  moveHistory: []
});

function initializeBoard() {
  // 初始化象棋棋盘布局
  return [
    // 第一行(黑方)
    ['r_ju', 'r_ma', 'r_xiang', 'r_shi', 'r_jiang', 'r_shi', 'r_xiang', 'r_ma', 'r_ju'],
    // ...其他行初始化
    // 最后一行(红方)
    ['b_ju', 'b_ma', 'b_xiang', 'b_shi', 'b_jiang', 'b_shi', 'b_xiang', 'b_ma', 'b_ju']
  ];
}

棋子移动逻辑

实现棋子移动的核心是验证移动是否符合象棋规则。为每种棋子类型创建专门的移动验证函数：

function isValidMove(piece, from, to, board) {
  const [color, type] = piece.split('_');
  const dx = to.col - from.col;
  const dy = to.row - from.row;

  switch(type) {
    case 'ju': // 车
      return validateChariotMove(from, to, board);
    case 'ma': // 马
      return validateHorseMove(from, to, board);
    // ...其他棋子规则
    default:
      return false;
  }
}

交互流程处理

处理用户点击棋子的交互流程：

vue实现中国象棋

点击空白格子：如果有选中棋子且可以移动，则移动棋子
点击己方棋子：选中该棋子
点击对方棋子：如果有选中棋子且可以吃子，则执行吃子操作

function handleCellClick(row, col) {
  const clickedPiece = gameState.board[row][col];

  // 已有选中棋子
  if (gameState.selectedPiece) {
    const { row: fromRow, col: fromCol } = gameState.selectedPiece;

    // 验证移动是否合法
    if (isValidMove(gameState.board[fromRow][fromCol], 
                   { row: fromRow, col: fromCol },
                   { row, col },
                   gameState.board)) {
      movePiece(fromRow, fromCol, row, col);
    }
    gameState.selectedPiece = null;
  } 
  // 点击己方棋子
  else if (clickedPiece && clickedPiece.startsWith(gameState.currentPlayer)) {
    gameState.selectedPiece = { row, col };
  }
}

视觉效果增强

添加CSS过渡效果和棋子样式提升用户体验：

.chess-board {
  display: flex;
  flex-direction: column;
  background-color: #f0d9b5;
  border: 2px solid #000;
}

.chess-row {
  display: flex;
}

.chess-cell {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.chess-cell.selected {
  background-color: rgba(0, 255, 0, 0.3);
}

.chess-piece {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.chess-piece.red {
  background-color: #f00;
  color: #fff;
}

.chess-piece.black {
  background-color: #000;
  color: #fff;
}