(一) js + Vue 写扫雷

Myth丶恋晨 2023-07-08 02:52 4阅读 0赞

# (一) js + Vue 写扫雷 #

## 1 定义表格 ##

## 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>

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