原创jquery扫雷

闲着没事，看有人用js写扫雷程序，利用两天的时间也写了一个扫雷简单的版本，大致如下：

（晕，来这边那么久，居然不会贴图，直接贴源代码）

1）jquery.tableGen.js，这段js的作用是产生一个表格，表格中显示数字和雷区，调用的方法很简单，如下:

var options ={
rows:5,
cols:5,
percent:0.1
};

     $("table").tableGen(options);  

思路是：根据table的单元格的数目随机产生percent的雷，并填充td。然后遍历所有的td，查找周围雷的个数来填充单元格的数字

	var neigUp = new Array();
	var neig = new Array();
	var neigDw = new Array();
	var cols,rows;
	var table,tds;
	var colors =["black","blue","red","orange","yellow","green","black","black"];
       var mineNum ;

(function($){
		
	var randoms = function(max,percent){
		// General digital between 0 and max num times
	    if(!max)max =100;
		if(!percent) percent =0.1;
		num = max*percent;
		var i=0;
		var arr = new Array();
		while(i<num)   arr[i++]=Math.floor(Math.random()*max);
		return arr;
	}	
	

	$.fn.tableGen = function(options){
		var setting = $.extend({
			rows:10,
			cols:10,
			percent:0.1			
			},options || {}
		);
	
		rows = setting.rows;
		cols = setting.cols;
		neigUp = [-(cols+1),-cols,-(cols-1)];
		neig =[-1,1];
		neigDw =[cols-1,cols,cols+1];	
	
	
	
		var str = "";
		for(var j=0;j<setting.rows;j++){
			str+="<tr>";
			for(var i=0;i<setting.cols;i++){
				str+="<td>"+i+"</td>";
			}
			str+="</tr>";
		}
		this.empty();	
		this.append(str);
		$("td",this).addClass("org");		// orginal color

		
			
		//fill
		var arr = randoms(setting.rows*setting.cols,setting.percent);
		tds = $("td",this);
		mineNum = arr.length;

		for(var i=0;i<arr.length;i++){
			$(tds[arr[i]]).addClass("mine").html("<span>"+"*"+"</span>").find("span").css("opacity",0);
		}

		// add tips number to regular cells		
		var $this =this;
		tds.each(function(i){
			
			if($(this).text() == "*") return;
			var cnt = 0;
			var seq = i;
	
			for(var i=0;i<neig.length;i++){
				var p = neig[i]+seq;
				if(tds[p]&&Math.floor(p/cols) == Math.floor(seq/cols) && $(tds[p]).text() == "*") cnt++;
			}
			
			for(var i=0;i<neigUp.length;i++){
				var p = neigUp[i]+seq;
				if(tds[p]&&Math.floor(p/cols)+1 == Math.floor(seq/cols )&& $(tds[p]).text() == "*") cnt++;
			}
			
			for(var i=0;i<neigDw.length;i++){
				var p = neigDw[i]+seq;
				if(tds[p]&&Math.floor(p/cols)-1 == Math.floor(seq/cols) && $(tds[p]).text() == "*") cnt++;
			}		
		
			if(!cnt) 	{ cnt = ""; colors[""]="";}
			$(this).html("<span>"+cnt+"</span>").css("color",colors[cnt]).find("span").css("opacity",0);
	
		});	
		
		tds.addClass("mark");
	} // tableGen Fn end


})(jQuery);

2）jquery.fill.js。这段代码的作用是定义点击事件，每次点击根据点击的内容来显示周围的区域或者提示成功失败

(function($){
	neig =[-1,1];
	neigDw =[cols];	
	neigUp = [-cols];
	
	var recover =function(td,table){
		if(!td)       return; 
		if(!td.attr)  td = $(td);
		if(!td.hasClass("mark")){
			return;
		}		
		if(td.text() == ""){
			td.removeClass("mark").find("span").css("opacity",1);
		}
		else if(td.text() !="*"){
			td.removeClass("mark").find("span").css("opacity",1);
			return;
		}
		else if(td.text() == "*"){
			return;
		}
		
		var seq = td.index("td",table);
		tds = table.filter("td");
		/*----------------------------*/
		for(var i=0;i<neig.length;i++){
			var p = neig[i]+seq;
			if(tds[p]&&Math.floor(p/cols) == Math.floor(seq/cols) && $(tds[p]).text() != "*") {
				recover($(tds[p]),table);
			}
		}
			
		for(var i=0;i<neigUp.length;i++){
			var p = neigUp[i]+seq;
			if(tds[p]&&Math.floor(p/cols)+1 == Math.floor(seq/cols )&& $(tds[p]).text() != "*") {
				recover($(tds[p]),table);
			}
		}
			
		for(var i=0;i<neigDw.length;i++){
			var p = neigDw[i]+seq;
			if(tds[p]&&Math.floor(p/cols)-1 == Math.floor(seq/cols) && $(tds[p]).text() != "*") {
				recover($(tds[p]),table);
			}
		}
	}



	$.fn.fill = function(){
		table = $(this);
		tds =$("td",table);
		var mineCnt = 0;

		tds.click(function(event){
			
			
			
			
			if($(this).text() != "*"){
				if(event.altKey){
					tds.removeClass("mark").find("span").css("opacity",1);
					var rs = confirm("No Bomb here !Bad Luck,Try Again?");
					if(rs){
						table.tableGen(options).fill();
						}		
					return;
				}
			}
			
			if($(this).text() == "*"){
				$(this).removeClass("mark").find("span").css("opacity",1);
				var event = event || window.event;
				if(event.altKey){
					mineCnt++;
					if(mineCnt == mineNum){
						var rs = confirm("congratulations!Try Again?");
						if(rs){
							table.tableGen(options).fill();
						}		
						return;
					}
					return;
				}
				// Game over
				tds.removeClass("mark").find("span").css("opacity",1);
				var rs = confirm("Bomb!Bad Luck,Try Again?");
				if(rs){
					table.tableGen(options);
					table.fill();
				}				
			}
			
			else if($(this).text() !="*" && $(this).text() !=""){
				$(this).removeClass("mark").find("span").css("opacity",1);
			}
			else
				recover($(this),tds);			
		});		
	};	
})(jQuery);

下面就是index.html的源代码了：

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
     <head>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.table.js"></script>
        <script type="text/javascript" src="jquery.fill.js"></script>	
		<title>Mine</title>
		
		<style type="text/css">
		 table{
		 	table-layout: fixed;
		 }
		 
		 .org {
		 	border:1px solid black;
		 	background-color:white; 
		 	overflow: hidden;
		 	width: 10px;
		 	height:10px;

		 }		 
		 .mine{		 	
		 }
		
		.mark{
			background-color: orange;
		}
		.flag{
			background: url(flag.png);
			background-color: blue;
		}	
		
		</style>


		
	</head>
	
	<body>
		<h3>Mine Game</h3>
		<table colspan='4'>			
		</table>		
		
		<script type="text/javascript" >
		
			var options ={
					rows:5,
					cols:5,
					percent:0.1
			};
		
		 	$("table").tableGen(options);
			$("table").fill();
		 		
		 	
		</script>
	</body>
</html> -->

这个小游戏还算简单，不过也花费了我两天的时间，给自己加油！