微信小程序项目实例——扫雷_扫雷微信代码-CSDN博客

本文链接：https://blog.csdn.net/ws15168689087/article/details/129320227

文章介绍了许嵩演唱会的相关信息，并分享了四个微信小程序的开发实例，包括图片处理、画笔应用、印记制作和飞机大战游戏。重点讲解了一个扫雷小程序的项目，详细阐述了游戏介绍、项目结构和部分核心代码，提供了游戏玩法和项目下载链接，适合对小程序开发感兴趣的技术爱好者参考学习。

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

今日推荐💁‍♂️

2023许嵩演唱会即将到来🎤🎤🎤大家一起冲冲冲🏃‍♂️🏃‍♂️🏃‍♂️

🔮🔮🔮🔮🔮往期优质项目实例🔮🔮🔮🔮🔮
微信小程序项目实例——图片处理小工具
🔗 https://blog.csdn.net/ws15168689087/article/details/125356342
微信小程序项目实例——我有一支画笔（画画）
🔗 https://blog.csdn.net/ws15168689087/article/details/124967906
微信小程序项目实例——印记
🔗 https://blog.csdn.net/ws15168689087/article/details/124606436
微信小程序项目实例——飞机大战
🔗 https://blog.csdn.net/ws15168689087/article/details/123153607
微信小程序项目实例——狼人杀
🔗 https://blog.csdn.net/ws15168689087/article/details/123307880

微信小程序项目实例——图片处理小工具 🔗 https://blog.csdn.net/ws15168689087/article/details/125356342
微信小程序项目实例——我有一支画笔（画画） 🔗 https://blog.csdn.net/ws15168689087/article/details/124967906
微信小程序项目实例——印记 🔗 https://blog.csdn.net/ws15168689087/article/details/124606436
微信小程序项目实例——飞机大战 🔗 https://blog.csdn.net/ws15168689087/article/details/123153607
微信小程序项目实例——狼人杀 🔗 https://blog.csdn.net/ws15168689087/article/details/123307880

文章目录

🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

1️⃣ 项目介绍 👨‍🏫

🎃游戏介绍：
👉《扫雷》是一款大众类的益智小游戏，于1992年发行。游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输。

🎯PC端扫雷：

📑雷诀八条：
1️⃣基本定式不要忘，现场推理真够呛。
2️⃣鼠标点击不要快，稳定节奏把空开。
3️⃣顺手标雷不要惯，积累下来记录悬。
4️⃣无从下手不要愣，就近猜雷把心横。
5️⃣遇到猜雷不要怕，爆了脸上不留疤。
6️⃣猜雷猜错不要悔，哭天抢地也白费。
7️⃣碰上好局不要慌，紧盯局部慢扩张。
8️⃣痛失好局不要恨，既然有缘定有份。

⛳项目展示：
👉扫雷小程序借鉴经典的PC端扫雷
👉玩家可以自行设置格子数🟫和地雷数💣
👉单点是开启，长按为插旗🚩

🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡

2️⃣ 项目结构 👨‍💻

🎃项目目录：

🧑‍🚀核心代码：

<!--pages/game/game.wxml-->
<view class="page">
    <view class="section btns">
        <button bindtap="newGame">重新开始</button>
        <button bindtap="handleSetting">游戏设置</button>
    </view>
    <view class="section">
        <view wx:for="{{grids}}" class="grid">
            <view wx:for="{{item}}" class="grid_cell" style="height:{{height}}rpx;">
                <view bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindtap="handleClick" id="{{item}}" class="card {{cards[item].open?'open':''}}">
                    <view wx:if="{{cards[item].open}}">
                        <text wx:if="{{cards[item].boom}}" class="iconfont icon-zhadan-BOOM"></text>
                        <text wx:else>{{cards[item].num>0?cards[item].num:''}}</text>
                    </view>
                    <view wx:else>
                        <text wx:if="{{cards[item].flag}}" class="iconfont icon-qizhi" style="color:red"></text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

