(二) js + Vue 写扫雷

(一)js + Vue 写扫雷1 添加雷附近的计次就是说在雷的附近写上1 2 3 4 5等，在雷附近记录下来是序号几<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script rel="javascript"

彼岸锋

111137人浏览 · 2021-03-12 18:41:26

彼岸锋 · 2021-03-12 18:41:26 发布

(一) 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 * 9
    let 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 * 9
    let 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>
                    &nbsp;
                </font>
            </center>
        </td>
    </tr>
</table>

<script>
    //定义数组 9 * 9
    let 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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^