H5小游戏开发连载教程之扫雷游戏实现

接上篇教程：H5小游戏开发教程之页面基础布局的开发

很抱歉，让大家久等了，从上周开始，工作很忙，一直没时间写，在这期间，我也在思考是否有更好或更简单的实现方案，在不同的设备上都能有不错的体验；通过这篇教程，我为大家带来一个非常简单的扫雷游戏实现方案；原本打算用两篇文章的，由于过于简单，就用一篇文章搞定了；

我们先欣赏下本篇文章实现的游戏界面：

扫雷游戏界面

扫雷游戏界面

我想，Windows的扫雷游戏大家应该都玩过吧？其实，这个游戏是有成功诀窍的，它考察了你思考问题的能力；如果1个格子的数值是1，那么它的周围8个方向有且只有一个雷；同理，格子数值是2，它的周围8个方向有且只有2个雷；由于1个格子最多有8个相邻格子，所以1个格子周围最多包含8个雷；

现在，我们正式开始。首先，我们在src根目录创建一个文件：shared.js文件，这个文件用于定义所有游戏公用的变量及函数；我们在该文件中定义一个genArr函数；该函数非常简单，用于创建一个指定长度的数组并用指定的值填充；在我们的游戏教程中，会大量使用该函数生成用于遍历的数组；

export const genArr = (len, v) => Array(len).fill(v)

然后，在src/components/mine文件夹下创建一个文件game.js。我们首先用JS文档注释声明2个类型，并引入一些我们将要用到的函数；通过语义，大家应该能明白这2个类型中字段的含义吧？GameOptions类型中的rows是行数，cols是列数，mineCount是雷的数量；Block类型的num是格子的值，open是打开标识，flag是插旗标识，插旗是用于标记已确定了的雷，以防误点击；

/** * @typedef {{rows: number, cols: number, mineCount: number}} GameOptions 游戏选项 *  * @typedef {{num: number, open: boolean, flag: boolean}} Block 方格子 */import { computed, reactive } from 'vue'import { genArr } from '../../shared'

然后，我们导出一个匿名函数。大家切记：我们以下所有的JS代码全部写在该函数内部；

export default () => {}

然后，我们创建一个用于保存游戏状态的响应式对象

