利用Vue.js制作一個拼圖華容道小游戲

更新時間：2022年04月08日 10:35:13 作者：沐華

這篇文章主要為大家詳細介紹了如何利用Vue.js編寫一個拼圖華容道游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

游戲介紹

先看看界面

這是一個拼圖游戲，可以自選難度和自選闖關圖片

游戲開始后根據不同難度，生成與所選主圖對應的不同張數的隨機順序的小圖，然后只要把亂序的小圖片還原成完整的圖片就闖關成功

游戲區(qū)域有一個空白位置，可以用鼠標點擊空白位相鄰的圖片完成替換，也就是移動，也可以用鍵盤上下左右操作

游戲好玩，可不要貪杯哦，學習也不能落下，不管什么游戲都一樣

這個雖然用到的技術很一般很簡單，多數還是普通的 JS，但是也花了不少時間，特別是圖片。確定整體風格，找背景圖、游戲框。也是前兩天假期，喊我女朋友幫忙找圖片，也找了很多圖片讓她幫忙參考，畢竟她的審美比我強，我就粗漢子

核心思路

游戲等級(level)，比如初級，等級數值定為3，游戲界面就是三行三列，中級等級數值為4，游戲界面就是四行四列，即當前等級的平方，就是小格子總數量
游戲開始后以格子總數量為最大值，來生成隨機數的數組 randomData，初級如：[3,1,7,2,4,8,6,5,9]，遍歷生成小圖片，最大數值為空白格子，就是9
并根據當前等級生成拼圖完成時的數據 finishData，初級如：123456789
點擊或鍵盤按鍵的時候將符合條件的，randomData 里的目標格子和空白格子對應的值，交換，然后自動更新視圖，完成移動
每走一步時，統(tǒng)計步數，并檢查 randomData().join('') == finishData，相等即拼圖完成

核心代碼

注意看注釋哦

html

以下就是拼圖區(qū)域全部html，根據狀態(tài) isStart 控制是否是處于游戲狀態(tài)

<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="getSmallImg(`${gameImg}/${level}/${item}.jpg`)"
      ></el-image>
    </div>
  </div>
</div>

getSmallImg 這個方法是用于動態(tài)引入圖片的，畢竟不是 webpack，沒有 require 那么方便

// 獲取當前游戲小圖片
export const getSmallImg = (path: string) => {
  return new URL(`../assets/images/${path}`, import.meta.url).href
}

games 類

js 部分主要是封裝了一個類，方便統(tǒng)一管理操作

// 拼圖類
class Puzzle implements IPuzzle {
  isStart = false  // 游戲狀態(tài)
  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(){}
}

生成隨機圖片數量

就是在點擊開始游戲的時候會執(zhí)行 getRandomData，生成隨機數數組，然后 DOM 部分就遍歷這個生成的隨機數數組，渲染切碎了的小圖片

// 生成小圖片數量數組
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]
}

移動圖片

接收一個參數，就是在遍歷隨機數數組 randomData 的時候，對應每個圖片的值，鼠標點擊的時候拿到這個值

// 移動圖片
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
    }
}

拼圖完成

思路是把當前亂序的 randomData 轉為字符串，和正序的 finishData 作對比，如果一樣了，就是拼圖完成了

// 檢查是否拼圖完成
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
}