当前位置：首页 > VUE

vue实现滑动拼图

2026-01-17 11:20:51VUE

Vue 实现滑动拼图的方法

滑动拼图是一种常见的交互式游戏，可以通过 Vue 的动态数据绑定和事件处理轻松实现。以下是实现滑动拼图的步骤和代码示例。

数据结构设计

使用一个二维数组来表示拼图的当前状态，其中每个元素代表拼图的一个格子。空白的格子可以用 null 或特定的标识符表示。

data() {
  return {
    puzzle: [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, null]
    ],
    rows: 3,
    cols: 3
  };
}

渲染拼图界面

使用 v-for 指令动态渲染拼图的格子，并为每个格子绑定点击事件。

<template>
  <div class="puzzle-container">
    <div 
      v-for="(row, rowIndex) in puzzle" 
      :key="rowIndex" 
      class="puzzle-row"
    >
      <div
        v-for="(cell, colIndex) in row"
        :key="colIndex"
        class="puzzle-cell"
        @click="handleClick(rowIndex, colIndex)"
      >
        {{ cell }}
      </div>
    </div>
  </div>
</template>

处理点击事件

当用户点击某个格子时，检查该格子是否可以移动（即是否与空白格子相邻）。如果可以移动，则交换两者的位置。

methods: {
  handleClick(row, col) {
    const blankPos = this.findBlankPosition();
    if (this.isAdjacent(row, col, blankPos.row, blankPos.col)) {
      this.swapCells(row, col, blankPos.row, blankPos.col);
    }
  },
  findBlankPosition() {
    for (let i = 0; i < this.rows; i++) {
      for (let j = 0; j < this.cols; j++) {
        if (this.puzzle[i][j] === null) {
          return { row: i, col: j };
        }
      }
    }
    return { row: -1, col: -1 };
  },
  isAdjacent(row1, col1, row2, col2) {
    return (
      (Math.abs(row1 - row2) === 1 && col1 === col2) ||
      (Math.abs(col1 - col2) === 1 && row1 === row2)
    );
  },
  swapCells(row1, col1, row2, col2) {
    const temp = this.puzzle[row1][col1];
    this.$set(this.puzzle[row1], col1, this.puzzle[row2][col2]);
    this.$set(this.puzzle[row2], col2, temp);
  }
}

样式设计

为拼图容器和格子添加样式，使其看起来更美观。

.puzzle-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.puzzle-row {
  display: flex;
  gap: 5px;
}
.puzzle-cell {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}
.puzzle-cell:hover {
  background-color: #e0e0e0;
}

初始化拼图

在 created 钩子中初始化拼图，可以随机打乱顺序以增加游戏难度。

created() {
  this.shufflePuzzle();
},
methods: {
  shufflePuzzle() {
    // 简单的打乱算法
    for (let i = 0; i < 100; i++) {
      const blankPos = this.findBlankPosition();
      const directions = [
        { row: blankPos.row - 1, col: blankPos.col },
        { row: blankPos.row + 1, col: blankPos.col },
        { row: blankPos.row, col: blankPos.col - 1 },
        { row: blankPos.row, col: blankPos.col + 1 }
      ];
      const validMoves = directions.filter(
        dir => dir.row >= 0 && dir.row < this.rows && dir.col >= 0 && dir.col < this.cols
      );
      const move = validMoves[Math.floor(Math.random() * validMoves.length)];
      if (move) {
        this.swapCells(blankPos.row, blankPos.col, move.row, move.col);
      }
    }
  }
}

检查胜利条件

每次移动后检查拼图是否已经完成（即所有格子按顺序排列）。

methods: {
  checkWin() {
    let expected = 1;
    for (let i = 0; i < this.rows; i++) {
      for (let j = 0; j < this.cols; j++) {
        if (i === this.rows - 1 && j === this.cols - 1) {
          if (this.puzzle[i][j] !== null) return false;
        } else {
          if (this.puzzle[i][j] !== expected) return false;
          expected++;
        }
      }
    }
    return true;
  },
  handleClick(row, col) {
    const blankPos = this.findBlankPosition();
    if (this.isAdjacent(row, col, blankPos.row, blankPos.col)) {
      this.swapCells(row, col, blankPos.row, blankPos.col);
      if (this.checkWin()) {
        alert('恭喜你完成了拼图！');
      }
    }
  }
}

通过以上步骤，可以实现一个基本的滑动拼图游戏。可以根据需要进一步扩展功能，例如增加难度级别、计时器或步数统计。

vue实现滑动拼图