Web版掃雷 JS實現

阿新 • • 發佈：2019-01-17

這幾天中毒了，無比迷戀掃雷遊戲（摔！明明是機房機器渣到只能玩掃雷），於是在上網路互聯與路由課的時候，寫了個Web版的掃雷遊戲，起碼能玩了，還在完善中，嘿嘿，晚上又增加了一些有趣的東東，還有個彩蛋。DEMO：http://imgbattle.cn/mine/

其中雷區擴充套件的時候，用的BFS演算法。

考慮到所有節點都必須被儲存，因此BFS的空間複雜度為 O(|V| + |E|)，其中 |V| 是節點的數目，而 |E| 是圖中邊的數目。（另一種說法稱BFS的空間複雜度為 O(BM)，其中 B 是最大分支系數，而 M 是樹的最長路徑長度）由於對空間的大量需求，因此BFS並不適合解非常大的問題。還有就是瀏覽器頁面有限，滾動條影響體驗太大，所以把雷區大小作了限制。

邊的長度相等，無權圖，所以BFS演算法是最佳解。

原始碼：
想要JS的同學，可以下方留言郵箱，順豐包郵。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mine</title>
    <link rel="stylesheet" type="text/css" href="mine.css">
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> --> 

    <script src="jquery.min.js"></script>
    <!-- <script src="mine.js"></script> -->
    <script src="mine.min.js"></script>
</head>
<body>
<div id="page">
    <div id="game">
        <label>x:<input type="num" name="x"></label 
><br>
        <label>y:<input type="num" name="y"></label><br>
        <label>n:<input type="num" name="n"></label><br>
        <label id="zhaohuan"><button>點選三次召喚神龍 ヾ(≧▽≦*)o</button></label>
        <div id="shenlong">
            <label><input type="checkbox" name="checkbox">瘋狂模式</label>
        </div>
        <a href="javascript:;" name="start">Start! ( ‵▽′)ψ</a>
    </div>
    <div id="container"></div>
</div>
<div id="log"></div>
</body>
</html>

CSS

body {
    margin: 0;
    font-family: "Microsoft Yahei", "Helvetica";
    font-size: 1.2em;
}

input {
    text-align: center;
}

#page {
    min-width: 540px;
}

#game {
    width: 300px;
    min-width: 300px;
    margin: 20px auto 20px;
    padding: 10px 20px;
    border: 1px dotted #233;
    text-align: center;
}

#game a {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    text-decoration: none;
    background: #f64;
    color: #eee;
}

#container {
    text-align: center;
}

.box {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #fff;
    background: #eee;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

.box:hover {
    background: #ccc;
}

#log {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 300px;
    border: 1px solid #222;
    overflow: scroll;
    padding: 10px;
}

#shenlong {
    display: none;
}

