原生js實(shí)現(xiàn)自定義難度的掃雷游戲
本文實(shí)例為大家分享了js實(shí)現(xiàn)掃雷游戲的具體代碼，供大家參考，具體內(nèi)容如下
游戲功能：
1、有四個(gè)難度2、可以自定難度
1、html相關(guān)代碼
<!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='http://www.gepszalag.com/bcjs/js/mine.js'></script> <link rel='stylesheet' href='http://www.gepszalag.com/bcjs/css/mine.css' ></head><!-- 需求分析： 1.游戲的區(qū)域： 9*9的區(qū)域 2.方格可以打開(kāi)與標(biāo)記 左鍵打開(kāi)，顯示數(shù)字，為周圍格子的地雷數(shù)，右鍵標(biāo)記 3.地雷 地雷隨機(jī)分布 4.踩到地雷時(shí)，游戲結(jié)束 所有的地雷顯示出來(lái) 5.連鎖開(kāi)大空方格 6.剩余地雷數(shù)與計(jì)時(shí)器 7.游戲勝利條件 所有的方格除了地雷都被打開(kāi)了，則游戲勝利 一個(gè)方格所包含的信息： 坐標(biāo) x y 是否是一個(gè)地雷 周圍的地雷數(shù) = 9 二維數(shù)組中存儲(chǔ)的是周圍的地雷數(shù) --> <body> <div class='level'> <button type='button' name='button' class='choice-level'>自定義</button> <button type='button' name='button' class='choice-level'>初級(jí)</button> <button type='button' name='button' class='choice-level'>中級(jí)</button> <button type='button' name='button' class='choice-level'>高級(jí)</button> <button type='button' name='button' class='choice-level'>魔鬼級(jí)</button> <button type='button' name='button' class='restart'>重新開(kāi)始</button> </div> <div class='gameBox'></div> <div class='info'> <p>剩余雷數(shù)： <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 = []; //給行數(shù)，生成二維數(shù)組 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++) { // //周圍的地雷數(shù) 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個(gè) +1 for (var j = -1; j < 2; j++) { //上三個(gè) plus(map, x - 1, y + j) //下三個(gè) plus(map, x + 1, y + j) } //左右2個(gè) +1 plus(map, x, y - 1) plus(map, x, y + 1) } else { //重新隨機(jī) num++ } } return map; } //先通過(guò)x軸數(shù)量寫入ul，再講過(guò)y軸的屬性寫入li function writeHtml(map) { // 獲取盒子 var gameBox = document.querySelector('.gameBox'); // 聲明空字符串，存放生成的ul、li var gridHTML = ''; for (var i = 0; i < map.length; i++) { gridHTML += ’<ul data-x='’ + i + ’'>’; //生成li for (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; } } //給方格綁定事件， 點(diǎn)開(kāi)數(shù)字 地雷 右鍵標(biāo)記 function show() { // 獲取行ul var rows = document.querySelectorAll('.row'); // 遍歷所有ul for (var i = 0; i < rows.length; i++) { var element = rows[i]; // 添加點(diǎn)擊事件 element.onclick = function(event) { // 當(dāng)前點(diǎn)擊元素 var el = event.target; // 判斷是否為li if (el.nodeName != 'LI') { return; } //todo 判斷是否被打開(kāi)以及標(biāo)記了 if (el.style.background == 'white' || !el.children[1].classList.contains('hide')) { return; } // 獲取span標(biāo)簽內(nèi)容 var mineNum = el.children[0].innerHTML; if (mineNum !== '9' && el.style.background !== 'white') { // 空白連鎖打開(kāi) 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'; // 判斷打開(kāi)數(shù)量 clearMineNum++; // 勝利函數(shù) judgeVictory() } else if (mineNum == '9') { // 清除勝利計(jì)時(shí)器 clearInterval(stopTime); // li添加類名 el.classList.add('boom'); alert('你真菜！') gg = true; // 顯示所有地雷,獲取所有l(wèi)i var all = document.querySelectorAll('.col'); // 放置所有的地雷 var ff = []; var allnum = 0; // 遍歷所有l(wèi)i for (var i = 0; i < all.length; i++) { if (all[i].children[0].innerHTML == '9') {// 雷賦值給數(shù)組ff[allnum] = all[i];allnum++; } } // 設(shè)置一個(gè)計(jì)時(shí)器一個(gè)一個(gè)打開(kāi)雷 allnum = 0; var stop = setInterval(function() { ff[allnum].classList.add('boom') allnum++; // 判斷結(jié)束條件 if (allnum == ff.length) {// 清除計(jì)時(shí)器clearInterval(stop); } }, 30) } } // 右鍵標(biāo)記地雷 element.oncontextmenu = function(event) { // 阻止右鍵菜單 event.preventDefault(); // 獲取當(dāng)前點(diǎn)擊節(jié)點(diǎn) var el = event.target; // 判斷是否是 if (el.parentNode.nodeName == 'LI') { el = el.parentNode; } if (el.nodeName != 'LI') { return; } // 獲取img var classList = el.children[1].classList; // 剩余雷數(shù) var residue = document.querySelector('.residue'); var mineNum = parseInt(residue.innerHTML); // 如果沒(méi)有旗子，沒(méi)有被點(diǎn)開(kāi)，可以插旗子 if (classList.contains('hide') && el.style.background != 'white') { // 移除隱藏 classList.remove('hide'); // 獲取雷數(shù) mineNum--; } else if (el.style.background != 'white') { classList.add('hide'); // 判斷雷數(shù) if (mineNum < num) { mineNum++; } } // 剩余雷數(shù) residue.innerHTML = mineNum; } } } function judgeVictory() { //游戲勝利 if (clearMineNum === (row * col - num)) { //做一個(gè)小動(dòng)畫(huà) 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) } } //自動(dòng)打開(kāi)空格 function showNoMine(x, y) { for (var i = -1; i <= 1; i++) { if (x + i >= 0 && x + i < row) { // 獲取當(dāng)前行 var rowElement = document.querySelectorAll('.row')[x + i]; for (var j = -1; j <= 1; j++) { if (y + j >= 0 && y + j < col) { //獲取當(dāng)前單元格 var el = rowElement.children[y + j] //自動(dòng)打開(kāi)必須是未打開(kāi)的方格 if (el.style.background != 'white') { el.style.background = 'white' el.children[0].style.display = 'inline'//打開(kāi)方格數(shù)量+1 clearMineNum++ //判斷游戲是否勝利 judgeVictory(clearMineNum)if (el.children[0].innerText === '') {showNoMine(x + i, y + j) } } } } } // if (x + i >= 0 && x + i < row) { // // 獲取當(dāng)前行 // var rowElement = document.querySelectorAll('.row')[x + i]; // for (var j = -1; j <= 1; j++ && y + j < col) { // // 獲取當(dāng)前單元格 // var el = rowElement.children[y + j]; // if (el.style.background !== 'white') { // el.style.background = 'white'; // el.children[0].style.display = 'inline'; // // 打開(kāi)放格數(shù)量加1 // clearMineNum++; // // 判斷游戲是否勝利 // judgeVictory(clearMineNum); // // 判斷打開(kāi)周圍的放格周圍是否為空 // if (el.children[0].innerHTML === '') { // showNoMine(x + i, y + j) // } // } // } // } } } //初始化方法 var stopTime; function init(row, col, num) { //數(shù)據(jù)初始化 clearMineNum = 0 gg = false; //清除原來(lái)的地圖，生成新的地圖 var box = document.querySelector('.gameBox') box.innerHTML = ''; var map = mineMap(row, col, num); // 新建地圖 writeHtml(map); show() //將雷數(shù)寫入html中 var residue = document.querySelector('.residue') residue.innerHTML = num // 獲取計(jì)時(shí) var tick = document.querySelector('.tick'); var i = 0; // 初始化 tick.innerHTML = i; // 清除計(jì)時(shí) clearInterval(stopTime); // 時(shí)間計(jì)時(shí)器 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 '初級(jí)': row = 9; col = 9; num = 10; init(row, col, num) break; case '中級(jí)': row = 16; col = 16; num = 40; init(row, col, num) break; case '高級(jí)': row = 16; col = 30; num = 479; init(row, col, num) break; case '魔鬼級(jí)': row = 40; col = 50; num = 300; init(row, col, num) break; case '自定義': row = prompt('請(qǐng)輸入列數(shù)！'); col = prompt('請(qǐng)輸入行數(shù)！'); num = prompt('請(qǐng)輸入你想要的雷數(shù)，（請(qǐng)慎重選擇）'); init(row, col, num); break; default: row = 9; col = 9; num = 10; init(row, col, num) break; } } init(row, col, num)}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)2. 利用CSS3新特性創(chuàng)建透明邊框三角3. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條4. 如何在Notepad++中配置python執(zhí)行命令5. Python 輸出詳細(xì)的異常信息(traceback)方式6. 原生js生成圖片驗(yàn)證碼7. IDEA創(chuàng)建Java項(xiàng)目導(dǎo)出Jar包運(yùn)行8. Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法9. Vue中nvm-windows的安裝與使用教程(親測(cè))10. .NET使用StackTrace獲取方法調(diào)用信息的代碼演示
網(wǎng)公網(wǎng)安備