(二) js + Vue 写扫雷
2024-04-11 22:56:08
(一) js + Vue 写扫雷
1 添加雷附近的计次
就是说在雷的附近写上1 2 3 4 5等，在雷附近记录下来是序号几
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<table id="table1"><tr v-for="a2 in a1"><td v-for="a3 in a2" style="border: red solid 1px;width: 25px;height: 25px"><center><font color="black" v-if="ar.indexOf(a3) != -1" style="background: red;">雷</font><font color="black" v-else>{{a3}}</font></center></td></tr>
</table>
<script>//定义数组 9 * 9let a = [[], [], [], [], [], [], [], [], []];let l = 1;let arr = [];let arr1 = [];for (let i = 0; i < 9; i++) {for (let j = 0; j < 9; j++) {a[i][j] = l;l++;}}//添加10个随机数，for (let i = 0; i < 10; i++) {Ran();}//添加随机数，function Ran() {do {Random = Math.floor(Math.random() * 81 + 1);} while (arr.indexOf(Random) != -1)arr.push(Random)//下arr1.push(Random + 9);//上arr1.push(Random - 9);//左if ((Random - 1) % 9 != 0) {arr1.push(Random - 1)}//右if (Random % 9 != 0) {arr1.push(Random + 1)}//下右if (Random % 9 != 0) {arr1.push(Random + 10)}//下左if ((Random - 1) % 9 != 0) {arr1.push(Random + 8)}// 上右if (Random % 9 != 0) {arr1.push(Random - 8)}// 上左if ((Random - 1) % 9 != 0) {arr1.push(Random - 10)}}console.log(arr1)new Vue({el: "#table1",data: {a1: a,ar:arr}})
</script>
</body>
</html>
2、添加 雷附近的数字的次数
如果两个雷附近的数字重叠在一起就让两个数字进行加减，如果附近有两个雷，就进行+1，以此类推
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<table id="table1"><tr v-for="a2 in a1"><td v-for="a3 in a2" style="border: red solid 1px;width: 25px;height: 25px"><center><font color="black" v-if="ar.indexOf(a3) != -1" style="background: red;">雷</font><font color="black" v-else>{{a3}}</font></center></td></tr>
</table><script>//定义数组 9 * 9let a = [[], [], [], [], [], [], [], [], []];let l = 1;let arr = [];let arr1 = [];for (let i = 0; i < 9; i++) {for (let j = 0; j < 9; j++) {a[i][j] = l;l++;}}//添加10个随机数，for (let i = 0; i < 10; i++) {Ran();}//添加随机数，function Ran() {do {Random = Math.floor(Math.random() * 81 + 1);} while (arr.indexOf(Random) != -1)arr.push(Random)//下arr1.push(Random + 9);//上arr1.push(Random - 9);//左if ((Random - 1) % 9 != 0) {arr1.push(Random - 1)}//右if (Random % 9 != 0) {arr1.push(Random + 1)}//下右if (Random % 9 != 0) {arr1.push(Random + 10)}//下左if ((Random - 1) % 9 != 0) {arr1.push(Random + 8)}// 上右if (Random % 9 != 0) {arr1.push(Random - 8)}// 上左if ((Random - 1) % 9 != 0) {arr1.push(Random - 10)}}// 判断雷旁边数字的个数let obj = {};arr1.sort();for (let i = 0; i < arr1.length;) {let count = 0;for (let j = i; j < arr1.length; j++) {if (arr1[i] == arr1[j]) {count++;}}if (arr1[i] < 1 || arr1[i] > 81) {} else {obj[arr1[i]] = count;}i += count;}console.log(obj)new Vue({el: "#table1",data: {a1: a,ar:arr}})
</script>
</body>
</html>
3、把刚刚所得到的计次放到vue并显示出来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<table id="table1"><tr v-for="a2 in a1"><td v-for="a3 in a2" style="border: red solid 1px;width: 25px;height: 25px"><center><font color="black" v-if="ar.indexOf(a3) != -1" style="background: red;">雷</font><font color="green" v-else-if="ar1.indexOf(a3) != -1" class="kl">{{re[a3]}}</font><font color="black" v-else> </font></center></td></tr>
</table><script>//定义数组 9 * 9let a = [[], [], [], [], [], [], [], [], []];let l = 1;let arr = [];let arr1 = [];for (let i = 0; i < 9; i++) {for (let j = 0; j < 9; j++) {a[i][j] = l;l++;}}//添加10个随机数，for (let i = 0; i < 10; i++) {Ran();}//添加随机数，function Ran() {do {Random = Math.floor(Math.random() * 81 + 1);} while (arr.indexOf(Random) != -1)arr.push(Random)//下arr1.push(Random + 9);//上arr1.push(Random - 9);//左if ((Random - 1) % 9 != 0) {arr1.push(Random - 1)}//右if (Random % 9 != 0) {arr1.push(Random + 1)}//下右if (Random % 9 != 0) {arr1.push(Random + 10)}//下左if ((Random - 1) % 9 != 0) {arr1.push(Random + 8)}// 上右if (Random % 9 != 0) {arr1.push(Random - 8)}// 上左if ((Random - 1) % 9 != 0) {arr1.push(Random - 10)}}// 判断雷旁边数字的个数let obj = {};arr1.sort();for (let i = 0; i < arr1.length;) {let count = 0;for (let j = i; j < arr1.length; j++) {if (arr1[i] == arr1[j]) {count++;}}if (arr1[i] < 1 || arr1[i] > 81) {} else {obj[arr1[i]] = count;}i += count;}console.log(obj)new Vue({el: "#table1",data: {a1: a,ar:arr,re: obj,ar1:arr1}})
</script>
</body>
</html>
花开一千年,花落一千年,花叶永不见
(二) js + Vue 写扫雷相关推荐
- 使用vue写扫雷游戏
上班闲来没事做,,心血来潮.想用刚学的vue,写一个扫雷游戏..好了,直入正题. 第一步,先制作一个10x10的格子图..这个divcss就不说了..大家都会. 第二步,制造一个数组,用来生成随机雷区 ...
- 我用html+css+js+vue写了一个赛博朋克2077
闲来无事,想做个牛*点的个人博客,又不想太大众化 于是乎诞生了创造一个2077的想法 记得进入按 F11 开启全屏浏览 欢迎来到夜之城http://zhangdarui.3vdo.club/ 看看截图 ...
- 用js制作一个扫雷游戏（vue版）
使用js来制作一个扫雷游戏,可以分为以下几个步骤 1.根据不同难度构建扫雷游戏区域: 2.在游戏区域中放置地雷: 3.处理点击事件: 4.处理游戏结束事件 1.根据不同难度构建扫雷游戏区域 创建一个二 ...
- vue.js中经典扫雷游戏的实现
可视化 (vue-defuse) An implementation of the classical minesweeper game in vue.js. vue.js中经典扫雷游戏的实现. Vi ...
- vue.js前端开发技术读书笔记二：vue数据绑定
文章目录 1.vue模板语法 2.响应式声明渲染机制 3.vue属性绑定 4.vue双向数据绑定 5.vue计算属性 6.计算属性与methods区别 7.vue生命周期 ❤️❤️❤️vue模板语法? ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
- 用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录 前言 一.npm 二.npm package开发 三.引用package 总结 前言 之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
- 用 Node.js 手写一个 DNS 服务器
DNS 是实现域名到 IP 转换的网络协议,当访问网页的时候,浏览器首先会通过 DNS 协议把域名转换为 IP,然后再向这个 IP 发送 HTTP 请求. DNS 是我们整天在用的协议,不知道大家是否 ...
- java二维数组扫雷,C语言二维数组实现扫雷游戏
#include //使用二维数组实现 扫雷 int main() { char ui[8][8]={ '+','+','+','+','+','+','+','+', '+','+','+','+' ...
最新文章
- c# 添加中文描述 给enum_理解C# 核心概念 – C# 程序集本地化
- 机器学习算法源码全解析（三）-范数规则化之核范数与规则项参数选择
- Android 抓包工具r0capture使用
- 思维导图xmind学习记录
- VC，一条会被鼠标移动的直线
- 为支持两个语言版本，我基于谷歌翻译API写了一款自动翻译的 webpack 插件
- C# - Environment类，获取桌面的路径
- MySQL关于时间设置的注意事项
- 解决window.open被拦截问题
- 数百万戴尔设备遭 BIOSConnect 代码执行漏洞影响
- L2-033 简单计算器 (25 分)-PAT 团体程序设计天梯赛 GPLT
- 实现ios常见菜单效果的思路
- python必背100源代码-100行Python代码实现自动抢火车票（附源码）
- 移动开发 Jetpack Compose 组件布局
- 数据挖掘近年来的研究方向、方法总结
- 黑苹果麦克风无法使用的问题（仅针对自己的配置）
- Cadence16.6版本下Pspice仿真的使用
- varchar2和varchar的区别
- Auto.js制作蓝奏软件库app
- Python 鸭子类型的理解