JAVASCRIPT

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('4l(1O(p,a,c,k,e,r){e=1O(c){1U(c<a?\'\':e(25(c/a)))+((c=c%a)>35?28.2i(c+29):c.2l(36))};21(!\'\'.27(/^/,28)){26(c--)r[e(c)]=k[c]||e(c);k=[1O(e){1U r[e]}];e=1O(){1U\'\\\\w+\'};c=1};26(c--)21(k[c])p=p.27(2a 2Z(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);1U p}(\'$(O).18(8(){$("s[q=x]").u(10);$("s[q=y]").u(10);$("s[q=n]").u(10);$("a[q=J]").M(8(){4 a=C($("s[q=x]").u());4 e=C($("s[q=y]").u());4 c=C($("s[q=n]").u());5(a>20||e>20){z("2Y，31？\\\\n\\\\30，2V -。，- 2U");H}5(7.L>0){$("a[q=J]").K("2X")}4 b=N 1i(a,e,c);b.J()})});8 1i(a,c,b){2.x=a?a:10;2.y=c?c:10;2.n=b?b:10;2.m=N 13();2.F=[];16=2;2.J=8(){2.j("J()");$("#W").11("");2.12();$(".r").M(8(){4 e=$(2).1b("x"),f=$(2).1b("y");5(16.m[e][f]==-1&&7.Y){z("2W\\\\n\\\\39，38，3b 23(•̀ 1N •́ 23)");$("a[q=J]").M();H}7.Y=E;16.1c(e,f,$(2))})};2.12=8(){2.j("12()");9(4 h=0;h<2.x;h++){2.m[h]=N 13();2.F[h]=N 13();9(4 f=0;f<2.y;f++){2.m[h][f]=0;2.F[h][f]=0;4 k="<1n 1M=\\\'r\\\' x=\\\'"+h+"\\\' y=\\\'"+f+"\\\'><1n>";$("#W").1a(k)}$("#W").1a("<1L>")}9(4 h=0;h<2.n;h++){4 g=A.Q(A.R()*2.x);4 e=A.Q(A.R()*2.y);5(2.m[g][e]==0){2.m[g][e]=-1;5(7.1j){$(".r[x="+g+"][y="+e+"]").G({I:"1C",1h:"#19"})}}v{h--}}9(4 h=0;h<2.x;h++){9(4 f=0;f<2.y;f++){5(2.m[h][f]<0){(h-1>=0)&&(f-1>=0)&&(2.m[h-1][f-1]>=0)?2.m[h-1][f-1]++:0;(f-1>=0)&&(2.m[h][f-1]>=0)?2.m[h][f-1]++:0;(h+1<2.x)&&(f-1>=0)&&(2.m[h+1][f-1]>=0)?2.m[h+1][f-1]++:0;(h-1>=0)&&(2.m[h-1][f]>=0)?2.m[h-1][f]++:0;(h+1<2.x)&&(2.m[h+1][f]>=0)?2.m[h+1][f]++:0;(h-1>=0)&&(f+1<2.y)&&(2.m[h-1][f+1]>=0)?2.m[h-1][f+1]++:0;(f+1<2.y)&&(2.m[h][f+1]>=0)?2.m[h][f+1]++:0;(h+1<2.x)&&(f+1<2.y)&&(2.m[h+1][f+1]>=0)?2.m[h+1][f+1]++:0}}}};2.B=8(){2.j("B()");9(4 f=0;f<2.x;f++){9(4 e=0;e<2.y;e++){5(2.m[f][e]>0){$(".r[x="+f+"][y="+e+"]").K(2.m[f][e]);$(".r[x="+f+"][y="+e+"]").G({I:"#S"})}v{5(2.m[f][e]==0){$(".r[x="+f+"][y="+e+"]").G({I:"#S"})}v{5(2.m[f][e]==-1){$(".r[x="+f+"][y="+e+"]").K("X");$(".r[x="+f+"][y="+e+"]").G({I:"#1y",1h:"#19"})}}}}}z(7.B[7.L<7.B.1f?7.L:7.B.1f-1]);7.L++;H};2.1c=8(e,g,f){5(2.1g(e,g)){2.B()}v{5(2.m[e][g]!=0){2.F[e][g]=1;f.G({I:"#S"});f.K(2.m[e][g])}v{2.U(e,g)}}2.14()};2.1g=8(e,f){2.j(e+" "+f);5(2.m[e][f]<0){H 15}H E};2.U=8(f,n){f=C(f);n=C(n);4 h=(f-1>=0)?f-1:f;4 m=(f+1<2.x)?f+1:f;4 e=(n-1>=0)?n-1:n;4 l=(n+1<2.y)?n+1:n;2.j("U:"+f+" "+n);d=$(".r[x="+f+"][y="+n+"]");d.G({I:"#S"});2.F[f][n]=1;5(2.m[f][n]>0){d.K(2.m[f][n]);H}9(4 k=h;k<=m;k++){9(4 g=e;g<=l;g++){5(2.F[k][g]==0&&2.m[k][g]>=0){2.U(k,g)}}}};2.14=8(){2.j("14()");4 g=0;9(4 f=0;f<2.x;f++){9(4 e=0;e<2.y;e++){5(2.F[f][e]==0){g++}}}2.j("1x:"+g+"  n:"+2.n);5(g==2.n){z("1l 1m!")}};2.j=8(i){4 g=E;5(g){4 f=$("#j").11();f+="<p>"+i+"</p>";$("#j").11(f);$("#j").1s($("#j")[0].1q)}}}4 7={Y:15,L:0,B:["1o 1I","1r V B 2Q","e......(2P)","1t(2S) & 1u(2R) !","2N，2O","2L\\\\2M 1v!!1w","1k! 1e 1d 1z 1A 1B!\\\\17\\\'t 1D V 1E!!","1k 1F! 1e 1d 1G 1H 1p!\\\\17\\\'T 1J V 1o!! 1K!!","Z..","Z Z...","1l 1m.","22，2F"],1j:E,w:0,D:E};$(O).18(8(){$("#w").M(8(){7.w++;5(7.w==3){z("2G！2D。\\\\2E，2J，2K 2H(≧▽≦*)o")}v{5(7.w==6){z("2I！2T(24 °34 °;)24");$("#D").1P()}v{5(7.w>6&&7.w<=10){z("37━━∑(￣□￣*|||━━32")}v{5(7.w>10){z("22，33 ＝ ＝ 3a");$("#D").1Q()}}}}});$("s[1R=1S]").M(8(){5(7.D==E){7.D=15}v{7.D=E}5(7.D){4 a=C($("s[q=x]").u());4 h=C($("s[q=y]").u());4 g=C($("s[q=n]").u());9(4 f=0;f<a;f++){9(4 c=0;c<h;c++){4 e=A.Q(A.R()*$(O).1T()/P);4 b=A.Q(A.R()*$(O).1V()/P);$(".r[x="+f+"][y="+c+"]").G({1W:"1X",1Y:e*P,1Z:b*P})}}}})});\',2h,2g,\'||2d||2k|21||2j|1O|2b||||||||||2e|||||||2c|2m|2x||2y|2v|2w|||2B|2C|2z|25|2A|2p|2q|2n|1U|2o|2t|2u|2r|2s|2a|2f|40|3R|3Q|3N||3M|3P|3O||42|41||44|43|3Z|3W|3X|3Y|3V|3T|3U|3S|4e|4h|4f|4g|4k|4i|4j|4d|47|48|45|46|4b|49|3n|3o|3l|3m|3s|3t|3q|3r|3e|3f|3d|3g|3j|3k|3i|3D|3E|3H|3K|3L|3I|3J|3w|3x|3v|3y|3B|3C|3z|3A|3u|3G|3F|3h|3c|3p|4a|\'.4c(\'|\'),0,{}))',62,270,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function||||||return|||||||if|好吧|ლ|っ|parseInt|while|replace|String||new|for|name|this|log|document|125|62|fromCharCode|Config|var|toString|box|css|background|false|flag|ends|click|start|text|else|zhaohuan|input|val|end|shenlong|alert|Math|真聽話|n好了|你贏了|乖|ヾ|快看|認真點|你再點三次試試吧|還是你走吧|n這個遊戲不適合你|我走了|你自己玩吧|手動斜眼|你行不行|雞|菜|Σ|凸|你電腦會炸|你的運氣被狗吃了啊|1U一起1O|小夥子|RegExp|n不是我說你|你確定這麼大雷區|騷年|被你發現了|Д|||點多了不會隱藏的|看你這麼可憐|n好吧|其實可以隱藏|送你一次機會|absolute|will|count|f64|be|position|play|shutdown|green|haha|scrollTop|ShutDDDown|scrollHeight|left|Out|errrrr|vegetables|chicken|width|_|br|class|hi|type|checkbox|fadeIn|fadeToggle|Game|AGAIN|height|EveryBody|WILL|Play|Boy|BE|OVER|expand|ddd|container|the|random|floor|append|ready|fff|nDon|win|true|_0|Array||OK|first|generate|html|You|Win|mineVisible|Warning|GAME|top|div|split|Mine|attr|PC|Your|check|isMine|color|length|eval'.split('|'),0,{}))

Web版掃雷 JS實現

HTML

CSS

JAVASCRIPT

Web版掃雷 JS實現

web複習(三):js實現公告欄效果,間歇性滾動展示

js實現web網頁版檯球遊戲

JS實現懸浮導航的制作（附源碼）--web前端

原生JS實現tab切換--web前端開發

heartbeat v2版CRM的高可用web集群的實現

Html+JS+PowerShell打造Web版AD管理系統（二）

require.js實現單頁web應用（SPA）

js實現手機web頁面定位

JS實現簡易版備忘錄

微信小程式推廣二維碼海報Node.js實現版

使用webgl(three.js)搭建一個3D建築，3D消防模擬，web版3D,bim管理系統——第四課

vue.js實現選單導航欄（最終版）

高德地圖web js實現畫多邊形，圓。判斷一個點是否在多邊形或圓裡

[Web Serial] 實現一份 Web 版串列埠（除錯）助手

原生Js實現掃雷

使用RAP2和Mock.JS實現Web API接口的數據模擬和測試

使用RAP2和Mock.JS實現Web API介面的資料模擬和測試

ife 1 day web css/html/js初步瞭解編碼實現第一個頁面

JS實現簡易版貪吃蛇小遊戲（純js程式碼）

Web版 掃雷 JS實現

HTML

CSS

JAVASCRIPT

相關推薦

Web版掃雷 JS實現