(二) js + Vue 写扫雷

Love The Way You Lie 2022-11-07 14:37 4阅读 0赞

# (一) 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>
                         
                    </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>

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