小游戏之扫雷（uniapp）

原创

已于 2023-03-13 13:49:16 修改 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2023-03-12 19:52:32 首次发布

本文介绍了如何使用uniapp开发一款H5版本的扫雷游戏，包括基本布局设计、游戏逻辑实现，如战场初始化、埋雷算法、计时器和赢/输判断。同时，提到了布局参考自微信小游戏，并讨论了可能使用Vue等其他框架的可能性。

前言

本次做的小游戏是经典的扫雷游戏，以前的老旧电脑上面会自带扫雷游戏，应该都玩过。以前玩这个的时候，基本上都是乱蒙，也不知道格子里出现的数字是啥意思，也没想着去查。自从后来入了这一行，才慢慢去了解一下，原来每个数字的意思，是数字周围一圈其他8个格子中所包含的雷数，知道这个才慢慢喜欢并上手这个小游戏。

这次我们就来手把手做一个H5版本的《扫雷》。因为用的是uniapp，所以可在小程序或者H5移动版食用，用uniapp主要也是布局样式啥的比较简单快速。后面再做小游戏，会考虑用vue或者‘御三家’去写。

一、基本布局

这里我使用的布局样式，是参考微信小游戏里面的扫雷，我感觉画面很舒服，就直接拿来参考了。

在这里插入图片描述

首先是头部的时间与雷数展示

<!-- 时间、雷数 -->
<view class="bomb-head flexItems boxtb">
	<view class="bomb-head-time flexCenter flex1">
		<view class="bomb-head-icon flexCenter">
			<u-icon name="clock" size="80" color="#999"></u-icon>
		</view>
		<view class="bomb-head-box">{
  
  {time}}</view>
	</view>
	<view class="bomb-head-number flexCenter flex1">
		<view class="bomb-head-icon flexCenter">
			<u-icon name="/static/image/home/index-bomb.png" size="70"></u-icon>
		</view>
		<view class="bomb-head-box">{
  
  {showBomb}}</view>
	</view>
</view>

其次是中间战场展示

<!-- 游戏区 -->
<view class="bomb-main flex1 flexCenter">
	<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
		<view class="bomb-main-box">
			<view class="bomb-tr flex" v-for="(item1, index1) in bombList" :key="index1">
				<view class="bomb-td" v-for="(item2, index2) in item1" :key="index2" @click="bindBlock(index1,index2)">
					<view class="bomb-td-box bomb-td-close" v-if="!item2.is_open">
						<u-icon name="/static/image/bomb/flag.png" size="44" v-show="item2.is_flag" />
					</view>
					<view class="bomb-td-box bomb-td-open" :class="{
    
    'bomb-td-boom' : item2.is_bomb}">
						<u-icon name="/static/image/home/index-bomb.png" size="50" v-if="item2.is_bomb" />
						<text v-else>{
  
  {item2.num > 0 ? item2.num : ''}}</text>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</view>

最后是底部操作功能展示

<!-- 插旗、翻开、等级 -->
<view class="bomb-foot" v-if="!is_end">
	<view class="bomb-foot-btn" :class="{
    
    'bomb-foot-btn-hover': bind == 0}" @click="bindBottom(0)">翻 开</view>
	<view class="bomb-foot-btn" :class="{
    
    'bomb-foot-btn-hover': bind == 1}" @click="bindBottom(1)">插 旗</view>
	<view class="bomb-foot-btn" :class="{
    
    'bomb-foot-btn-hover': bind == 2}" @click="bindBottom(2)">等 级</view>
</view>