网页扫雷（简易版）（一）
生活随笔
收集整理的這篇文章主要介紹了
网页扫雷（简易版）（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
說明：主要是做做玩玩的，先把主要功能實現。
掃雷主要分為這幾塊內容：
- 生成一張N x N地圖
- 在地圖上隨機分布地雷
- 點擊地圖上每個格子事件
- 點擊到雷時，Game Over；
- 點記到雷旁邊時，顯示周圍雷的個數；
- 點擊到空白時，顯示大片安全區域；
頁面的基礎結構
<!DOCTYPE html> <html> <head><title></title> </head> <body><div class="lei"><ul id="map"></ul></div> </body> </html> 這里有部分DOM元素操作，使用jquery庫。 雷圖片：ball.png,可隨便找一張。生成一張N x N地圖
掃雷界面主要通過ul、li來實現。
<ul><li></li><li></li><li></li> </ul>NxN的地圖，通過兩次for循環生成地圖數組，默認值為0；
for (var i = 0; i < wi; i++) {maparr[i] = [];for (var j = 0; j < he; j++) {maparr[i][j]=0;} }在地圖上隨機分布地雷
for (var i = 0; i < bomb; i++) {var r = getRandomBetween(0,wi);var c = getRandomBetween(0,he);maparr[r][c]=-1; }獲取隨機數，設置r行c列處為雷。然后渲染dom元素
setHtmlDom:function(arr) {var html="";for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr[i].length; j++) {html+='<li class="mli" style="background-color:wheat" ai="'+i+'" aj="'+j+'" val="'+arr[i][j]+'" onclick="game.clkevent('+arr[i][j]+',this)"></li>';}}$("#map").html(html); },根據雷的分布，獲取每個方格中應填入的數值，顯示周圍的地雷數。
for (var i = 0; i < maparr.length; i++) {for (var j = 0; j < maparr[i].length; j++) {var a = maparr[i][j]if(a!==-1){(i-1>=0)&&(j-1>=0)&&(maparr[i-1][j-1]===-1)&&(a+=1);(i-1>=0)&&(maparr[i-1][j]===-1)&&(a+=1);(i-1>=0)&&(j+1<=he-1)&&(maparr[i-1][j+1]===-1)&&(a+=1);(j+1<=he-1)&&(maparr[i][j+1]===-1)&&(a+=1);(j-1>=0)&&(maparr[i][j-1]===-1)&&(a+=1);(i+1<=wi-1)&&(j-1>=0)&&(maparr[i+1][j-1]===-1)&&(a+=1);(i+1<=wi-1)&&(maparr[i+1][j]===-1)&&(a+=1);(i+1<=wi-1)&&(j+1<=he-1)&&(maparr[i+1][j+1]===-1)&&(a+=1);maparr[i][j]=a;}} } return maparr;點擊地圖上每個格子事件
html+='<li class="mli" style="background-color:wheat" ai="'+i+'" aj="'+j+'" val="'+arr[i][j]+'" onclick="game.clkevent('+arr[i][j]+',this)"></li>';點擊到雷時，游戲結束
布雷的方格處，arr[i][j]為-1， clkevent:function(s,__this) {var _this = this;__this.style.backgroundColor="#ccc";_this.farr = [];if(s===-1){//點擊到雷時_this.setHtmlDom2();$("#result").html("you lose!")} },點擊到空白時，顯示大片安全區域
這種情況下，需要對周圍8個方格繼續檢測，原理相同； 檢測過的方格不應重復檢測。 if(s===0){//點擊到的方格周圍沒有雷var i = $(__this).attr("ai");var j = $(__this).attr("aj");_this.check([i,j]); }這邊比較冗余，分8種進行check；
check:function(arr) {var _this = this;var index = isInArray(arr,_this.farr);if(index===-1){_this.farr.push(arr);var i = parseInt(arr[0]);var j = parseInt(arr[1]);var len = _this.map[0].length;var indexli = i*len+j;var li = $("#map li")[indexli];$("#map").find(li)[0].style.backgroundColor="#ccc";if((i-1>=0)&&(j-1>=0)&&(_this.map[i-1][j-1]===0)){var index = isInArray([i-1,j-1],_this.farr);if(index===-1){_this.check([i-1,j-1]);}}else{(i-1>=0)&&(j-1>=0)&&_this.elsef(i-1,j-1);}if((i-1>=0)&&(_this.map[i-1][j]===0)){var index = isInArray([i-1,j],_this.farr);if(index===-1){_this.check([i-1,j]);}}else{(i-1>=0)&&_this.elsef(i-1,j);}if((i-1>=0)&&(j+1<=cols-1)&&(_this.map[i-1][j+1]===0)){var index = isInArray([i-1,j+1],_this.farr);if(index===-1){_this.check([i-1,j+1]);}}else{(i-1>=0)&&(j+1<=cols-1)&&_this.elsef(i-1,j+1);}if((j+1<=cols-1)&&(_this.map[i][j+1]===0)){var index = isInArray([i,j+1],_this.farr);if(index===-1){_this.check([i,j+1]);}}else{(j+1<=cols-1)&&_this.elsef(i,j+1);}if((j-1>=0)&&(_this.map[i][j-1]===0)){var index = isInArray([i,j-1],_this.farr);if(index===-1){_this.check([i,j-1]);}}else{(j-1>=0)&&_this.elsef(i,j-1);}if((i+1<=rows-1)&&(j-1>=0)&&(_this.map[i+1][j-1]===0)){var index = isInArray([i+1,j-1],_this.farr);if(index===-1){_this.check([i+1,j-1]);}}else{(i+1<=rows-1)&&(j-1>=0)&&_this.elsef(i+1,j-1);}if((i+1<=rows-1)&&(_this.map[i+1][j]===0)){var index = isInArray([i+1,j],_this.farr);if(index===-1){_this.check([i+1,j]);}}else{(i+1<=rows-1)&&_this.elsef(i+1,j);}if((i+1<=rows-1)&&(j+1<=cols-1)&&(_this.map[i+1][j+1]===0)){var index = isInArray([i+1,j+1],_this.farr);if(index===-1){_this.check([i+1,j+1]);}}else{(i+1<=rows-1)&&(j+1<=cols-1)&&_this.elsef(i+1,j+1);}} },點記到雷旁邊時，顯示周圍雷的個數
else{//點擊的到的方格周圍有雷，則直接顯示數值__this.innerText = s; }這上面是主要代碼，游戲非常簡易，沒有實現右擊和鼠標左右鍵同時點擊的檢測，只是實現了掃雷最基本的功能。以后或許會優化。下面是整個代碼。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">ul{margin: 0;padding: 0;list-style: none;}ul li{background-color:#ccc;width:30px;height: 30px;float: left;border:1px solid #efd;}#map{width: 320px;}#ctrl{text-align: center;}#ctrl div{margin: 12px 0 0 0;}.sel{width: 25%;border-radius: 25px;height: 25px;box-shadow:2px 2px 5px #8B4789}</style><script type="text/javascript" src="./jquery.min.js"></script> </head> <body><div class="lei"><ul id="map"></ul></div><div id="ctrl"><div><label id="nums">12</label></div><div><select class="sel" id="range"><option value="25">25</option><option value="20">20</option><option value="15">15</option></select></div> <div><select class="sel" id="diff"><option value="0.9">very hard</option><option value="0.6">hard</option><option value="0.3">commom</option><option value="0.1">easy</option></select></div><div><button id="start" onclick="game.init()">開始</button></div> <div><label id="result" style="color:red"></label></div> </div><script type="text/javascript">var game = {map:[],warr:[],farr:[],rows:0,cols:0,init:function() {var _this= this;rows = cols = $("#range").val();var width = rows*32+"px";$("#map").css({width:width})_this.map = _this.getRandomArray(rows,cols);_this.setHtmlDom(_this.map);},getRandomArray:function(wi,he) {var diff = $("#diff").val();var bomb = parseInt(wi*he*diff);$("#nums").html(bomb);if(bomb===0){bomb=2;}var maparr=[];for (var i = 0; i < wi; i++) {maparr[i] = [];for (var j = 0; j < he; j++) {maparr[i][j]=0;}}for (var i = 0; i < bomb; i++) {var r = getRandomBetween(0,wi);var c = getRandomBetween(0,he);maparr[r][c]=-1;}for (var i = 0; i < maparr.length; i++) {for (var j = 0; j < maparr[i].length; j++) {var a = maparr[i][j]if(a!==-1){(i-1>=0)&&(j-1>=0)&&(maparr[i-1][j-1]===-1)&&(a+=1);(i-1>=0)&&(maparr[i-1][j]===-1)&&(a+=1);(i-1>=0)&&(j+1<=he-1)&&(maparr[i-1][j+1]===-1)&&(a+=1);(j+1<=he-1)&&(maparr[i][j+1]===-1)&&(a+=1);(j-1>=0)&&(maparr[i][j-1]===-1)&&(a+=1);(i+1<=wi-1)&&(j-1>=0)&&(maparr[i+1][j-1]===-1)&&(a+=1);(i+1<=wi-1)&&(maparr[i+1][j]===-1)&&(a+=1);(i+1<=wi-1)&&(j+1<=he-1)&&(maparr[i+1][j+1]===-1)&&(a+=1);maparr[i][j]=a;}}}return maparr;},setHtmlDom:function(arr) {var html="";for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr[i].length; j++) {html+='<li class="mli" style="background-color:wheat" ai="'+i+'" aj="'+j+'" val="'+arr[i][j]+'" onclick="game.clkevent('+arr[i][j]+',this)"></li>';}}$("#map").html(html);},setHtmlDom2:function() {var arr = this.map;var html="";for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr[i].length; j++) {if(arr[i][j]===-1){html+='<li class="mli" style="background:#eac0ce url(./ball.png);background-size:cover;" val="'+arr[i][j]+'" onclick="game.clkevent('+arr[i][j]+',this)"></li>';}else if(arr[i][j]===0){html+='<li class="mli" style="background-color:efe" val="'+arr[i][j]+'" onclick="game.clkevent('+arr[i][j]+',this)"></li>';}else{html+='<li class="mli" style="background-color:efe" val="'+arr[i][j]+'" onclick="game.clkevent('+arr[i][j]+',this)">'+arr[i][j]+'</li>';}}}$("#map").html(html);},clkevent:function(s,__this) {var _this = this;__this.style.backgroundColor="#ccc";_this.farr = [];if(s===-1){_this.setHtmlDom2();$("#result").html("you lose!")}if(s===0){var i = $(__this).attr("ai");var j = $(__this).attr("aj");_this.check([i,j]);}else{__this.innerText = s;}},check:function(arr) {var _this = this;var index = isInArray(arr,_this.farr);if(index===-1){_this.farr.push(arr);var i = parseInt(arr[0]);var j = parseInt(arr[1]);var len = _this.map[0].length;var indexli = i*len+j;var li = $("#map li")[indexli];$("#map").find(li)[0].style.backgroundColor="#ccc";if((i-1>=0)&&(j-1>=0)&&(_this.map[i-1][j-1]===0)){var index = isInArray([i-1,j-1],_this.farr);if(index===-1){_this.check([i-1,j-1]);}}else{(i-1>=0)&&(j-1>=0)&&_this.elsef(i-1,j-1);}if((i-1>=0)&&(_this.map[i-1][j]===0)){var index = isInArray([i-1,j],_this.farr);if(index===-1){_this.check([i-1,j]);}}else{(i-1>=0)&&_this.elsef(i-1,j);}if((i-1>=0)&&(j+1<=cols-1)&&(_this.map[i-1][j+1]===0)){var index = isInArray([i-1,j+1],_this.farr);if(index===-1){_this.check([i-1,j+1]);}}else{(i-1>=0)&&(j+1<=cols-1)&&_this.elsef(i-1,j+1);}if((j+1<=cols-1)&&(_this.map[i][j+1]===0)){var index = isInArray([i,j+1],_this.farr);if(index===-1){_this.check([i,j+1]);}}else{(j+1<=cols-1)&&_this.elsef(i,j+1);}if((j-1>=0)&&(_this.map[i][j-1]===0)){var index = isInArray([i,j-1],_this.farr);if(index===-1){_this.check([i,j-1]);}}else{(j-1>=0)&&_this.elsef(i,j-1);}if((i+1<=rows-1)&&(j-1>=0)&&(_this.map[i+1][j-1]===0)){var index = isInArray([i+1,j-1],_this.farr);if(index===-1){_this.check([i+1,j-1]);}}else{(i+1<=rows-1)&&(j-1>=0)&&_this.elsef(i+1,j-1);}if((i+1<=rows-1)&&(_this.map[i+1][j]===0)){var index = isInArray([i+1,j],_this.farr);if(index===-1){_this.check([i+1,j]);}}else{(i+1<=rows-1)&&_this.elsef(i+1,j);}if((i+1<=rows-1)&&(j+1<=cols-1)&&(_this.map[i+1][j+1]===0)){var index = isInArray([i+1,j+1],_this.farr);if(index===-1){_this.check([i+1,j+1]);}}else{(i+1<=rows-1)&&(j+1<=cols-1)&&_this.elsef(i+1,j+1);}}},elsef:function(i,j) {var _this = this;var len = _this.map[0].length;var indexli = i*len+j;var li =$("#map li")[indexli];var ad = $("#map").find(li)[0].attributes["val"];$("#map").find(li)[0].style.backgroundColor="#ccc";$("#map").find(li)[0].innerText = $("#map").find(li)[0].attributes["val"].textContent;}}function getRandomBetween(A,B) {return Math.floor(Math.random()*(B-A)+A);}function isInArray(arr,arrs) {if(arrs.length===0){return -1;}for (var i = 0; i < arrs.length; i++) {if(arrs[i][0]==arr[0]&&arrs[i][1]==arr[1]){return 2;}}return -1}game.init();</script> </body> </html>總結
以上是生活随笔為你收集整理的网页扫雷（简易版）（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （剑指Offer）面试题5：从尾到头打印
- 下一篇： 如何解决Filezilla 与虚拟机连接