当前位置：首页 > VUE

vue实现中国象棋

2026-01-20 05:15:15VUE

实现中国象棋的Vue组件

棋盘与棋子渲染

使用Vue的模板语法构建9x10的棋盘网格，每个交叉点用div表示。棋子数据存储在data中，通过v-for循环渲染：

<div class="chessboard">
  <div 
    v-for="(row, rowIndex) in board" 
    :key="rowIndex" 
    class="row"
  >
    <div 
      v-for="(cell, colIndex) in row" 
      :key="colIndex"
      @click="handleClick(rowIndex, colIndex)"
      class="cell"
    >
      <span v-if="cell" :class="['piece', cell.color]">
        {{ cell.name }}
      </span>
    </div>
  </div>
</div>

初始化棋盘状态

在data或setup中定义初始棋子位置：

vue实现中国象棋

data() {
  return {
    board: Array(10).fill().map(() => Array(9).fill(null)),
    selected: null,
    // 红方棋子初始化
    redPieces: [
      { name: '车', row: 0, col: 0 },
      { name: '马', row: 0, col: 1 },
      // ...其他棋子
    ],
    // 黑方棋子初始化
    blackPieces: [
      { name: '车', row: 9, col: 0 },
      // ...其他棋子
    ]
  }
}

棋子移动逻辑

实现点击事件处理函数，包含选择棋子和移动逻辑：

methods: {
  handleClick(row, col) {
    if (!this.selected) {
      const piece = this.board[row][col];
      if (piece && piece.color === this.currentPlayer) {
        this.selected = { row, col };
      }
    } else {
      if (this.isValidMove(this.selected, { row, col })) {
        this.movePiece(this.selected, { row, col });
        this.selected = null;
        this.currentPlayer = this.currentPlayer === 'red' ? 'black' : 'red';
      }
    }
  },

  isValidMove(from, to) {
    // 实现各棋子的移动规则
    const piece = this.board[from.row][from.col];
    switch(piece.name) {
      case '车': return this.validateRook(from, to);
      case '马': return this.validateHorse(from, to);
      // 其他棋子规则
    }
  }
}

胜负判定

每次移动后检查是否将死对方：

vue实现中国象棋

checkWinCondition() {
  const hasGeneral = (color) => {
    return this.board.some(row => 
      row.some(cell => cell && cell.name === '将' && cell.color === color)
    );
  };

  if (!hasGeneral('red')) return 'black';
  if (!hasGeneral('black')) return 'red';
  return null;
}

样式设计

使用CSS实现棋盘和棋子的视觉效果：

.chessboard {
  display: grid;
  grid-template-rows: repeat(10, 50px);
  grid-template-columns: repeat(9, 50px);
  background: #e8c887;
}

.cell {
  border: 1px solid #000;
  position: relative;
}

.piece {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.red { background: #f00; color: white; }
.black { background: #000; color: white; }