手机版 欢迎访问个人测试3643(www.yoweidao.com)网站

当前位置: 主页 > 职场>不看后悔L游戏开发方案┐H5小游戏开发连载教程之扫雷游戏实现「含源码」

不看后悔L游戏开发方案┐H5小游戏开发连载教程之扫雷游戏实现「含源码」

时间:2023-04-10 00:48|来源:杨舒南|作者:杨舒南|点击:

接上篇教程: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小游戏开发教程之页面基础布局的开发

编辑推荐

Copyright © 2002-2022 个人测试3643 版权所有 Powered by EyouCms 蜀ICP备2023007363号-1