当前位置： 首页 > article >正文

微信小程序项目实例——扫雷

article 2025/1/11 1:41:27

今日推荐💁‍♂️

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

文章目录

    • 今日推荐💁‍♂️
    • 1️⃣ 项目介绍 👨‍🏫
    • 2️⃣ 项目结构 👨‍💻
    • 3️⃣ 项目展示 👨‍🎨
    • 4️⃣ 结尾 👨‍🎓

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

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'
    })
  }
})
🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈🙈

3️⃣ 项目展示 👨‍🎨

在这里插入图片描述

🧭🧭🧭🧭🧭🧭🧭🧭🧭🧭🧭

4️⃣ 结尾 👨‍🎓

具体的介绍就到这里了💭
扫雷小程序与PC经典的扫雷玩法一致🎰
有兴趣的同学可以继续研究🔎
代码放到下面链接里了👇
👉点击下载 扫雷小程序💣
在这里插入图片描述


http://www.kler.cn/a/1529.html

相关文章：

  • Effective C++读书笔记——item13（使用对象管理资源）
  • C++语言的面向对象编程
  • 【阅读】认知觉醒
  • 获取IP地区
  • 利用 NineData 实现 PostgreSQL 到 Kafka 的高效数据同步
  • Debian、Ubuntu 22.04和ubuntu 24.04国内镜像源(包括 docker 源)
  • Redis高级
  • 操作系统之内存
  • c++11_14学习之c++14新特性
  • 基础篇：09-Feign远程调用
  • C++线程池理解
  • 《Roller: Fast and Efficient Tensor Compilation for Deep Learning》
  • 对象的创建以及数组中常见的属性与方法
  • 训练自己的GPT2-Chinese模型
  • Android 进程间通信机制(三) 系统进程与应用进程通信
  • 【华为OD机试真题2023 JAVA】单核CPU任务调度
  • MySQL8 双主(主主)架构部署实战
  • GO语言--反射
  • 初识Linux
  • 机器学习---聚类算法
  • Keil5安装和使用小记
  • string的模拟实现
  • 第一次认真周赛总结
  • 【RabbitMQ笔记10】消息队列RabbitMQ之死信队列的介绍
  • 宝塔控制面板常用Linux命令大全
  • IntelliJIDEA 常用快捷键