Vue开发扫雷小游戏

规则分析

游戏区包括雷区、地雷计数器（位于左上角，记录剩余地雷数）和计时器（位于右上角，记录游戏时间），确定大小的矩形雷区中随机布置一定数量的地雷(初级为99个方块10个雷，中级为1616个方块40个雷，高级为1630个方块99个雷，自定义级别可以自己设定雷区大小和雷数，但是雷区大小不能超过2430)，玩家需要尽快找出雷区中的所有不是地雷的方块，而不许踩到地雷。

状态梳理

1. 未扫状态
2. 空状态
3. 周围有雷状态（1,2,3,4,5,6,7,8）
4. 雷爆炸状态
5. 标旗状态

伪代码

1. 创建行列变量row,column和地雷数mine
2. 通过变量生成row*column的二维数组，默认值全部设置为10
3. 随机放入mine个地雷，地雷标记为数字19
4. 放雷时，雷的八个方位的数值+1，若为19则不加
5. 循环数组渲染，大于等于10小于19的数字显示为未扫状态
6. 点击扫雷，把当前数字-10。如果值等于9，那么表里数组显示全部雷游戏结束；其他显示出来数字，0显示为空白
7. 当0时递归连锁周围的数字直到周围没有0，显示出来数字（如果为标旗那么不解锁）
8. 右键标旗，标旗逻辑即当前数字+10，取消标旗-10
9. 标旗时判断数组内29的个数等于雷数且19的数字为0，即全部标记出来雷了，游戏结束
10. 扫雷时未解锁的区域等于雷数，那么游戏结束

游戏时数组值状态

编码实现和效果

// 雷区行数和列数
const row = ref<number>(10)
const column = ref<number>(10)
const mine = ref<number>(10)
const mineBoard = ref<number[][]>([])
const gameState = ref<boolean>(false)
const colors = ref<string[]>(['#0000CC', '#009999', '#00FF99', '#663399', '#CC0099', '#FFFF99', '#CCCC33', '#FF0033'])
const timer = ref<number>(0)
// 初始化雷场
const initBoard = () => {
  mineBoard.value = []
  gameState.value = false
  endTimer()
  timer.value = 0
  for (let i = 0; i < row.value; i++) {
    let rows: number[] = []
    for (let j = 0; j < column.value; j++) {
      rows.push(10)
    }
    mineBoard.value.push(rows)
  }
  layMines()
}

// 根据设置个数随机埋雷
const layMines = () => {
  if (mine.value > row.value * column.value) {
    console.log('雷数太多了');
    alert('雷数太多放不下了')
    return
  }
  for (let i = 0; i < mine.value; i++) {
    randomLayMine()
  }
}
// 埋雷并生成雷周围的提示
const randomLayMine = () => {
  const c = parseInt((Math.random() * column.value).toString())
  const r = parseInt((Math.random() * row.value).toString())
  if (mineBoard.value[r][c] === 19) {
    randomLayMine()
  } else {
    // 设置地雷
    mineBoard.value[r][c] = 19
    buildTips(r - 1, c - 1)
    buildTips(r - 1, c)
    buildTips(r - 1, c + 1)
    buildTips(r, c - 1)
    buildTips(r, c + 1)
    buildTips(r + 1, c - 1)
    buildTips(r + 1, c)
    buildTips(r + 1, c + 1)
  }
}

// 生成周围地雷个数提示
const buildTips = (r: number, c: number) => {
  if (r > -1 && c > -1 && r < row.value && c < column.value && mineBoard.value[r][c] !== 19) {
    mineBoard.value[r][c]++
  }
}
// 进行扫雷
const clearanceMine = (itm: number, r: number, c: number) => {
  if (gameState.value) {
    return
  }

  if (timer.value === 0) {
    beginTimer()
  }
  if (itm > 19) {
    mineBoard.value[r][c] -= 10
  }
  if (itm < 9) {
    return
  } else if (itm === 10) {
    chain(r, c)
  } else if (itm > 9 && itm < 19) {
    // 扫雷
    mineBoard.value[r][c] -= 10
  } else if (itm === 19) {
    for (let i = 0; i < row.value; i++) {
      for (let j = 0; j < column.value; j++) {
        if (mineBoard.value[i][j] === 19) {
          mineBoard.value[i][j] = 9
        }
      }
    }
    gameState.value = true
    beginTimer()
    console.log('游戏结束');
  }
}

// 左键连锁空白区域
const chain = (r: number, c: number) => {
  if (r > -1 && c > -1 && r < row.value && c < column.value && mineBoard.value[r][c] !== 9 && mineBoard.value[r][c] < 19) {
    if (mineBoard.value[r][c] === 10) {
      mineBoard.value[r][c] -= 10
      chain(r - 1, c - 1)
      chain(r - 1, c)
      chain(r - 1, c + 1)
      chain(r, c - 1)
      chain(r, c + 1)
      chain(r + 1, c - 1)
      chain(r + 1, c)
      chain(r + 1, c + 1)
    } else if (mineBoard.value[r][c] > 10) {
      mineBoard.value[r][c] -= 10
    }
  }
}

// 右键标记或者取消标记
const markMine = (itm: number, r: number, c: number) => {
  if (timer.value === 0) {
    beginTimer()
  }
  // 已经扫出结果的无法再右键，游戏结束无法右键
  if (itm < 9 || gameState.value) {
    return
  }
  if (itm < 20) {
    mineBoard.value[r][c] += 10
  } else {
    mineBoard.value[r][c] -= 10
  }
  testGame()
}

const testGame = () => {
  let flag = 0
  let mark = 0
  let lock = 0
  for (let i = 0; i < row.value; i++) {
    for (let j = 0; j < column.value; j++) {
      //  未标记雷的个数
      if (mineBoard.value[i][j] === 19) {
        mark++
      }
      // 标记个数
      if (mineBoard.value[i][j] > 19) {
        flag++
      }
      if (mineBoard.value[i][j] > 9) {
        lock++
      }
    }
  }
  // 标记个数等于雷数，未扫出来的雷为0
  if (flag === mine.value && mark === 0) {
    console.log('扫雷完成，游戏结束');
    alert('恭喜过关')
    gameState.value = true
    endTimer()
  }
  if (lock === mine.value) {
    alert('恭喜过关')
    gameState.value = true
    endTimer()
  }
}
initBoard()

优化项

1. 使用canvas绘图来实现效果减少HTML引发的显示错乱