利用Vue.js制作一个拼图华容道小游戏

<div class="stage">
  <div class="game-name" v-show="!isStart">华容道</div>
  <div class="content clearfix" v-show="isStart">
    <div
      v-for="item in randomData"
      :key="item"
      :class="`img${level}`"
      @click="handleMove(item)"
    >
      <el-image
        v-if="item != randomData.length"
        :src="https://www.atool.online/article/getSmallImg(`${gameImg}/${level}/${item}.jpg`)"
      ></el-image>
    </div>
  </div>
</div>

// 获取当前游戏小图片
export const getSmallImg = (path: string) => {
  return new URL(`../assets/images/${path}`, import.meta.url).href
}

// 拼图类
class Puzzle implements IPuzzle {
  isStart = false  // 游戏状态
  randomData: Array<number> = [] // 乱序的，对应当前游戏小图片张数的数组
  finishData = "" // 正序的，拼图完成时的排序，用来对比
  gameImg = ""  // 游戏主图
  level = 3 // 游戏等级
  step = 0 // 游戏步数
  constructor() {}
  // 初始化
  init({ gameImg, level }: IMode) {
    this.step = 0
    this.level = level
    this.gameImg = gameImg
    // 生成当前游戏随机数数组
    this.randomData = this.getRandomData()
    this.isStart = !this.isStart
    // 如果是开始游戏，就计算出拼图完成时的数据
    if (this.isStart) this.finishData = this.getFinishData()
  }
  // 移动图片
  move(idx: number) {}
  // 键盘事件
  onKeyDown(code: number){}
  // 检查是否拼图完成
  finish() {}
  // 生成小图片数量数组
  getRandomData(){}
}

// 生成小图片数量数组
getRandomData() {
    // 随机数集合
    let randomArr = []
    // 根据游戏等级生成最大值，减1是因为最大值保留作空白位放最后
    let max = Math.pow(this.level, 2) - 1
    while (randomArr.length < max) {
      // 生成一个最大值范围内的随机数
      let random = Math.floor(Math.random() * max) + 1
      if (randomArr.indexOf(random) == -1) {
        // 没有重复的就添加
        randomArr.push(random)
      }
    }
    randomArr.push(max + 1) // 添加最大数字作为最后的空白位
    return randomArr // 如：[3, 1, 7, 2, 4, 8, 6, 5, 9]
}

// 移动图片
move(idx: number) {
    let level = this.level
    let target = this.randomData.indexOf(idx) // 当前点击位置下标
    let space = this.randomData.indexOf(Math.pow(level, 2)) // 空白位置下标

    // 过滤一下，不然空白位置在最左边时点击右边上一个数字时也能实现交换
    // 以及空白位置在最右边点击左边下一个数字时也能实现交换
    let condition =
      (space % level == 0 && target % level == level - 1) ||
      (space % level == level - 1 && target % level == 0)
      
    // 如果能交换
    if (!condition) {
      // 并且点击目标的，上或下或左或右是空白位，就交换位置
      if (
        target == space - level ||
        target == space + level ||
        target == space - 1 ||
        target == space + 1
      ) {
          this.change(space, target)
      }
    }
}
// 动起来
change(space: number, target: number) {
    // 空白位置替换成目标位置
    this.randomData[space] = this.randomData[target]
    // 目标位置为最大值，实现交换
    this.randomData[target] = Math.pow(this.level, 2)
    // 步数
    this.step += 1
    // 检查是否完成
    this.finish()
}

// 键盘事件
onKeydown(code: number) {
    let level = this.level
    // 目标位置下标
    let target
    // 空白位置下标
    let space = this.randomData.indexOf(Math.pow(level, 2))
    // 上下左右
    switch (code) {
      case 37:
        target = space + 1
        if (space % level == level - 1) return
        this.change(space, target)
        break
      case 38:
        target = space + level
        if (target > this.randomData.length - 1) return
        this.change(space, target)
        break
      case 39:
        target = space - 1
        if (space % level == 0) return
        this.change(space, target)
        break
      case 40:
        target = space - level
        if (target < 0) return
        this.change(space, target)
        break
    }
}

// 检查是否拼图完成
finish() {
    // 如：'312' == '123'
    if (this.randomData.join("") == this.finishData) {
      ElMessageBox.alert(`恭喜你，闯关成功，仅用${this.step}步`, "提示", {
        confirmButtonText: "OK",
        callback: (action: Action) => {
          this.randomData = []
          this.step = 0
          this.isStart = false
        },
      })
    }
}
// 根据不同难度生成拼图完成时的数据用来对比，判断是否完成
// 比如初级难度就是：123456789
getFinishData(): string {
    let str = ""
    for (let i = 1, len = Math.pow(this.level, 2); i <= len; i++) {
      str += i
    }
    return str
}