不看后悔L游戏开发方案┐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小游戏开发教程之页面基础布局的开发