// pages/game/game.js
const app = getApp();
Page({
  data:{
    config: {
      x: 0,
      y: 0,
      n: 0
    },
    cards: [],
    grids: [],
    // arr: [],
    start: false,
    open: 0,
    touchStart:0,
    touchEnd:0,
    height: 0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
    this.setData({
      config:{
        x:app.globalData.config.x,
        y:app.globalData.config.y,
        n:app.globalData.config.n
      },
      height: 750/app.globalData.config.x      
    });
    this.newGame();
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  newGame(){
    const x = this.data.config.x;
    const y = this.data.config.y;
    const n = this.data.config.n;
    const cards = [];
    const grids = [];
    // const arr = [];
    
    for(let i=0; i<y; i++){
      grids.push([]);
      for(let j=0; j<x; j++){
        const index = i*x+j;
        cards.push({
          index:index,
          boom:false,
          num:0,
          open:false,
          flag:false
        });
        grids[i].push(index);
        // arr.push(index);
      }
    }

    this.setData({
      cards: cards,
      grids: grids,
      // arr: arr,
      start: false,
      open: x*y-n
    });
  },
  handleClick(e){
    const i = parseInt(e.currentTarget.id);
    console.log(i);

    // console.log(this.data.touchEnd);
    // console.log(this.data.touchStart);
    const touchTime = this.data.touchEnd-this.data.touchStart;
    // console.log(touchTime);
    if(touchTime>350){
      const cards = this.data.cards;
      cards[i].flag = true;
      this.setData({cards:cards});
    }else{
      !this.data.start && this.setBoom(i);
      this.handleOpen(i);
    }


  },
  handleTouchStart(e){
    this.setData({
      touchStart:e.timeStamp
    });
  },
  handleTouchEnd(e){
    this.setData({
      touchEnd:e.timeStamp
    });
  },
  handleOpen:function(i){
    // const i = e.currentTarget.id;
    // console.log(i);

    // !this.data.start && this.setBoom(i);
    // this.getNeighbor(i);

    const cards = this.data.cards;

    if(cards[i].open){
      // console.log('OPENED!!!!!!!!!!!!!!!');
      return;
    }else{
      cards[i].open = true;
      this.setData({
        cards:cards,
        open:--this.data.open
      });
      console.log(this.data.open);
      if(this.data.open==0){
        wx.showModal({
          title: 'YOU WIN!!!!!',
          showCancel: false,
          success: function(res) {
            if (res.confirm) {
              // console.log('用户点击确定')
              this.newGame();
            }
          }.bind(this)
        });
      }
    }

    if(cards[i].boom){
      // console.log('boom!!!!!!!!!!!!!!!');
      wx.showModal({
        title: 'GAME OVER',
        showCancel: false,
        success: function(res) {
          if (res.confirm) {
            // console.log('用户点击确定')
            this.newGame();
          }
        }.bind(this)
      });
    }else if(cards[i].num==0){
      const ns = this.getNeighbor(i);
      ns.forEach(function(item){
        this.handleOpen(item);
      }.bind(this));
    }



  },
  setBoom:function(j){
    const cards = this.data.cards;
    // const arr = this.data.arr;
    const num = this.data.config.n;
    const newArr = this.getNeighbor(j).concat(j);
    // arr.splice(j,1);
    // const arr = [...Array(cards.length).keys()];
    const arr = [];
    for (let index of Array(cards.length).keys()) {
      newArr.indexOf(index)==-1 && arr.push(index);
    }
    // console.log(newArr);
    // console.log(arr);

    for(let i=0; i<num; i++){
      const index = Math.floor(Math.random()*arr.length);
      cards[arr[index]].boom = true;
      newArr.push(arr[index]);
      arr.splice(index,1);
    }

    const newCards = cards.map(function(card,i){
      let n = 0;
      this.getNeighbor(i).forEach(function(neighbor){
        cards[neighbor].boom && n++;
      });
      card.num = n;
      return card;
    }.bind(this));



    this.setData({
      arr:arr.concat(newArr),
      cards:newCards,
      start: true
    });
  },
  getNeighbor:function(i){
    const x = this.data.config.x;
    const y = this.data.config.y;
    // const arr = [i-x-1,i-x,i-x+1,i-1,i+1,i+x-1,i+x,i+x+1];
    const arr = [];

    !(i<x||i%x==0) && arr.push(i-x-1);
    !(i<x) && arr.push(i-x);
    !(i<x||i%x==(x-1)) && arr.push(i-x+1);
    !(i%x==0) && arr.push(i-1);
    // arr.push(i);
    !(i%x==(x-1)) && arr.push(i+1);
    !(i>=x*(y-1)||i%x==0) && arr.push(i+x-1);
    !(i>=x*(y-1)) && arr.push(i+x);
    !(i>=x*(y-1)||i%x==(x-1)) && arr.push(i+x+1);

    // console.log(arr);
    return arr
  },
  handleSetting:function(){
    wx.navigateTo({
      url: '../setting/setting'
    })
  }
})