初学JS，写了个探雷,聊以纪念
日期：2014-05-16 浏览次数：20439 次
初学JS，写了个扫雷,聊以纪念
![]()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript">
var bgObj;
function showWin(strInfo){
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
bgObj=document.createElement("div");
bgObj.setAttribute( "id", "bgDiv");
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=screen.width+"px";
bgObj.style.height=screen.height+"px";
document.body.appendChild(bgObj);
//main.style.display='block';
main.style.visibility = "visible";
main.style.zIndex = "50";
main.style.width="100%";
document.getElementById("warnInfo").innerHTML="<h2>"+strInfo+"</h2>";
}
function closeWin(){
init();
document.body.removeChild(bgObj);
main.style.visibility = "hidden";
}
</script>
<style type="text/css">
/*初始状态*/
.f0{background-color:#425ccd}
/*鼠标悬停状态*/
.f1{background-color:#609aff}
/*扫雷状态*/
.f2{background-color:#cbd8ea}
/*地雷状态*/
.f3{background-color:#cbd8ea;background-image:url("mine2.png")}
/*扫出的地雷*/
.f4{background-color:#cbd8ea;background-image:url("mine.png")}
td {width:18px;}
tr {height:18px;}
font{font-weight:bolder;}
.n1{color:#4050be}
.n2{color:#1e6902}
.n3{color:#b05964}
.n4{color:#010184}
.n5{color:#8c2d34}
.n6{color:#ff0080}
.n7{color:#ff8000}
.n8{color:#00ffff}
#main{position:absolute;z-index:50; visibility:hidden}
</style>
<script type='text/javascript'>
//配置信息 宽度 高度 地雷数量（默认为 9 9 10）
var setting = {width:9,height:9,mine:10};
var minePostionArray = [];
var mineWarnArray=[]; //警告信息数组,记忆生成
var notMineNum; //非雷区的数量
var realnotMineNum;
function $(id){
return document.getElementById(id);
}
Array.prototype.has= function(num){
//可以优化查询算法
var flag =false;
for(var i=0;i<minePostionArray.length;i++){
if(num==minePostionArray[i]){
flag = true;
break;
}
}
return flag;
}
function init(){
setting = {width:9,height:9,mine:10};
minePostionArray = [];
mineWarnArray=[];
initSetting();
initMainArea(setting.width,setting.height,setting.mine);
initMine(setting.width,setting.height,setting.mine);
}
//初始化配置
function initSetting(){
//获得选中的难度
var level = document.FrmSetting.level;
var checkLevel = 0;
for(var i =0 ; i<4 ; i++){
if(level[i].checked==true){
checkLevel = i;
break;
}
}
//根据难度配置setting
switch(checkLevel){
case 0:setting = {width:9,height:9,mine:10};break;
case 1:setting = {width:16,height:16,mine:40}; break;
case 2:setting = {width:16,height:30,mine:99}; break;
case 3:setting = {width:$('width').value,height:$('height').value,mine:$('mine').value};break;
}
notMineNum=0;
realnotMineNum = setting.width*setting.height-setting.mine;
}
//初始化扫雷游戏主区域界面
function initMainArea(width,height,mine){
var innerHtml = ["<table cellpadding='0' cellspacing='0' border='1' bordercolor='black'>"];
for(var i=0;i<height;i++){
innerHtml.push("<tr>");
for(var j=0;j<width;j++){
var id= i*width+j;
innerHtml.push("<td class='f0' id='"+id+"' onmouseover='mouseover(this);' onmouseout='mouseout(this);' onclick='mouseclick(this);'> </td>");
}
innerHtml.push("</tr>");
}
innerHtml.push("</table>");
var obj = document.getElementById("MainArea");
obj.innerHTML = innerHtml.join(
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
