JS实现扫雷游戏（源代码带注释）

最新推荐文章于 2024-05-03 11:47:20 发布

今天又有什么bug

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量2.9k

点赞数 4

分类专栏：前端学习【基础】文章标签： javascript 前端 html 游戏

本文链接：https://blog.csdn.net/weixin_46019681/article/details/127163863

版权

前端学习【基础】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

运行结果：

超级简单，下面直接下面贴上源代码，一共两个文件扫雷.html 和 saolei.js

扫雷.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷</title>
    <style>
         body {
            margin: 0;
         }
         #map {
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            /* 设置居中1 */
            /* position: absolute;
            left: calc(50% - 250px); */
            /* 设置居中2，与width搭配使用 */
            margin: 20px auto;
         }
          /* #map button  选择所有子孙*/
         /* 只选第一层 */
         #map>button {
            width: 50px;
            height: 50px;
            background-color: pink;
            color: aliceblue;
            float: left;
            border: 1px solid white;
         }
         #bulei {
            width: 100px;
            height: 50px;
            background-color:blueviolet;
            position: relative;
            left: calc(50% - 50px);
         }
         #center {
            width: 1200px;
            margin: 0 auto;
         }
         #tnum>span{
            width: 100px;
            /* margin: 10px auto; */
            position: relative;
            left: calc(50% - 50px);
            color: rgb(46, 95, 78);
         }
    </style>
</head>
<body>
   <div id="center">
      <div id="map">
      </div>
      <div id="tnum"><span>通过数✅：0</span></div>
      <button id="bulei" onclick="bulei()">Start</button>
      <!-- <button id="restart" onclick="restart()">Restart</button> -->
    </div>
      <!-- js文件应引入在body下方 -->
    <script src="./saolei.js"></script>
</body>
</html>

saolei.js

// 9 代表未点击
// 0-8 代表周围雷数
// * 代表雷
// 返回一个二维数组
function getMap (row,col){
    var mapArray = [];
    for( let hang = 1 ; hang <= row ; hang++){
        let smallArray = [];
        for( lie = 1 ; lie <= col ; lie++){
            smallArray.push("9")
        }
        mapArray.push(smallArray);
    }
    // console.log(mapArray);
    return mapArray;
}
var gameMap = getMap(10,10);// 初始化————生成一个10x10的还未布雷的地图
var tnum = 0; // 正确数。正确数 = 用户已点击的非炸弹方块数
var leinum = 0; // 雷数
//  当tnum=100-leinum 便可以判定用户通关

// 展示已经布雷的地图
function showMap(tempMapArr){
    var domStr = `` ;
    for(let i = 0; i <= tempMapArr.length-1 ; i++){
        for(let j = 0; j <= tempMapArr[i].length-1 ;j++){
            // 对于初始的方块我们都选择隐藏其真正的值
            if(tempMapArr[i][j]=="9" || tempMapArr[i][j]=="*"){     
                domStr += `<button onclick = "game(${i},${j})">🌈</button>`
            }else{  // 对于用户已经点击的值（即count已经被计算出来的方块 显示它的count），注意这里不含onclick，否则会重复计算tnum。
                domStr += `<button>${tempMapArr[i][j]}</button>`
            }
        }
    }
    //  将地图渲染上去
    document.getElementById('map').innerHTML = domStr
}
//布雷
function bulei() { 
    gameMap = getMap(10,10);// 先初始化一个地图
    tnum = 0; //  重置正确数
    document.getElementById("tnum").innerHTML = `<span>通过数✅：${tnum}</span>`;
    leinum = parseInt(Math.random() * 30);  // 随机生成一个雷数
    // console.log("leinum:"+leinum);
    for( let num = 0; num < leinum; num++){
        // 随机生成布雷的行、列 
        var leihang =   parseInt(Math.random() * 10); // Math.random() 0<..<1
        var leilie =   parseInt(Math.random() * 10);
        // 如果该点已有雷 就不要重复布雷了
        if(gameMap[leihang][leilie] == "*"){
            num-=1;
            continue;
        }else{
            gameMap[leihang][leilie] = "*"
        }
    }

    showMap(gameMap);
    
}

function game (nowHang,nowLie) {  
    //当前点击的坐标
    console.log(gameMap[nowHang][nowLie]);
    if(gameMap[nowHang][nowLie] == "*"){
        gameover(gameMap);
        alert("游戏结束 ～");
    }else{
        var count = 0;
        for( let i = nowHang-1; i <= nowHang+1 ; i++){
            for( let j = nowLie-1 ; j <= nowLie+1 ; j++){
                if(0<=i && i<=9 && 0<=j && j<=9 && gameMap[i][j] == "*"){
                    count++;
                }
            }
        }
        gameMap[nowHang][nowLie]=count;
        tnum++;
        document.getElementById("tnum").innerHTML = `<span>通过数✅：${tnum}</span>`;
        showMap(gameMap);
        //雷全部排出来了
        if(tnum == 100-leinum){
            console.log("tnum:"+tnum);
            alert("🌟～～√ 恭喜通关 ～(^_^)😊💜")
            gameover(gameMap);
        } 
    }
}
// 游戏结束 展示地图
function gameover(tempMapArr) { 
    var domStr = `` ;
    for(let i = 0; i <= tempMapArr.length-1 ; i++){
        for(let j = 0; j <= tempMapArr[i].length-1 ;j++){
            if( tempMapArr[i][j]=="*"){     
                domStr += `<button onclick = "game(${i},${j})" style="background-color:rgb(191, 162, 218)">💣</button>`
            }else{
                domStr += `<button>🌈</button>`
            }
        }
    }
    document.getElementById('map').innerHTML = domStr;
    document.getElementById("tnum").innerHTML = `<span>游戏结束！</span>`;
 }

以上只是简单的扫雷实现，大家可以在这基础上进行进一步的拓展～🌟