<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>扫雷游戏</title> <meta http-equiv="Content-Language" content="zh-CN" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="Notepad++" /> <meta name="Robots" content="all" /> <meta name="Author" content="622" /> <meta name="Keywords" content="模版" /> <meta name="Description" content="模版" /> <meta name="Copyright" content="Copyright (c) 2014 rick All Rights Reserved." /> <script language="javascript"></script> <style> .all{margin:0 auto; width:960px;} ul,li{margin:0; padding:0; list-style:none;} #block>ul{height:32px; cursor:pointer;} #block>ul>li{float:left; width:30px; height:30px; border:1px solid black; background:gray; color:white; text-align:center; position:relative;} #block>ul>li>span{position:absolute; top:0; left:0; height:30px; width:30px; background:#eee;} #ctrl{margin:20px auto;} </style> </head> <body> <div class="all"> <h1>小乐扫雷大作战</h1> <form id="ctrl"> <label>行（1~30）<input type="text" id="row_n" value="10" /></label><br /> <label>列（1~30）<input type="text" id="col_n" value="10" /></label><br /> <label>雷的比例（1~0.01）<input type="text" id="thunder_n" value="0.3" /></label><br /> <input type="button" id="submit" value="提交" /> <input type="reset" id="reset" value="重置" /><br /> <label>提示消息<input type="text" id="msg" readonly="ture" /></label> </form> <div id="block"></div> </div> </body> </html>
document.oncontextmenu=function () { return false; //阻止默认事件 }; window.onload=function(){ var oSubmit = document.getElementById("submit"); //var oReset = document.getElementById("reset"); //var oRow_n = document.getElementById("row_n"); //var oCol_n = document.getElementById("col_n"); //var oThunder_n = document.getElementById("thunder_n"); var oMsg = document.getElementById("msg"); oMsg.value = "请输入要挑战的雷阵!"; oSubmit.onclick = init; function init(){ var oSubmit = document.getElementById("submit"); var oReset = document.getElementById("reset"); var oRow_n = document.getElementById("row_n"); var oCol_n = document.getElementById("col_n"); var oThunder_n = document.getElementById("thunder_n"); var oMsg = document.getElementById("msg"); //参数设置 var m = oRow_n.value; //行 var n = oCol_n.value; //列 var p = oThunder_n.value; var x = Math.floor(m*n*p); //雷的数目 //console.log(m,n,x); if(!(m<30&&m>=0&&n<30&&n>=0&&p>=0&&p<=1)){ oMsg.value = "参数不合法"; }else{ oMsg.value = "参数设置成功"; var oDiv = document.getElementById("block"); oDiv.innerHTML = ""; var array = new Array(m); //布局 for(var j=0; j<m; j++){ var oUl = document.createElement("ul"); array[j] = new Array(n); for(var i=0; i<n; i++){ var oLi = document.createElement("li"); oUl.appendChild(oLi); array[j][i] = [0,0,0]; //[是否是雷,标记状态,周围雷数] } oDiv.appendChild(oUl); } //初始化雷区 for(var i=0; i<x; i++){ var a = Math.floor(Math.random() * m); var b = Math.floor(Math.random() * n); if(array[a][b][0] == 0){ array[a][b][0] = 1; valid(a-1,b-1); valid(a-1,b); valid(a-1,b+1); valid(a,b-1); valid(a,b+1); valid(a+1,b-1); valid(a+1,b); valid(a+1,b+1); }else{ x++; } } //布雷 for(var i=0; i<m; i++){ for(var j=0; j<n; j++){ oLi = getBlock(i,j); if(array[i][j][0] == 0){ oLi.innerHTML = array[i][j][2]; }else{ oLi.innerHTML = "#"; oLi.style.background = "red"; } var oSpan = document.createElement("span"); oLi.appendChild(oSpan); } } //监听事件 for(var i=0; i<m; i++){ for(var j=0; j<n; j++){ var oSpan = getBlock(i,j).getElementsByTagName("span")[0]; oSpan._i = i; oSpan._j = j; function listen_1(){ if(array[this._i][this._j][1]==2) return false; this.style.display = "none"; array[this._i][this._j][1] = 1; check(); if(array[this._i][this._j][0]==1){ alert("game over"); oMsg.value = "抱歉，挑战失败"; var aSpan = oDiv.getElementsByTagName("span"); for(var m=0; m < aSpan.length; m++){ aSpan[m].style.display = "none"; } } } function listen_2(){ if(array[this._i][this._j][1] == 0){ array[this._i][this._j][1] = 2; this.style.backgroundColor = "red"; check(); }else{ array[this._i][this._j][1] = 0; this.style.backgroundColor = "#eee"; check(); } } function check(){ console.log(array); var f=1; for(var i=0; i<m; i++){ for(var j=0; j<n; j++){ console.log(array[i][j]); if(array[i][j][0]==0){ if(array[i][j][1]!=1){ f=0; break; break; } } if(array[i][j][0]==1){ if(array[i][j][1]!=2){ f=0; break; break; } } } } if(f==1){ alert("恭喜挑战成功"); oMsg.value = "恭喜挑战成功"; } } on(oSpan,"click",listen_1); on(oSpan,"contextmenu",listen_2); } } } function valid(x,y){ if(x>=0&&x<m&&y>=0&&y<n){ array[x][y][2] ++; } } } function getBlock(m,n){ var oDiv = document.getElementById("block"); var aUl = oDiv.getElementsByTagName("ul"); var ali = aUl[m].getElementsByTagName("li"); var oLi = ali[n]; return oLi; } function on(node,eventType,handler){ node = typeof node == "string" ? document.getElementById(node) : node; if(document.all){ node.attachEvent("on" + eventType, handler); }else{ node.addEventListener(eventType, handler, false); } } }