JavaScript实现扫雷小游戏的代码怎么写
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍“JavaScript实现扫雷小游戏的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript实现扫雷小游戏的代码怎么写”文章能帮助大家解决问题。
思路：
1产生指定数量的地雷
2计算方块周围的地雷
3点击地雷结束
4点击地雷周边显示地雷个数
5点击空白块，消除所有相连的空白块
6游戏主体已经完成了。剩下就是完善一些小细节，例如胜利判断 ，失败露出苦瓜脸 ，难度切换，新游戏按钮 等等…
首先是html+css的代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扫雷v1.0</title> <style> body { margin: 0; padding: 0; font-family: Arial; font-size: 12px; color: #FFFFFF; background: #000000; } .div-game { margin: 5% auto; width: 480px; height: 420px; } .div-score { position: relative; top: 0px; left: 0px; height: 30px; color: #000000; background: #C0C0C0; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } .img-mines, .div-mines, .img-time, .img-smiley, .div-time, .lb-level, .bn-reset { position: absolute; } .img-mines { top: 6px; left: 10px; } .div-mines { top: 6px; left: 30px; width: 40px; font-family: Verdana; font-size: 14px; font-weight: bold; text-align: left; color: #0000CF; background: transparent; } .img-time { top: 6px; left: 80px; } .div-time { top: 6px; left: 100px; width: 60px; font-family: Verdana; font-size: 14px; font-weight: bold; text-align: left; color: #007F00; background: transparent; } .img-smiley { top: 6px; left: 240px; } .lb-level { top: 4px; left: 330px; width: 80px; font-family: Arial; font-size: 12px; } .bn-reset { top: 3px; left: 420px; width: 50px; font-family: Arial; font-size: 12px; text-align: center; } .div-board { position: relative; width: 480px; height: 320px; color: #000000; background: #7F7F7F; border-top: 1px solid #000000; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; } .cell { position: absolute; overflow: hidden; } .div-adsense { position: relative; width: 100%; height: 60px; text-align: center; } .div-addfreestats { position: absolute; left: 0px; top: 0px; display: none; } </style></head><body> <div id="div-game" class="div-game"> <div id="div-score" class="div-score"> <img id="img-mines" class="img-mines" class="lazy" data-src="./img/mines.png"> <div id="div-mines" class="div-mines">10</div> <img id="img-time" class="img-time" class="lazy" data-src="./img/clock.png"> <div id="div-time" class="div-time">00:00</div> <img id="img-smiley" class="img-smiley" class="lazy" data-src="./img/happy.png" > <select id="lb-level" class="lb-level" onchange="game.restart()" name="bn-reset"> <option selected="" value="easy">简单</option> <option value="normal">普通</option> <option value="advanced">高级</option> <option value="expert">专家</option> <option value="hell">地狱</option> </select> <input id="bn-reset" type="button" class="bn-reset" value="新游戏!" name="bn-reset"> </div> <div id="div-board" class="div-board"> <img id="cell0" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell1" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell2" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell3" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell4" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell5" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell6" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell7" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell8" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell9" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell10" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell11" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell12" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell13" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell14" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell15" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell16" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell17" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell18" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell19" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell20" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell21" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell22" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell23" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell24" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell25" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell26" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell27" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell28" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell29" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell30" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell31" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell32" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell33" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell34" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell35" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell36" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell37" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell38" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell39" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell40" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell41" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell42" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell43" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell44" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell45" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell46" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell47" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell48" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell49" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell50" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell51" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell52" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell53" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell54" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell55" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell56" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell57" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell58" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell59" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell60" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell61" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell62" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell63" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell64" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell65" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell66" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell67" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell68" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell69" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell70" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell71" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell72" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell73" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell74" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell75" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell76" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell77" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell78" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell79" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell80" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell81" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell82" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell83" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell84" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell85" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell86" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell87" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell88" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell89" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell90" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell91" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell92" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell93" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell94" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell95" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell96" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell97" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell98" class="cell" class="lazy" data-src="./img/up.png" anum="0"> <img id="cell99" class="cell" class="lazy" data-src="./img/up.png" anum="0"> </div> <p>欢迎来到扫雷游戏！<br />在最短的时间内根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输。加油！<br />(简单难度：10个地雷；普通难度：20个地雷；高级难度：30个地雷；专家难度：40个地雷；地狱难度：50个地雷)</p></div> <div ></div> <script class="lazy" data-src="./game - 副本.js"></script></body></html>然后是JavaScript的代码：
let select = document.querySelector('#lb-level')let boomNum = 10if (select.options[select.selectedIndex].value == "easy") { boomNum = 10 game()}select.onchange = function () { refresh() if (select.options[select.selectedIndex].value == "easy") { boomNum = 10 game() } else if (select.options[select.selectedIndex].value == "normal") { boomNum = 20 game() } else if (select.options[select.selectedIndex].value == "advanced") { boomNum = 30 game() } else if (select.options[select.selectedIndex].value == "expert") { boomNum = 40 game() } else if (select.options[select.selectedIndex].value == "hell") { boomNum = 50 game() }}function refresh() { //清除掉所有的雷标签、图片复原、点击事件清空、计数器变0,win变0，计数器重开 let boxss = document.querySelectorAll('#div-board>img') for (let i = 0; i < boxss.length; i++) { boxss[i].className = 'cell' boxss[i].setAttribute('anum', 0) boxss[i].onclick = null boxss[i].class="lazy" data-src = './img/up.png' } win = 0 clearInterval(timer) document.querySelector('#div-time').innerText = '00:00' ta = 0 tb = 0 ta1 = '' tb1 = '' timer = setInterval(() => { ta++ if (ta == 60) { ta = 0 tb++ } ta > 9 ? ta1 = ta : ta1 = '0' + ta tb > 9 ? tb1 = tb : tb1 = '0' + tb document.querySelector('#div-time').innerText = tb1 + ':' + ta1 }, 1000); return}function game() { document.querySelector('#div-mines').innerText = boomNum boomNum console.log(123); // 找到元素 let boxs = document.querySelectorAll('#div-board>img') let win = 0 //胜利条件 // temp1函数，生成一批随机数 function temp1(total, size) { // 2个数组，第1个是临时的大数组，第2个是最终数组 let temp = [] let final = [] // 先按照总数量生成大数组 for (let i = 0; i < total; i++) { temp[i] = i } // 把大数组打乱 for (let i = 0; i < total; i++) { // 产生2个随机数，让他们交换,只要他们不相等 let tempNum1 = parseInt(Math.random() * total) let tempNum2 = parseInt(Math.random() * total) let tempTemp = 0 if (tempNum1 != tempNum2) { tempTemp = temp[tempNum1] temp[tempNum1] = temp[tempNum2] temp[tempNum2] = tempTemp } } // 取出前面的那些数，给新数组 for (let i = 0; i < size; i++) { final[i] = temp[i] } return final } let temps = temp1(100, boomNum) // 把boom 这个标志，加给这批下标。 for (let i = 0; i < boomNum; i++) { boxs[temps[i]].classList.add('boom') } let booms = document.querySelectorAll('.boom') //所有的雷拉个队 // 判断每格周围的雷数 for (let i = 0; i < boxs.length; i++) { //先判断自己是不是雷吧，如果自己是雷，终止这次循环（因为不用计算了） if (boxs[i].classList.contains('boom')) { continue } //开始判断雷数 // 左边是 下标-1 右边是 下标+1 上面是 下标-10 下面是 下标+10 // 左上是 下标-11 右上是 下标-9 左下是 下标+9 右下是 下标+11 // 需要判断是否为左右，左右的特点，id以0，9结尾，所有的左右 不需要判断左系列和右系列 if (i >= 11 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0' && boxs[i - 11].classList.contains('boom')) { //左上 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i >= 10 && boxs[i - 10].classList.contains('boom')) { //上 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i >= 9 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9' && boxs[i - 9].classList.contains('boom')) { //右上 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i >= 1 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0' && boxs[i - 1].classList.contains('boom')) { //左 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i <= 98 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9' && boxs[i + 1].classList.contains('boom')) { //右 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i <= 90 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0' && boxs[i + 9].classList.contains('boom')) { //左下 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i <= 89 && boxs[i + 10].classList.contains('boom')) { //下 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } if (i <= 88 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9' && boxs[i + 11].classList.contains('boom')) { //右下 boxs[i].setAttribute('anum', parseInt(boxs[i].getAttribute('anum')) + 1) } } // 点击事件（核心玩法） for (let i = 0; i < boxs.length; i++) { boxs[i].onclick = function () { // 点击之后，那么就有3种情况。1，这是雷。2，这下面有数字。3.这下面是空的 if (boxs[i].classList.contains('boom')) { // 失败，1其他的雷，变成普通雷。2.被点击的那个按钮，变成爆炸雷，3取消所有的点击事件 4.计时器关闭 5.苦瓜脸 for (let j = 0; j < booms.length; j++) { booms[j].class="lazy" data-src = './img/mine.png' } boxs[i].class="lazy" data-src = './img/boom.png' for (let x = 0; x < boxs.length; x++) { boxs[x].onclick = null } clearInterval(timer) document.querySelector('#img-smiley').style.visibility = 'visible' document.querySelector('#img-smiley').class="lazy" data-src = './img/sad.png' } else if (boxs[i].getAttribute('anum') != '0') { //不是0，那么显示数字，然后关闭点击事件，并且计时+1 boxs[i].class="lazy" data-src = './img/' + boxs[i].getAttribute('anum') + '.png' win++ boxs[i].onclick = null } else { // 既然判断不等于0通不过，那就一定等于0了。消除所有相连的空白块。不存在的下标可以作为判断条件吗？先当可以来写 boxs[i].class="lazy" data-src = './img/0.png' win++ boxs[i].onclick = null if (i >= 10) { //上,需要判断是不是第一排，如果不是第一排就Ok boxs[i - 10].click() } if (i >= 1 && boxs[i].id.charAt(boxs[i].id.length - 1) != '0') { //左，需要判断是不是在左边，在左边就不用了 boxs[i - 1].click() } if (i <= 98 && boxs[i].id.charAt(boxs[i].id.length - 1) != '9') { //右，需要判断是不是在右边，在右边就不用了 boxs[i + 1].click() } if (i <= 89) { //下 boxs[i + 10].click() } } if (win == 90) { // 胜利，游戏结束，1所有的雷，变成红旗，2取消所有的点击事件 3.计时器关闭 for (let j = 0; j < booms.length; j++) { booms[j].class="lazy" data-src = './img/flag.png' } for (let x = 0; x < boxs.length; x++) { boxs[x].onclick = null } clearInterval(timer) document.querySelector('#img-smiley').style.visibility = 'visible' } } }}//按钮事件document.querySelector('#bn-reset').onclick = function () { refresh() if (select.options[select.selectedIndex].value == "easy") { boomNum = 10 game() } else if (select.options[select.selectedIndex].value == "normal") { boomNum = 20 game() } else if (select.options[select.selectedIndex].value == "advanced") { boomNum = 30 game() } else if (select.options[select.selectedIndex].value == "expert") { boomNum = 40 game() } else if (select.options[select.selectedIndex].value == "hell") { boomNum = 50 game() }}// 计时器let ta = 0let tb = 0let ta1 = ''let tb1 = ''let timer = setInterval(() => { ta++ if (ta == 60) { ta = 0 tb++ } ta > 9 ? ta1 = ta : ta1 = '0' + ta tb > 9 ? tb1 = tb : tb1 = '0' + tb document.querySelector('#div-time').innerText = tb1 + ':' + ta1}, 1000);关于“JavaScript实现扫雷小游戏的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
