快捷導(dǎo)航

基于vue編寫一個月餅連連看游戲

更新時間：2023年09月15日 11:40:50 作者：冰鎮(zhèn)白干

中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個簡單的連連看游戲,連連看大家一定都玩過吧,通過消除相同的圖案來清理棋盤,小編將一步步引導(dǎo)大家完成整個游戲的制作過程,讓我們開始吧,一起為中秋節(jié)增添一些互動和娛樂

前言

中秋節(jié)快要到啦，我們一起用Vue創(chuàng)建一個簡單的連連看游戲。

連連看大家一定都玩過吧，通過消除相同的圖案來清理棋盤。上面就是我們今天要做的效果圖，看上去也挺像那么回事，不過實現(xiàn)起來也是非常簡單。

我將一步步引導(dǎo)大家完成整個游戲的制作過程，讓我們開始吧，一起為中秋節(jié)增添一些互動和娛樂！

設(shè)計思路

在構(gòu)建連連看游戲之前，首先需要考慮游戲的設(shè)計思路。

游戲界面：我們將創(chuàng)建一個網(wǎng)格狀的游戲界面，每個格子上都有一個圖標(biāo)或者數(shù)字。
游戲邏輯：玩家可以點擊兩個相同的格子來連接它們，但是連接的路徑上下左右不能有障礙物
游戲結(jié)束：當(dāng)所有的格子都被連接后，游戲結(jié)束。

初始棋盤

<template>
  <div class="game-board">
    <!-- 棋盤網(wǎng)格 -->
    <div v-for="(row,rowIndex) in grid" :key="rowIndex" class="row">
      <div 
        v-for="(cell,colIndex) in row" 
        class="cell"
        :key="colIndex"
      >
        {{grid[rowIndex][colIndex]}}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const grid = ref<number[][]>([])
/**
 * 隨機生成grid
 */
const randomizeGrid = () => {
  const rows = 10
  const cols = 10
  for(let i = 0 ; i < rows ; i ++) {
    const row = []
    for(let j = 0 ; j < cols ; j ++) {
      row.push(Math.floor(Math.random() * 3 + 1))
    }
    grid.value.push(row)
  }
}
onMounted(() => {
  randomizeGrid()
})
</script>
<style scoped lang="less">
.game-board {
  background-color: palegoldenrod;
  background-size: contain;
  .row {
    display: flex;
    .cell {
      width: 60px;
      height: 60px;
      margin: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .3s;
    }
  }
}
</style>

這樣就生成了一個隨機棋盤，后續(xù)我們將數(shù)組換成對應(yīng)的圖片就可以達(dá)到效果。

但是上面的寫法是我前面寫的，后續(xù)發(fā)現(xiàn)一個問題，我們不能簡單的隨機1、2、3，我們要確保每種值都是成對存在的。為了實現(xiàn)這一點，可以采用以下步驟：

初始化一個存儲可用格子坐標(biāo)的數(shù)組 availableCells。
遍歷棋盤格子，并將每個格子的坐標(biāo)添加到 availableCells。
隨機選擇一個可用格子，為其分配一個隨機圖案值，然后從 availableCells 中移除該格子。
再次隨機選擇一個可用格子，并為其分配相同的圖案值。
重復(fù)步驟 3 和 4，直到生成了足夠的圖案對。
將這些圖案值填充到游戲棋盤中。

/**
 * 隨機生成grid，確保每一個值都是成對存在的
 */
const randomizeGrid = () => {
  const rows = 10;
  const cols = 10;
  const numPairs = (rows * cols) / 2; // 總共需要的值對數(shù)  
  const igrid:number[][] = Array(rows).fill(0).map(() => Array(cols).fill(0))
  const availableCells = []; // 存儲可用格子的坐標(biāo)
  // 初始化可用格子的坐標(biāo)數(shù)組
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      availableCells.push([i, j]);
    }
  }  
  // 隨機生成成對的圖案，并填充到grid中
  for (let pair = 1; pair <= numPairs; pair++) {
    // 隨機選擇一個可用格子
    const cellIndex = Math.floor(Math.random() * availableCells.length);
    const [row, col] = availableCells[cellIndex];
    // 隨機生成一個圖案
    const value = Math.floor(Math.random() * 4+ 1);
    igrid[row][col] = value;
    availableCells.splice(cellIndex, 1);
    // 隨機選擇一個可用格子，將相同圖案填充到第二個位置
    const secondCellIndex = Math.floor(Math.random() * availableCells.length);
    const [secondRow, secondCol] = availableCells[secondCellIndex];
    igrid[secondRow][secondCol] = value;
    // 從可用格子數(shù)組中移除已經(jīng)填充的格子
    availableCells.splice(secondCellIndex, 1);
  }
  grid.value = igrid
};

上面注釋已經(jīng)很清楚啦，如果大家有更好的方法歡迎在評論區(qū)交流！

點擊動作

上一個步驟中，我們已經(jīng)獲取到了每個格子的值?，F(xiàn)在我們寫一下選中邏輯，由于每次點擊都需要和上一次結(jié)果進行對比，就需要將上一個點擊位置存起來

現(xiàn)在我們要實現(xiàn)一下功能

const lastSelectedCell = ref<number[]>([])
const selectCell = (rowIndex: number, colIndex: number) => {
  // 上次選中了
  if(lastSelectedCell.value?.length) {
    if(canConnect(lastSelectedCell.value,[rowIndex,colIndex])) {
      console.log('可以連接~~');
      grid.value[lastSelectedCell.value[0]][lastSelectedCell.value[1]] = 0
      grid.value[rowIndex][colIndex] = 0
    }
    lastSelectedCell.value = []
  } else {
    lastSelectedCell.value = [rowIndex,colIndex]
  }
}
/**
 * 格子是否被選中
 */
