爱站程序员基地本文实例为大家分享了js实现扫雷游戏的具体代码，供大家参考，具体内容如下
游戏功能：
1、有四个难度
2、可以自定难度
1、html相关代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>扫雷</title><script src=\"js/mine.js\"></script><link rel=\"stylesheet\" href=\"./css/mine.css\" ></head><!--需求分析：1.游戏的区域：9*9的区域2.方格可以打开与标记左键打开，显示数字，为周围格子的地雷数，右键标记3.地雷地雷随机分布4.踩到地雷时，游戏结束所有的地雷显示出来5.连锁开大空方格6.剩余地雷数与计时器7.游戏胜利条件所有的方格除了地雷都被打开了，则游戏胜利一个方格所包含的信息：坐标 x y是否是一个地雷周围的地雷数 = 9二维数组中存储的是周围的地雷数--><body><div class=\"level\"><button type=\"button\" name=\"button\" class=\"choice-level\">自定义</button><button type=\"button\" name=\"button\" class=\"choice-level\">初级</button><button type=\"button\" name=\"button\" class=\"choice-level\">中级</button><button type=\"button\" name=\"button\" class=\"choice-level\">高级</button><button type=\"button\" name=\"button\" class=\"choice-level\">魔鬼级</button><button type=\"button\" name=\"button\" class=\"restart\">重新开始</button></div><div class=\"gameBox\"></div><div class=\"info\"><p>剩余雷数：<span class=\"residue\"></span></p><p>TIME：<span class=\"tick\"></span>S</p></div></body></html>
2、css样式
*{margin: 0;padding: 0;}.gameBox{margin-top: 30px;}body{font-size: 0;}ul{list-style: none;text-align: center;overflow: hidden;}.col{display: inline-block;width: 22px;height: 22px;line-height: 22px;background-color: rgba(32, 226, 255, 0.4);border: 1px solid rgb(129, 129, 129);font-size: 16px;margin: 1.5px;vertical-align: top;position: relative;}.col:hover{background-color: #0af;}.col span{cursor: default;}.hide{display: none;}.boom{background: url(\"../img/boom.svg\") no-repeat 2.5px 2px;background-size: 18px 18px;}.num-1{color: rgb(8, 153, 235);}.num-2{color: rgb(255, 45, 178);}.num-3{color:#16a085;}.num-4{color: #8e44ad;}.num-5{color: rgb(255, 167, 45);}.num-6{color: rgb(8, 126, 176);}.num-7{color: #e67e22;}.num-8{color: #c0392b;}.img-flag{width: 18px;height: 18px;position: absolute;top: 3px;left: 3px;}.level{margin-top: 30px;font-size: 20px;text-align: center;}.level button{padding: 5px 8px;background-color: rgb(67, 183, 189);border: none;outline: none;border-radius: 3px;cursor: pointer;color: #fff;}.level button:hover{background-color: rgb(23, 132, 138);}.info{margin-top: 30px;font-size: 16px;text-align: center;}.info p{display: inline-block;width: 130px;margin: 0 auto;}.info p span{color: rgb(67, 183, 189);}
3、js代码
window.onload = function() {var row = 4;var col = 4;var num = 1;// 判断踩雷之后不能胜利var gg = false;// 生成地图function mineMap(r, c, num) {// 定义行var map = [];//给行数，生成二维数组for (var i = 0; i < r; i++) {map[i] = new Array()}// 赋值for (var i = 0; i < map.length; i++) {for (var j = 0; j < c; j++) {// //周围的地雷数map[i][j] = 0;}}var plus = function(array, x, y) {if (x >= 0 && x < r && y >= 0 && y < c) {if (array[x][y] !== 9) {array[x][y]++}}}for (var i = 0; i < num; i++) {var x = Math.floor(Math.random() * r)var y = Math.floor(Math.random() * c)if (map[x][y] != 9) {map[x][y] = 9//上下6个 +1for (var j = -1; j < 2; j++) {//上三个plus(map, x - 1, y + j)//下三个plus(map, x + 1, y + j)}//左右2个 +1plus(map, x, y - 1)plus(map, x, y + 1)} else {//重新随机num++}}return map;}//先通过x轴数量写入ul，再讲过y轴的属性写入lifunction writeHtml(map) {// 获取盒子var gameBox = document.querySelector(\".gameBox\");// 声明空字符串，存放生成的ul、livar gridHTML = \"\";for (var i = 0; i < map.length; i++) {gridHTML += \'<ul class = \"row\" data-x=\"\' + i + \'\">\';//生成lifor (var j = 0; j < map[0].length; j++) {var m = map[i][j]if (m == 0) {m = \"\";}gridHTML += \"<li class=\'col\' data-y=\" + j + \">\" +\"<span class=\'hide num-\" + m + \"\'>\" + m + \"</span>\" +\"<img src=\'img/flag.svg\' class=\'img-flag hide\'>\" +\"</li>\"}gridHTML += \'</ul>\'gameBox.innerHTML = gridHTML;}}//给方格绑定事件， 点开数字 地雷 右键标记function show() {// 获取行ulvar rows = document.querySelectorAll(\".row\");// 遍历所有ulfor (var i = 0; i < rows.length; i++) {var element = rows[i];// 添加点击事件element.onclick = function(event) {// 当前点击元素var el = event.target;// 判断是否为liif (el.nodeName != \"LI\") {return;}//todo 判断是否被打开以及标记了if (el.style.background == \"white\" || !el.children[1].classList.contains(\"hide\")) {return;}// 获取span标签内容var mineNum = el.children[0].innerHTML;if (mineNum !== \"9\" && el.style.background !== \"white\") {// 空白连锁打开if (mineNum == \"\") {var x = parseInt(el.parentNode.dataset.x);var y = parseInt(el.dataset.y);showNoMine(x, y);}// li背景变白色；span显示el.style.background = \"white\";el.children[0].style.display = \"inline\";// 判断打开数量clearMineNum++;// 胜利函数judgeVictory()} else if (mineNum == \"9\") {// 清除胜利计时器clearInterval(stopTime);// li添加类名el.classList.add(\"boom\");alert(\"你真菜！\")gg = true;// 显示所有地雷,获取所有livar all = document.querySelectorAll(\".col\");// 放置所有的地雷var ff = [];var allnum = 0;// 遍历所有lifor (var i = 0; i < all.length; i++) {if (all[i].children[0].innerHTML == \"9\") {// 雷赋值给数组ff[allnum] = all[i];allnum++;}}// 设置一个计时器一个一个打开雷allnum = 0;var stop = setInterval(function() {ff[allnum].classList.add(\"boom\")allnum++;// 判断结束条件if (allnum == ff.length) {// 清除计时器clearInterval(stop);}}, 30)}}// 右键标记地雷element.oncontextmenu = function(event) {// 阻止右键菜单event.preventDefault();// 获取当前点击节点var el = event.target;// 判断是否是if (el.parentNode.nodeName == \"LI\") {el = el.parentNode;}if (el.nodeName != \"LI\") {return;}// 获取imgvar classList = el.children[1].classList;// 剩余雷数var residue = document.querySelector(\".residue\");var mineNum = parseInt(residue.innerHTML);// 如果没有旗子，没有被点开，可以插旗子if (classList.contains(\"hide\") && el.style.background != \"white\") {// 移除隐藏classList.remove(\"hide\");// 获取雷数mineNum--;} else if (el.style.background != \"white\") {classList.add(\"hide\");// 判断雷数if (mineNum < num) {mineNum++;}}// 剩余雷数residue.innerHTML = mineNum;}}}function judgeVictory() {//游戏胜利if (clearMineNum === (row * col - num)) {//做一个小动画var all = document.querySelectorAll(\".col\");var allNum = 0;var stop = setInterval(function() {var r = Math.floor(Math.random() * 256)var g = Math.floor(Math.random() * 256)var b = Math.floor(Math.random() * 256)all[allNum].style.background = \"rgba(\" + r + \",\" + g + \",\" + b + \",0.6)\";//将旗子和span都隐藏all[allNum].children[0].style.display = \"none\"all[allNum].children[1].style.display = \"none\"allNum++if (allNum === all.length) {clearInterval(stop)if (!gg) {alert(\"大吉大利，今晚吃鸡\")init(row, col, num)}}}, 20)}}//自动打开空格function showNoMine(x, y) {for (var i = -1; i <= 1; i++) {if (x + i >= 0 && x + i < row) {// 获取当前行var rowElement = document.querySelectorAll(\".row\")[x + i];for (var j = -1; j <= 1; j++) {if (y + j >= 0 && y + j < col) {//获取当前单元格var el = rowElement.children[y + j]//自动打开必须是未打开的方格if (el.style.background != \"white\") {el.style.background = \"white\"el.children[0].style.display = \"inline\"//打开方格数量+1clearMineNum++//判断游戏是否胜利judgeVictory(clearMineNum)if (el.children[0].innerText === \"\") {showNoMine(x + i, y + j)}}}}}// if (x + i >= 0 && x + i < row) {// // 获取当前行// var rowElement = document.querySelectorAll(\".row\")[x + i];// for (var j = -1; j <= 1; j++ && y + j < col) {// // 获取当前单元格// var el = rowElement.children[y + j];// if (el.style.background !== \"white\") {// el.style.background = \"white\";// el.children[0].style.display = \"inline\";// // 打开放格数量加1// clearMineNum++;// // 判断游戏是否胜利// judgeVictory(clearMineNum);// // 判断打开周围的放格周围是否为空// if (el.children[0].innerHTML === \"\") {// showNoMine(x + i, y + j)// }// }// }// }}}//初始化方法var stopTime;function init(row, col, num) {//数据初始化clearMineNum = 0gg = false;//清除原来的地图，生成新的地图var box = document.querySelector(\".gameBox\")box.innerHTML = \"\";var map = mineMap(row, col, num);// 新建地图writeHtml(map);show()//将雷数写入html中var residue = document.querySelector(\".residue\")residue.innerHTML = num// 获取计时var tick = document.querySelector(\".tick\");var i = 0;// 初始化tick.innerHTML = i;// 清除计时clearInterval(stopTime);// 时间计时器stopTime = setInterval(function() {tick.innerHTML = ++i}, 1000)}// 重置var restart = document.querySelector(\".restart\");restart.onclick = function(event) {//阻止冒泡event.stopPropagation()init(row, col, num)}// 自定义var level = document.querySelector(\".level\")level.onclick = function(event) {var el = event.target;switch (el.innerHTML) {case \"初级\":row = 9;col = 9;num = 10;init(row, col, num)break;case \"中级\":row = 16;col = 16;num = 40;init(row, col, num)break;case \"高级\":row = 16;col = 30;num = 479;init(row, col, num)break;case \"魔鬼级\":row = 40;col = 50;num = 300;init(row, col, num)break;case \"自定义\":row = prompt(\"请输入列数！\");col = prompt(\"请输入行数！\");num = prompt(\"请输入你想要的雷数，（请慎重选择）\");init(row, col, num);break;default:row = 9;col = 9;num = 10;init(row, col, num)break;}}init(row, col, num)}
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- 分享自己用JS做的扫雷小游戏
- js版扫雷实现代码 原理不错
- js实现扫雷小程序的示例代码
- 使用纯javascript实现经典扫雷游戏
- javascript 扫雷游戏
- JavaScript制作windows经典扫雷小游戏
- JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
- HTML+JavaScript实现扫雷小游戏
- js+canvas实现简单扫雷小游戏
- js实现简单扫雷
