(一) 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 * 9
let 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 * 9
let 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>
花开一千年,花落一千年,花叶永不见