js实现扫雷游戏

最新推荐文章于 2022-05-19 00:33:47 发布

Zoey_dm

最新推荐文章于 2022-05-19 00:33:47 发布

阅读量252

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/Zoey_dm/article/details/102734517

版权

使用js实现扫雷游戏的制作

使用原始的js实现扫雷游戏的制作没有使用canvas

基本功能：

用户进入界面时启动计时功能
游戏难度设置
右键标记地雷，标记之后不能点击
显示剩余雷数（总的雷数减去插旗的数量）
自动连锁点开（当点开某个区块后，如果该区块的数字为 0，也就是九宫格内没有雷，那么将自动点开九宫格内的所有区块）

思路

地图的生成：采用二维数组的形式，用户点击开始界面自动生成一个初始状态全为0的二维数组
地雷的随机生成：直接调用函数库Math 随机 map[x][x]，设地雷为9，利用双层for循环嵌套
将地雷旁边的数字0加1，例如
[
[0, 9, 0, 0],
[0, 0, 9, 0],
[9, 0, 9, 0],
[0, 9, 0, 0]
]
转换为
[
[1, 9, 2, 1],
[2, 4, 9, 2],
[9, 4, 9, 2],
[2, 9, 2, 1]
]

下面将给出js代码

生成一张雷图

var mineSweepingMap = function (r, c, num) {
   
    var map = []
    // 给行数，生成一个 1 维数组
    var row = function (r) {
   
        for (var i = 0; i < r; i++) {
   
            map[i] = new Array()
        }
    }
    // 给列数，生成一个 2 维数组
    var column = function (col) {
   
        for (var i = 0; i < map.length; i++) {
   
            for (var j = 0; j < col; j++) {
   
                map[i][j] = 0
            }
        }
    }
    // 给列数和行数生成空地图
    var blankMap = function (r, col) {
   
        row(r)
        column(col)
    }

    // 给出地雷数量让后随机写入地雷
    var writeInMine = function (num) {
   
        // 随机位置写入
        var randomLocation = function () {
   
            var x = Math.floor(Math.random() * r)
            var y = Math.floor(Math.random() * c)
            // console.log( ':', x, y);
            if (map[x][y] !== 9) {
   
                map[x][y] = 9
            } else {
   
                randomLocation()
            }
        }
        for (var i = 0; i < num; i++) {
   
            randomLocation()
        }
    }

    // 使用循环给雷的边上所有数 +1 , 已经是雷的除外
    var plus = function (array, x, y) {
   
        if (x >= 0 && x < r && y >= 0 && y < c) {
   
            if (array[x][y] !== 9) {
   
                array[x][y] += 1
            }
        }
    }
    var writeInHint = function () {
   
        for (var x = 0; x < map.length; x++) {
   
            for (var y = 0; y < map[0].length; y++) {
   
                if (map[x][y] === 9) {
   
                    // 上下 6 个
                    for (var i = -1; i < 2; i++) {
   
                        plus(map, x - 1, y + i)
                        plus(map, x + 1