const isCellSelected = (rowIndex: number, colIndex: number): boolean => {
  return lastSelectedCell.value[0] === rowIndex && lastSelectedCell.value[1] === colIndex;
};

isCellSelected是我們選中要配對的那個方格，為了是對它添加動畫方便。

點擊時有兩種情況：

正在選第一個，我們需要記錄次方格，為了下一次連接配對
選了第一個了，此時點擊選中第二個，判斷是否配對成功（配對成功的邏輯下一步介紹）

連接判定

連接判斷使用bfs來做

這里需要注意，判斷邏輯需要寫在for循環(huán)里面，因為需要配對的那個方格值一定不為0，也就是說目標(biāo)方格只要有值就到達(dá)不了

/**
 * 使用 BFS 檢查路徑是否通
 */
const directions = [
  [-1, 0], // 上
  [1, 0],  // 下
  [0, -1], // 左
  [0, 1],  // 右
];
const isPathConnected = (startCell: number[], endCell: number[]): boolean => {
  const visited = new Set<string>();
  const queue: number[][] = [startCell];
  while (queue.length) {
    const [row, col] = queue.shift()!;
    // 檢查四個方向的相鄰格子
    for (const [dx, dy] of directions) {
      const newRow = row + dx;
      const newCol = col + dy;
      const key = `${newRow}-${newCol}`;
      if(endCell[0] === newRow && endCell[1] === newCol) return true
      if (
        newRow >= 0 &&
        newRow < grid.value.length &&
        newCol >= 0 &&
        newCol < grid.value[0].length &&
        !visited.has(key) &&
        grid.value[newRow][newCol] === 0
      ) {
        queue.push([newRow, newCol]);
        visited.add(key);
      }
    }
  }
  return false; // 沒找到路徑
};

此時我們就可以點擊配對了，最簡單的版本也就完成了，貼一下完整代碼：

<template>
  <div class="game-board">
    <!-- 棋盤網(wǎng)格 -->
    <div v-for="(row,rowIndex) in grid" :key="rowIndex" class="row">
      <div 
        v-for="(cell,colIndex) in row" 
        class="cell"
        :class="{isSelected : isCellSelected(rowIndex,colIndex)}"
        :key="colIndex"
        @click="selectCell(rowIndex,colIndex)"
      >
        {{grid[rowIndex][colIndex]}}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const grid = ref<number[][]>([])
const lastSelectedCell = ref<number[]>([])
const selectCell = (rowIndex: number, colIndex: number) => {
  // 上次選中了
  if(lastSelectedCell.value?.length) {
    if(canConnect(lastSelectedCell.value,[rowIndex,colIndex])) {
      console.log('可以連接~~');
      grid.value[lastSelectedCell.value[0]][lastSelectedCell.value[1]] = 0
      grid.value[rowIndex][colIndex] = 0
    }
    lastSelectedCell.value = []
  } else {
    lastSelectedCell.value = [rowIndex,colIndex]
  }
}
/**
 * 格子是否被選中
 */
 const isCellSelected = (rowIndex: number, colIndex: number): boolean => {
  return lastSelectedCell.value[0] === rowIndex && lastSelectedCell.value[1] === colIndex;
};
/**
 * 檢查兩個格子是否可以連接
 */
 const canConnect = (cell1: number[],cell2: number[]): boolean => {
  // 點擊同一個格子
  if(cell1[0] === cell2[0] && cell1[1] === cell2[1]) {
    return false
  }
  // 是否值相同
  if(grid.value[cell1[0]][cell1[1]] !== grid.value[cell2[0]][cell2[1]]) {
    return false
  }
  // 路徑是否通
  return isPathConnected(cell1,cell2)
}
/**
 * 使用 BFS 檢查路徑是否通
 */
 const directions = [
  [-1, 0], // 上
  [1, 0],  // 下
  [0, -1], // 左
  [0, 1],  // 右
];
const isPathConnected = (startCell: number[], endCell: number[]): boolean => {
  const visited = new Set<string>();
  const queue: number[][] = [startCell];
  while (queue.length) {
    const [row, col] = queue.shift()!;
    // 檢查四個方向的相鄰格子
    for (const [dx, dy] of directions) {
      const newRow = row + dx;
      const newCol = col + dy;
      const key = `${newRow}-${newCol}`;
      if(endCell[0] === newRow && endCell[1] === newCol) return true
      if (
        newRow >= 0 &&
        newRow < grid.value.length &&
        newCol >= 0 &&
        newCol < grid.value[0].length &&
        !visited.has(key) &&
        grid.value[newRow][newCol] === 0
      ) {
        queue.push([newRow, newCol]);
        visited.add(key);
      }
    }
  }
  return false; // 沒找到路徑
};
/**
 * 隨機生成grid
 */
const randomizeGrid = () => {
  const rows = 10
  const cols = 10
  for(let i = 0 ; i < rows ; i ++) {
    const row = []
    for(let j = 0 ; j < cols ; j ++) {
      row.push(Math.floor(Math.random() * 3 + 1))
    }
    grid.value.push(row)
  }
}
onMounted(() => {
  randomizeGrid()
})
</script>
<style scoped lang="less">
.game-board {
  // width: 80vw;
  // height: 80vh;
  background-color: palegoldenrod;
  background-size: contain;
  .row {
    display: flex;
    .cell {
      width: 60px;
      height: 60px;
      margin: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .3s;
      background-color: aquamarine;
    }
  }
}
</style>

現(xiàn)在效果：