(一) js + Vue 写扫雷

1 定义表格

<table id="table1" ><tr v-for="a2 in a1"><td v-for="a3 in a2" style="border: red solid 1px"><center>{{a3}}</center></td></tr>
</table>
<script>let a = [[], [], [], [], [], [], [], [], []];let l = 1;for (let i = 0; i < 9; i++) {for (let j = 0; j < 9; j++) {a[i][j] = l;l++;}}new Vue({el: "#table1",data: {a1: a,}})
</script>

2、添加无重复的随机数

<!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"><center>{{a3}}</center></td></tr>
</table><script>//定义数组 9 * 9let a = [[], [], [], [], [], [], [], [], []];let l = 1;let arr = [];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)}console.log(arr)new Vue({el: "#table1",data: {a1: a,}})
</script>
</body>
</html>

3、添加判断放到表格随机生成雷在表格上

<!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 = [];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)}console.log(arr)new Vue({el: "#table1",data: {a1: a,ar:arr}})
</script>
</body>
</html>

花开一千年,花落一千年,花叶永不见

(一) js + Vue 写扫雷相关推荐

使用vue写扫雷游戏
上班闲来没事做,,心血来潮.想用刚学的vue,写一个扫雷游戏..好了,直入正题. 第一步,先制作一个10x10的格子图..这个divcss就不说了..大家都会. 第二步,制造一个数组,用来生成随机雷区 ...
我用html+css+js+vue写了一个赛博朋克2077
闲来无事,想做个牛*点的个人博客,又不想太大众化于是乎诞生了创造一个2077的想法记得进入按 F11 开启全屏浏览欢迎来到夜之城http://zhangdarui.3vdo.club/ 看看截图 ...
vue.js中经典扫雷游戏的实现
可视化 (vue-defuse) An implementation of the classical minesweeper game in vue.js. vue.js中经典扫雷游戏的实现. Vi ...
Awesome Vue.js vue.js学习资源链接大全中文
策划列表相关的vue.js可畏的事资源官方资源外部资源工作门户社区会议播客官方的例子教程实例书项目采用vue.js 开源商业产品应用/网站互动体验企业使用组件& ...
用 vue 写小程序，基于 mpvue 框架重写 weui
mpvue-weui 前言上周美团开源了 mpvue 框架,他基于Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系.what,小程序可以用vue写了?简直有点不太敢确定, ...
用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录前言一.npm 二.npm package开发三.引用package 总结前言之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
用js来写一个478呼吸动画来做393的默想吧-用js来写一个478呼吸动画
title: 用js来写一个478呼吸动画来做393的默想吧 date: 2023-02-12 09:37:34.01 updated: 2023-02-23 17:38:15.804 url: ht ...
Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/ ** 具体实现 ** 在 script 标签加载 Hanzi Writer 只需将以下内容放入 ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
用 Node.js 手写一个 DNS 服务器
DNS 是实现域名到 IP 转换的网络协议,当访问网页的时候,浏览器首先会通过 DNS 协议把域名转换为 IP,然后再向这个 IP 发送 HTTP 请求. DNS 是我们整天在用的协议,不知道大家是否 ...

(一) js + Vue 写扫雷

(一) js + Vue 写扫雷

1 定义表格

2、添加无重复的随机数

3、添加判断放到表格随机生成雷在表格上

(一) js + Vue 写扫雷相关推荐

最新文章

热门文章

(一) js + Vue 写扫雷

(一) js + Vue 写扫雷

1 定义表格

2、添加无重复的随机数

3、添加 判断 放到表格 随机生成雷在表格上

(一) js + Vue 写扫雷相关推荐

最新文章

热门文章

3、添加判断放到表格随机生成雷在表格上