微信小程序实现window经典的扫雷游戏-CSDN博客

本文链接：https://blog.csdn.net/LYan_Yan/article/details/124195355

本文介绍了如何使用JavaScript和微信小程序开发扫雷游戏。详细讲述了扫雷规则、项目创建、地图与雷的生成、雷数计算、长按标记、点击事件处理及输赢判断等步骤。通过这个项目，体验了编程带来的乐趣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、扫雷游戏规则是什么？
二、开发前准备
总结

前言

打开手机游戏列表发现了一款经典的扫雷游戏，在玩的过程中发现游戏逻辑应该不难，想着是不是能自己写写这个游戏，后来用了1天实现了整体游戏开发，于是有了这篇文章来总结整体的游戏开发思路。

一、扫雷游戏规则是什么？

1、游戏为在10*10或其它排序组合网格中找雷
2、网格中隐藏着一定数量的雷，点击到雷即为输
3、点击无雷的网格会显示其临近8个方向上的总雷数，若为0则临近8个方向上的网格也会自动显示雷数，以此类推，直到出现不为0的网格
4、长按网格可以标记网格为雷
5、找出所有的雷即为胜利

二、开发前准备

1.创建小程序项目

使用微信开发者工具创建一个小程序项目。推荐使用官方推荐模板(此游戏项目使用js来实现)

2.开始开发

2.1.实现网格地图

页面初始数据：

groundSize: [16, 16], // 地图大小
minePosition: [], // 保存雷的位置
secondInterval: 0, // 时间定时器
data: {
   
  second: 0, // 游戏时间
  mineCount: 24, // 雷总数
  markMineCount: 0, // 已标记雷数
  renderGridList: [], // 网格列表
},

此地图为16*16的地图，行列大小根据 groundSize 来，后续可以设置不同的地图大小。
游戏地图

地图wxml代码(具体样式自行规划)：

<view class="play-ground">
  <view class="play-ground__row" wx:for="{
   {renderGridList}}" wx:for-item="row" wx:key="index">
     <view class="play-ground__col {
   {col.showNum && col.mineNum === 0 ? 'play-ground__col--empty' : ''}}" wx:for="{
   {row}}" wx:for-item="col" wx:key="index" data-value="{
   {col.value}}" bindlongpress="setMineTag" bindtap="clearBox">
       <!-- 标记雷图标 -->
       <image wx:if="{
   {col.mineTag}}" class="play-ground__col-boom" src="../../static/image/mine/mine.png"></image>
       <!-- 点击到雷图标 -->
       <image wx:if="{
   {!col.mineTag && col.isBoom && col.isMine}}" class="play-ground__col-boom" src="../../static/image/mine/boom.png"></image>
       <!-- 周围雷数 -->
       <text wx:if="{
   {col.showNum && col.mineNum}}" class="play-ground__col-num play-ground__col-num--{
   {col.mineNum}}">{
   {
   col.mineNum}}</text>
     </view>
   </view>
</view>

renderGridList 渲染列表结构(二维数组)：

[
  [
    {
   
      isMine: false, // 是否为雷
      mineTag: false, // 手动添加是否是雷的标识
      isBoom: false, // 是否点击到了雷
      mineNum: 0, // 周围雷数
      showNum: false, // 是否显示雷数
      value: 0, // 等同于id
      position: [0, 0], // 标志在第几行第几列
    },
    ...
  ],
  ...
]

初始化网格方法：

initGrid() {
   
  const gridList = [];
   // 当前遍历gridList到第几个元素
   let currentNum = 0;
   // 当前遍历minePosition到第几个元素
   let currentMineIndex = 0;
   for (let i