uni app 扫雷

闲来无聊。做个扫雷玩玩吧，点击打开，长按标记，标记的点击两次或长按取消标记。所有打开结束

<template><view class="page_main"><view class="add_button" style="width: 100vw;  margin-bottom: 20rpx; background-color: #efefef; color: #000;">{{minesize}}</view><scroll-view class="scroll_v" scroll-y="true"><view><view class="czqy_mian"><view v-for="(row,rowindex) in datalist" :key="rowindex" class="row_main_v"><view v-for="(item,index) in row" :key="index"><view @click="hz_click(rowindex,index)" @longpress="long_click(rowindex,index)"><view class="" v-if="isover"><view class="fangge_main_v":style="{ width: fgsize + 'rpx', height: fgsize + 'rpx',background : '#fff' }"><view class="" v-if="item.isbj"> <!-- 标记了 --><view class="item_vie" v-if="item.ismine":style="{ width: fgsize + 'rpx', height: fgsize + 'rpx',background : '#f0f' }"><!-- 标记了 是雷 -->💣</view><view class="item_vie" v-else:style="{ width: fgsize + 'rpx', height: fgsize + 'rpx',background : '#f00' }"><!-- 标记了 不是雷 -->🚩</view></view><view class="item_vie" v-else-if="item.ismine"><!-- 没标记 是雷 -->💣</view><view class="item_vie" v-else-if="item.value":style="{ width: fgsize + 'rpx', height: fgsize + 'rpx',background : '#fff' }"><!-- 没标记 不是雷 有值 -->{{item.value}}</view><view class="" v-else:style="{ width: fgsize + 'rpx', height: fgsize + 'rpx',background : '#fff' }"><!-- 没标记 不是雷 没有值 --></view></view></view><view class="" v-else><view v-if="item.isopen" class="fangge_main_v":style="{ width: fgsize + 'rpx', height: fgsize + 'rpx',background : '#fff' }"><!-- 点开 --><view class="item_vie" v-if="item.isblast"><!-- 爆炸了 -->💣</view><view v-else class="item_vie"><!-- 没爆炸 -->{{item.value==0?'':item.value}}</view></view><view v-else class="fangge_main_v":style="{ width: fgsize + 'rpx', height: fgsize + 'rpx'  }"><!-- 没点开 --><view class="item_vie" v-if="item.isbj">🚩</view></view></view></view></view></view></view></view></scroll-view><view class="add_button_view"><view class="add_button" style="margin-left: 10rpx;" @click="di_click(0)">低</view><view class="add_button" style="margin-left: 10rpx;" @click="di_click(1)">中</view><view class="add_button" style="margin-left: 10rpx;" @click="di_click(2)">高</view></view></view></template><script>export default {data() {return {datalist: [], //操作数据jibie: 0,jblist: [{row: 9,cols: 9,size: 10},{row: 16,cols: 16,size: 40},{row: 30,cols: 16,size: 99},],isover: false,minesize: 10,fgsize: 0,};},onReady() {this.init()},onShow() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},methods: {di_click: function(e) {this.jibie = ethis.init()},hz_click: function(row, cols) {if (this.datalist[row][cols].isbj) { //标记过的。点击两次取消标记this.datalist[row][cols].clickcount += 1if (this.datalist[row][cols].clickcount == 2) {this.datalist[row][cols].isbj = false}} else if (this.datalist[row][cols].ismine) { //如果是雷  结束 并打开所有盒子this.datalist[row][cols].isopen = truethis.datalist[row][cols].isblast = truethis.gameover(1)} else { //不是标记和雷 打开盒子    打开后有值 显示值 没值  计算片区this.datalist[row][cols].isopen = truethis.jsnotopen()if (this.datalist[row][cols].value == 0) { //打开的盒子没值  计算周边this.openaqq(row, cols)}}},long_click: function(row, cols) {if (!this.datalist[row][cols].isopen) {if (this.minesize >= 0 && this.minesize < this.jblist[this.jibie].row * this.jblist[this.jibie].cols) {if (this.datalist[row][cols].isbj) { //标记过的。点击两次取消标记this.datalist[row][cols].isbj = falsethis.minesize += 1} else {this.datalist[row][cols].isbj = truethis.minesize -= 1}}this.datalist[row][cols].clickcount = 0}this.jsnotopen()this.$forceUpdate()},/*** @param {Object} flag 1 点到雷   0  自动结束*/gameover: function(flag) {if (flag) {for (var i = 0; i < this.datalist.length; i++) {let arr = this.datalist[i]for (var j = 0; j < arr.length; j++) {arr[j].isopen = true}}}this.isover = truethis.$forceUpdate()},openaqq: function(row, cols) {let directions = [[0, 1],[0, -1],[1, 0],[-1, 0],[1, 1],[1, -1],[-1, 1],[-1, -1]]var count = 0for (var i = 0; i < directions.length; i++) {let lenx = directions[i][0] + rowlet leny = directions[i][1] + colsif (lenx >= 0 && leny >= 0 && lenx < this.jblist[this.jibie].row && leny < this.jblist[this.jibie].cols) {if (!this.datalist[lenx][leny].isopen) {if (!this.datalist[lenx][leny].ismine) {this.datalist[lenx][leny].isopen = truethis.jsnotopen()if (this.datalist[lenx][leny].value == 0) {this.openaqq(lenx, leny)}}}}}this.datalist[row][cols].isopen = truethis.jsnotopen()// return count},jisuanvalue: function(datalist, row, cols) {let directions = [[0, 1],[0, -1],[1, 0],[-1, 0],[1, 1],[1, -1],[-1, 1],[-1, -1]]var count = 0for (var i = 0; i < directions.length; i++) {let lenx = directions[i][0] + rowlet leny = directions[i][1] + colsif (lenx >= 0 && leny >= 0 && lenx < this.jblist[this.jibie].row && leny < this.jblist[this.jibie].cols) {if (datalist[lenx][leny].ismine) {count += 1}}}datalist[row][cols].value = count// return count},jsnotopen: function() {var count = 0for (var i = 0; i < this.datalist.length; i++) {var arr = this.datalist[i]for (var j = 0; j < arr.length; j++) {if (arr[j].isopen || arr[j].isbj) {count += 1}}}if (count == this.jblist[this.jibie].row * this.jblist[this.jibie].cols) {this.gameover(0)}},/*** 进入页面初始化数据*/init: function() {var array = []for (let row = 0; row < this.jblist[this.jibie].row * this.jblist[this.jibie].cols; row++) {if (row <= this.jblist[this.jibie].size) {array.push({ismine: 1,value: 0,id: row,isopen: false,isbj: false,isblast: false,clickcount: 0,isselect: false})} else {array.push({ismine: 0, //是否是雷 1是value: 0, //值id: row, //idisopen: false, //点开isbj: false, //标记isblast: false, //爆炸clickcount: 0,isselect: false})}}this.minesize = this.jblist[this.jibie].sizethis.fgsize = (640 / this.jblist[this.jibie].cols).toFixed(0)var datalist = this.shuffle(array)for (var i = 0; i < datalist.length; i++) {var arr = datalist[i]for (var j = 0; j < arr.length; j++) {this.jisuanvalue(datalist, i, j)}}this.datalist = JSON.parse(JSON.stringify(datalist))},convertToArray2D: function(array1D, rows, cols) {if (array1D.length !== rows * cols) {throw new Error('一维数组的长度必须与指定的行列数相乘的结果相等');}let array2D = [];for (let i = 0; i < array1D.length; i += cols) {array2D.push(array1D.slice(i, i + cols));}return array2D;},// 打乱数组的函数shuffle: function(array) {let currentIndex = array.length,temporaryValue, randomIndex;// 当还剩有元素未洗牌时while (0 !== currentIndex) {// 选取一个剩下的元素randomIndex = Math.floor(Math.random() * currentIndex);currentIndex -= 1;// 并与当前元素交换temporaryValue = array[currentIndex];array[currentIndex] = array[randomIndex];array[randomIndex] = temporaryValue;}return this.convertToArray2D(array, this.jblist[this.jibie].row, this.jblist[this.jibie].cols);},/*** 生成min 到 max 的随机数*/getRandomInt: function(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;}}};
</script><style scoped>.fangge_main_v {border: solid 1rpx #000;background-color: #afafaf;}.item_vie {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}.czqy_mian {width: 100vw;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}.row_main_v {width: 100vw;display: flex;flex-direction: row;justify-content: center;align-items: center;}.page_top {height: 100rpx;width: 100vw;}.scroll_v {height: 80vh;width: 100vw;}.page_main {background-color: #efefef;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;}.add_button_view {display: flex;/*row 横向  column 列表  */flex-direction: row;justify-content: center;align-items: center;text-align: center;height: 10vh;width: 100vw;background: #fff;border-top: solid 1rpx #efefef;position: fixed;bottom: 0;}.add_button {flex: 1;height: 88rpx;border: solid 2rpx #07a5a6;color: #fff;background: #07a5a6;font-size: 32rpx;border-radius: 10rpx;align-items: center;justify-content: center;display: flex;}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/294108.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入了解 Vue 3 中的 Transition 过渡动画

深入了解 Vue 3 中的 Transition 过渡动画

在本文中&#xff0c;我们将深入探讨 Vue 3 中实现 Transition 过渡动画的技术细节。过渡动画可以为用户界面增添平滑和生动的效果&#xff0c;提升用户体验。 首先新建一个基于uni-app框架为transition.vue的测试文件&#xff0c;在其中编写如下JavaScript、HTML和CSS代码&…
阅读更多...
CSS3 Transform变形理解与应用

CSS3 Transform变形理解与应用

Transform&#xff1a;对元素进行变形&#xff1b; Transition&#xff1a;对元素某个属性或多个属性的变化&#xff0c;进行控制&#xff08;时间等&#xff09;&#xff0c;类似flash的补间动画。但只有两个关键贞。开始&#xff0c;结束。 Animation&#xff1a;对元素某个属…
阅读更多...
vulhub中Apache solr XML 实体注入漏洞复现（CVE-2017-12629）

vulhub中Apache solr XML 实体注入漏洞复现（CVE-2017-12629）

Apache Solr 是一个开源的搜索服务器。Solr 使用 Java 语言开发&#xff0c;主要基于 HTTP 和 Apache Lucene 实现。原理大致是文档通过Http利用XML加到一个搜索集合中。查询该集合也是通过 http收到一个XML/JSON响应来实现。此次7.1.0之前版本总共爆出两个漏洞&#xff1a;XML…
阅读更多...
智慧安防监控EasyCVR视频调阅和设备录像回看无法自动播放的原因排查与解决

智慧安防监控EasyCVR视频调阅和设备录像回看无法自动播放的原因排查与解决

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…
阅读更多...
云计算迎变局：阿里云、腾讯云“各有千秋”

云计算迎变局：阿里云、腾讯云“各有千秋”

毋庸置疑&#xff0c;无论在什么时候什么行业&#xff0c;低价策略都是一柄利器。比如&#xff0c;在电商行业&#xff0c;除了拼多多将低价策略贯彻到底之外&#xff0c;淘宝、京东也将性价比作为发力重点&#xff0c;并通过补贴、秒杀等方式&#xff0c;再度强调自身的“价格…
阅读更多...
目标检测——工业安全生产环境违规使用手机的识别

目标检测——工业安全生产环境违规使用手机的识别

一、重要性及意义 首先&#xff0c;工业安全生产环境涉及到许多复杂的工艺和设备&#xff0c;这些设备和工艺往往需要高精度的操作和严格的监管。如果员工在生产过程中违规使用手机&#xff0c;不仅可能分散其注意力&#xff0c;降低工作效率&#xff0c;更可能因操作失误导致…
阅读更多...
TCP/IP 网络模型有哪几层？（计算机网络）

TCP/IP 网络模型有哪几层？（计算机网络）

应用层 为用户提供应用功能 传输层 负责为应用层提供网络支持 使用TCP和UDP 当传输层的数据包大小超过 MSS&#xff08;TCP 最大报文段长度&#xff09; &#xff0c;就要将数据包分块&#xff0c;这样即使中途有一个分块丢失或损坏了&#xff0c;只需要重新发送这一个分块…
阅读更多...
JavaEE SSM框架学习——MacOS Eclipse环境搭建

JavaEE SSM框架学习——MacOS Eclipse环境搭建

MacOS环境搭建 安装Homebrew Homebrew是一个包管理器&#xff0c;我们可以通过它来安装许多软件 首先打开Homebrew中文官网(brew.sh/zh-cn) 如图所示&#xff0c;复制下面那行命令到你的Macbook终端 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Ho…
阅读更多...
商场促销--策略模式

商场促销--策略模式

1.1 商场收银软件 package com.lhx.design.pattern.test;import java.util.Scanner;public class Test {public static void main(String[] args){System.out.println("**********************************************"); System.out.println("《大话设计模式…
阅读更多...
npm ERR! code CERT_HAS_EXPIRED 淘宝镜像失效

npm ERR! code CERT_HAS_EXPIRED 淘宝镜像失效

近期vue安装失败&#xff0c;具体如下&#xff1a; 1.先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2.certificate has expired npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.o…
阅读更多...
预处理指令——一些比较少见的概念

预处理指令——一些比较少见的概念

前言&#xff1a;预处理是我们的c语言源代码成为可执行程序的第一个步骤。而宏和预处理指令都是在这个阶段完成。本节内容就是关于宏和预处理指令相关知识点的解析。 目录 宏 预定义符号 #define定义常量 #define定义符号 #define定义宏 带副作用的宏参数 宏的替换规则…
阅读更多...
SMTP服务器搭建关键步骤？如何配置服务器？

SMTP服务器搭建关键步骤？如何配置服务器？

SMTP服务器搭建的注意事项&#xff1f;怎么快速搭建SMTP服务器&#xff1f; 电子邮件已经成为我们日常工作和生活中不可或缺的一部分。SMTP服务器作为电子邮件发送的核心组件&#xff0c;其搭建过程至关重要。下面&#xff0c;AokSend就来详细探讨一下SMTP服务器搭建的关键步骤…
阅读更多...
web学习笔记（五十）

web学习笔记（五十）

目录 1. nodemon 1.1 什么是nodemon 1.2 安装并使用Nodemon 2. Express 路由 2.1 路由的匹配过程 2.2 简单路由 2.3 模块化路由 2.4 注册路由模块 2.5 路由模块添加前缀 3. Express 中间件 3.1 中间件的格式 3.2 中间件的作用 3.3 局部生效的中间件 3.4 中间件…
阅读更多...
云计算面临的威胁

云计算面临的威胁

目录 一、概述 二、威胁建模分析 2.1 威胁建模的概念 2.2 威胁建模起到的作用 2.3 威胁建模的流程 2.3.1 威胁建模流程图 2.3.2 威胁建模流程内容 2.3.2.1 绘制数据流图 2.3.2.2 威胁识别与分析 2.3.2.2.1 STRIDE威胁分析方法论 2.3.2.3 制定消减措施 2.3.2.3.1 消减…
阅读更多...
SBCFormer：能够在单板计算机上以每秒1帧的速度进行全尺寸ImageNet分类的轻量级网络

SBCFormer：能够在单板计算机上以每秒1帧的速度进行全尺寸ImageNet分类的轻量级网络

文章目录 摘要1、引言2、 相关工作2.1、用于移动设备的卷积网络2.2、移动设备上的ViT和CNN-ViT混合模型2.3、评估指标 3、CNN-ViT 混合模型在低端CPU上的应用3.1、设计原则3.2、SBCFormer的整体设计3.3、SBCFormer块3.4、改进的注意力机制 4、实验结果4.1、实验设置4.2、ImageN…
阅读更多...
手机一键换ip地址，解锁网络自由

手机一键换ip地址，解锁网络自由

在数字化时代&#xff0c;手机已经成为我们生活中不可或缺的一部分。随着移动互联网的快速发展&#xff0c;手机用户对于网络安全和隐私保护的需求也日益增强。其中&#xff0c;IP地址作为手机在网络中的标识&#xff0c;扮演着重要的角色。有时&#xff0c;出于隐私保护或网络…
阅读更多...
【数据结构】顺序表的实现——动态分配

【数据结构】顺序表的实现——动态分配

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;数据结构 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…
阅读更多...
第23篇：使能异步复位D触发器

第23篇：使能异步复位D触发器

Q&#xff1a;在上篇的异步复位D触发器中添加一个使能信号来实现带使能功能的异步复位D触发器。 A&#xff1a;只要复位信号为高电平&#xff08;RST1)且CLK为时钟上升沿&#xff0c; 如果使能信号也为高电平&#xff08;EN1&#xff09;&#xff0c;输入数据才会被存储。 带…
阅读更多...
MFC（一）搭建空项目

MFC（一）搭建空项目

安装MFC支持库 创建空白桌面程序 项目相关设置 复制以下代码 // mfc.h #pragma once #include <afxwin.h>class MyApp : public CWinApp { public:virtual BOOL InitInstance(); };class MyFrame : public CFrameWnd { public:MyFrame();// 消息映射机制DECLARE_…
阅读更多...
高度不同的流体瀑布css实现方法

高度不同的流体瀑布css实现方法

商城商品列表 实现瀑布流展示&#xff0c;通过flex或grid实现会导致每行中的列高度一致&#xff0c;无法达到错落有致的感觉&#xff1b; 为此需要用到&#xff1a; CSS columns 属性 columns 属性是一个简写属性&#xff0c;用于设置列宽和列数。 CSS 语法 columns: column-wi…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023