当前位置：首页 > VUE

vue实现棋子移动

2026-01-19 02:32:29VUE

实现棋子移动的基本思路

在Vue中实现棋子移动通常需要结合数据驱动和DOM操作。通过维护棋子的位置状态，利用Vue的响应式特性更新视图。以下是关键实现步骤：

数据驱动棋子位置

定义棋子的初始位置数据，通常使用x和y坐标或网格索引：

data() {
  return {
    pieces: [
      { id: 1, x: 0, y: 0, type: 'pawn' },
      { id: 2, x: 1, y: 1, type: 'rook' }
    ]
  }
}

渲染棋子到视图

使用v-for渲染棋子，并通过内联样式或CSS类绑定位置：

<div class="chess-board">
  <div 
    v-for="piece in pieces" 
    :key="piece.id"
    class="chess-piece"
    :style="{ left: `${piece.x * 50}px`, top: `${piece.y * 50}px` }"
    @click="selectPiece(piece)"
  >
    {{ piece.type }}
  </div>
</div>

处理移动逻辑

实现移动方法，更新选中棋子的坐标：

methods: {
  selectPiece(piece) {
    this.selectedPiece = piece;
  },

  movePiece(toX, toY) {
    if (this.selectedPiece) {
      this.selectedPiece.x = toX;
      this.selectedPiece.y = toY;
    }
  }
}

添加拖拽功能（可选）

结合HTML5拖放API或第三方库实现拖拽：

<div
  draggable="true"
  @dragstart="handleDragStart(piece)"
  @dragend="handleDragEnd"
></div>

handleDragStart(piece) {
  this.selectedPiece = piece;
  event.dataTransfer.setData('text/plain', piece.id);
},
handleDragEnd(event) {
  const dropX = Math.floor(event.clientX / 50);
  const dropY = Math.floor(event.clientY / 50);
  this.movePiece(dropX, dropY);
}

动画过渡效果

使用Vue的<transition>或CSS过渡实现平滑移动：

.chess-piece {
  transition: all 0.3s ease;
}

完整组件示例

<template>
  <div class="chess-board" @click.self="deselect">
    <div
      v-for="piece in pieces"
      :key="piece.id"
      class="chess-piece"
      :style="pieceStyle(piece)"
      @click="selectPiece(piece)"
      draggable="true"
      @dragstart="handleDragStart($event, piece)"
      @dragend="handleDragEnd($event)"
    >
      {{ piece.type }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pieces: [
        { id: 1, x: 0, y: 0, type: '♙' },
        { id: 2, x: 3, y: 2, type: '♖' }
      ],
      selectedPiece: null
    }
  },
  methods: {
    pieceStyle(piece) {
      return {
        left: `${piece.x * 50}px`,
        top: `${piece.y * 50}px`,
        backgroundColor: this.selectedPiece === piece ? '#ffeb3b' : ''
      }
    },
    selectPiece(piece) {
      this.selectedPiece = piece;
    },
    deselect() {
      this.selectedPiece = null;
    },
    handleDragStart(event, piece) {
      this.selectPiece(piece);
      event.dataTransfer.setData('text/plain', piece.id);
    },
    handleDragEnd(event) {
      const rect = event.currentTarget.parentElement.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const gridX = Math.floor(x / 50);
      const gridY = Math.floor(y / 50);

      if (this.selectedPiece) {
        this.selectedPiece.x = gridX;
        this.selectedPiece.y = gridY;
      }
    }
  }
}
</script>

<style>
.chess-board {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #f0d9b5;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.chess-piece {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  cursor: move;
  user-select: none;
  transition: all 0.3s ease;
  z-index: 10;
}
</style>

vue实现棋子移动