初学JS，写了个探雷,聊以纪念-JavaSript-爱易网页

初学JS，写了个探雷,聊以纪念

日期：2014-05-16　浏览次数：20414 次

初学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);'>&nbsp;</td>");
				}
				innerHtml.push("</tr>");
			}
			innerHtml.push("</table>");
			var obj = document.getElementById("MainArea");

			obj.innerHTML = innerHtml.join(

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

初学JS，写了个探雷,聊以纪念

相关资料更多>

推荐阅读更多>