接上篇教程：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是插旗标识，插旗是用于标记已确定了的雷，以防误点击；
import { computed, reactive } from 'vue'
import { genArr } from '/shared'然后，我们导出一个匿名函数。大家切记：我们以下所有的JS代码全部写在该函数内部；
export default () => {}然后，我们创建一个用于保存游戏状态的响应式对象
const state = reactive({
rows: 9, // 行数
cols: 9, // 列数
mineCount: 10, // 雷数量
blocks: [],
isOver: false, // 游戏结束
isFirstClick: true // 是否首次点击
})然后，我们定义一个根据网格行列数生成二维数组阵列的函数，初始格子的值num全部设为0，open和flag属性都为false；
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))
}我们需要一个函数，用于开始新游戏，该函数用于对游戏状态进行重置或更新，并启动游戏；如下是开始游戏函数定义：
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)
}我们需要一个用于处理格子上下文菜单的函数，该函数用于插旗和移除旗之间切换。
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="http://www.esxun.cn/skin/esxun/image/lazy.gif" class="lazy" original="http://www.toutiao.com/a7080120407495410209/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="http://www.esxun.cn/skin/esxun/image/lazy.gif" class="lazy" original="http://www.toutiao.com/a7080120407495410209/img/front.png">
<span v-if="b.flag" :class="`${cls}_flag`"></span>
</div>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import useGame from 'http://www.toutiao.com/a7080120407495410209/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("http://www.toutiao.com/a7080120407495410209/img/flag-color.png") no-repeat center center;
background-size: 60%;
}
&_mine {
background: url("http://www.toutiao.com/a7080120407495410209/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小游戏开发教程之页面基础布局的开发
声明：易商讯尊重创作版权。本文信息搜集、整理自互联网，若有来源标记错误或侵犯您的合法权益，请联系我们。我们将及时纠正并删除相关讯息，非常感谢！
