当前位置：首页 > VUE

数字拼图vue实现

2026-01-18 15:31:00VUE

数字拼图游戏的基本原理

数字拼图通常由N×N的方格组成，其中包含1到N²-1的数字和一个空白格。玩家通过移动数字块与空白格交换位置，最终将所有数字按顺序排列完成拼图。

Vue实现的核心步骤

初始化游戏状态

使用Vue的data属性存储游戏状态，包括拼图数组、空白格位置和游戏尺寸。

data() {
  return {
    puzzle: [],         // 拼图数组
    emptyPos: { x: 0, y: 0 },  // 空白格坐标
    size: 3             // 默认3x3
  };
}

生成随机拼图

通过Fisher-Yates洗牌算法打乱初始有序数组，确保拼图有解。

数字拼图vue实现

methods: {
  shuffleArray() {
    const total = this.size * this.size - 1;
    let arr = Array.from({ length: total }, (_, i) => i + 1);
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    arr.push(0); // 0表示空白格
    this.puzzle = this.chunkArray(arr, this.size);
  },
  chunkArray(arr, chunkSize) {
    return Array.from({ length: chunkSize }, (_, i) =>
      arr.slice(i * chunkSize, (i + 1) * chunkSize)
    );
  }
}

处理玩家移动

监听点击事件，判断点击的数字块是否与空白格相邻，若相邻则交换位置。

handleClick(row, col) {
  const { x, y } = this.emptyPos;
  const isAdjacent = (Math.abs(row - x) === 1 && col === y) || 
                     (Math.abs(col - y) === 1 && row === x);
  if (isAdjacent) {
    [this.puzzle[x][y], this.puzzle[row][col]] = 
      [this.puzzle[row][col], this.puzzle[x][y]];
    this.emptyPos = { x: row, y: col };
    this.checkWin();
  }
}

胜利条件检测

遍历拼图数组，检查数字是否按顺序排列且空白格在末尾。

数字拼图vue实现

checkWin() {
  const flatPuzzle = this.puzzle.flat();
  for (let i = 0; i < flatPuzzle.length - 1; i++) {
    if (flatPuzzle[i] !== i + 1) return;
  }
  alert('Congratulations! You solved the puzzle!');
}

模板渲染

使用v-for动态渲染拼图格子，并通过CSS控制布局。

<template>
  <div class="puzzle-container">
    <div v-for="(row, i) in puzzle" :key="i" class="puzzle-row">
      <div 
        v-for="(num, j) in row" 
        :key="j" 
        class="puzzle-cell"
        @click="handleClick(i, j)"
      >
        {{ num !== 0 ? num : '' }}
      </div>
    </div>
  </div>
</template>

CSS样式

定义网格布局和交互效果。

.puzzle-container {
  display: inline-block;
  border: 2px solid #333;
}
.puzzle-row {
  display: flex;
}
.puzzle-cell {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  margin: 2px;
  cursor: pointer;
  font-size: 20px;
}
.puzzle-cell:hover {
  background-color: #ddd;
}