const state = reactive({    rows: 9, // 行数    cols: 9, // 列数    mineCount: 10, // 雷数量    /** @type {Block[][]} 存放格子的二维数组 */    blocks: [],    isOver: false, // 游戏结束    isFirstClick: true // 是否首次点击  })

然后，我们定义一个根据 格行列数生成二维数组阵列的函数，初始格子的值num全部设为0，open和flag属性都为false；

  /** @returns {Block[][]} */  const genBlocks = (rows, cols) => {    return genArr(rows).map(() => genArr(cols).map(() => ({ num: 0, open: false, flag: false })))  }

然后，我们定义一个获取格子对象的函数，由于我们很多地方需要获取格子对象，所以定义一个函数比较好；

const getBlock = (row, col) => (state.blocks[row] || [])[col]

扫雷游戏有一个原则就是，首次单击的格子不能是地雷，所以，我们必须在玩家首次点开一个格子后，再生成地雷分布图；我们生成地雷分布图的函数需要一个行列坐标，来确保该坐标一定不是地雷。如下是生成地雷分布图函数：

const genMap = (row, col) => {    const { blocks } = state    genArr(state.rows)      .reduce((t, _, i) => [...t, ...genArr(state.cols).map((_, j) => [i, j])], []) // 行列坐标构成的一维数组      .filter(_ => !(_[0] === row && _[1] === col)) // 过滤掉玩家首次单击的坐标      .sort(() => Math.random() - .5) // 对坐标随机排序      .slice(0, state.mineCount) // 根据雷的数量对数组切片      .forEach(_ => {        blocks[_[0]][_[1]].num = 9 // 遍历坐标数组，将对应坐标的格子对象的值设置为9，9代表雷      })    // 如下遍历用于更新每个非雷的格子周围雷的数量，num的值就是雷的数量    blocks.forEach((a, i) => {      a.forEach((b, j) => {        if (b.num < 9) {          b.num = [            getBlock(i - 1, j - 1),            getBlock(i - 1, j),            getBlock(i - 1, j + 1),            getBlock(i, j + 1),            getBlock(i + 1, j + 1),            getBlock(i + 1, j),            getBlock(i + 1, j -1),            getBlock(i, j - 1)          ].filter(_ => _ && _.num > 8).length        }      })    })  }

当玩家点开一个格子后，如果该格子的值是0，那么我们需要深度递归遍历，将相邻的值为0和1的格子全部自动打开；如下是自动打开格子的函数定义：

const openBlocks = (row, col) => {    ;[      [row - 1, col],      [row, col + 1],      [row + 1, col],      [row, col - 1]    ].forEach(coords => {      const block = getBlock(...coords) // es6参数展开      if (block && !block.open && !block.flag) { // 如果格子存在并且没被打开且没被插旗        if (block.num < 2) { // 如果格子值为0和1，将格子打开          block.open = true        }        if (block.num < 1) { // 如果值为0，进行深度递归遍历          openBlocks(...coords)        }      }    })  }

当玩家点击的格子值为9时，我们需要打开所有的地雷，并结束游戏；如下是自动打开所有地雷的函数：

const openMineBlocks = () => {    state.blocks.forEach(a => {      a.forEach(b => {        if (b.num > 8) {          b.open = true        }      })    })  }

当玩家打开了所有不是雷的格子后，我们需要结束游戏，如下是用于判断是否已完成挑战的函数：

const isFinish = () => {    return state.blocks.every(a => a.filter(b => b.num < 9).every(b => b.open))  }

我们需要一个函数，用于开始新游戏，该函数用于对游戏状态进行重置或更新，并启动游戏；如下是开始游戏函数定义：

/** @param {GameOptions} options */  const start = (options = {}) => {    Object.keys(options).forEach(key => {      if (options[key]) {        state[key] = options[key]      }    })    state.isOver = false    state.isFirstClick = true    state.blocks = genBlocks(state.rows, state.cols)  }

我们需要一个用于处理格子单击事件的函数。

const onBlockClick = (row, col) => {    const block = getBlock(row, col)    if (state.isOver || block.flag || block.open) return // 如果游戏结束或格子插了旗或格子已打开，直接返回    block.open = true    if (state.isFirstClick) { // 如果是首次单击格子，那么生成地雷分布图      state.isFirstClick = false      genMap(row, col)    }    if (block.num > 8) { // 如果该格子是地雷，结束游戏并自动炸开所有的地雷      state.isOver = true      openMineBlocks()      return setTimeout(() => confirm('挑战失败！是否重新开始？') && start(), 100)    } else if (block.num < 1) {      openBlocks(row, col) // 使用深度递归遍历，打开值为0和1的相邻格子    }    // 如果挑战成功，那么给玩家2个选择：挑战更高难度或重新挑战该难度    isFinish() && setTimeout(() => confirm('挑战成功！是否挑战更高难度？')      ? start({ rows: state.rows + 1, mineCount: state.mineCount + state.cols })      : start(), 100)  }

我们需要一个用于处理格子上下文菜单的函数，该函数用于插旗和移除旗之间切换。

/** @param {PointerEvent} evt */  const onBlockContextmenu = (row, col, evt) => {    evt.preventDefault()    if (state.isOver) return    const block = getBlock(row, col)    if (!block.open) {      block.flag = !block.flag    }  }

如下是3个计算属性定义，分别用于统计插旗数量，打开的格子数量，未打开的格子数量。

const flagCount = computed(() => {    return state.blocks.reduce((t, a) => t + a.filter(_ => _.flag).length, 0)  })  const openCount = computed(() => {    return state.blocks.reduce((t, a) => t + a.filter(_ => _.open).length, 0)  })  const unopenCount = computed(() => state.rows * state.cols - openCount.value)

最后，我们在导出的匿名函数的底部返回组件中使用到的变量和函数。

return { state, flagCount, openCount, unopenCount, start, onBlockClick, onBlockContextmenu }

如下是
src/components/mine/Index.vue文件源码，我们使用table承载游戏界面；我认为table很适合二维数组数据的可视化；

<template>  <div :class="cls">    <header :class="`${cls}_header`">      <ul>        <li>           格布局：<b class="blue">{{ state.rows }}×{{ state.cols }}</b>        </li>        <li>          雷数量：<b class="red">{{ state.mineCount }}</b>        </li>        <li>          插旗数量：<b class="green">{{ flagCount }}</b>        </li>        <li>          已打开数量：<b class="green">{{ openCount }}</b>        </li>        <li>          未打开数量：<b class="blue">{{ unopenCount }}</b>        </li>      </ul>      <button class="btn" @click="start">新游戏</button>    </header>    <table :class="`${cls}_table`">      <tr v-for="(a, i) in state.blocks" :key="i">        <td v-for="(b, j) in a" :key="j">          <div v-if="b.open" :class="`${cls}_block is-open`">            <img class="back" src="./img/back.png">            <span v-if="b.num > 8" :class="`${cls}_mine`"></span>            <span v-else-if="b.num > 0" :class="[`${cls}_num`, getNumCls(b.num)]">{{ b.num }}</span>          </div>          <div v-else :class="`${cls}_block`" @click="onBlockClick(i, j)" @contextmenu="onBlockContextmenu(i, j, $event)">            <img class="back" src="./img/front.png">            <span v-if="b.flag" :class="`${cls}_flag`"></span>          </div>        </td>      </tr>    </table>  </div></template><script setup>import useGame from './game'const { state, flagCount, openCount, unopenCount, start, onBlockClick, onBlockContextmenu } = useGame()start()const cls = 'com-mine'const getNumCls = num => num > 3 ? 'red' : num > 2 ? 'yellow' : num > 1 ? 'blue' : 'white'</script><style lang="less">.com-mine {  &_header {    background-color: #eceff1;    margin-bottom: .5em;    border-radius: 4px;    padding: .8em;    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);    display: flex;    align-items: flex-end;    ul {      flex: 1;      width: 0;      li {        display: inline-block;        margin: .3em 1em .3em 0;      }    }  }  &_block {    position: relative;    &:not(.is-open) {      cursor: pointer;    }    .back {      display: block;      width: 100%;    }  }  &_num, &_flag, &_mine {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;  }  &_num {    display: flex;    align-items: center;    justify-content: center;    font-size: 16px;  }  &_flag {    background: url("./img/flag-color.png") no-repeat center center;    background-size: 60%;  }  &_mine {    background: url("./img/bomb-color.png") no-repeat center center;    background-size: 30%;  }  table {    border-radius: 4px;    padding: 1px;    background-color: #b0bec5;  }}</style>

如下是本篇教程中用到的几张图片，由于是在 上找的，担心有版权问题，仅提供截图，就不放到文章里面了，大家可以用自己的图片替代，将图片放到src/components/mine/img文件夹中；其实这个不是重点，重点是实现原理。

感谢阅读！以上就是本篇教程的全部内容，童鞋们都理解了吗？我感觉扫雷游戏的实现非常简单，几乎没什么难度，童鞋们应该都能理解吧？如果还有疑问，可以问我；

上一篇：H5小游戏开发教程之页面基础布局的开发