456主机测评
运行结果：
超级简单，下面直接下面贴上源代码，一共两个文件 扫雷.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>`; } 以上只是简单的扫雷实现，大家可以在这基础上进行进一步的拓展～🌟
- 海报
