JS编写的扫雷游戏（简单易懂）

初学JavaScript,这是自己仿照windows下面的扫雷游戏用写成的，网页上的扫雷游戏。通过这个程序的编写让我更加熟悉js的面向函数编程的思想和模式。同时深刻的体会到，要学好一门语言，一定得多动手写些代码。这里将代码分享出来，欢迎大家批评指正。

 

  

  目前剩余雷数:个
  
请选择难度：
  
  初级玩家
  普通玩家
  高级玩家
  
  

 

 

 

  

@CHARSET "UTF-8";
 .myButton{
 width: 30px;
 height: 30px;
 background: silver;
 }
  .myButton0{
 width: 30px;
 height: 30px;
 color:gray;
 background:gray;
 }
 .myButton1{
 background: gray;
 color:blue;
 font-size:10px;
 width: 30px;
 height: 30px;
 }
 .myButton2{
 background: gray;
 font-size:10px;
 color:green;
 width: 30px;
 height: 30px;
 }
  .myButton3{
 background: gray;
 color:yellow;
 width: 30px;
 height: 30px;
 }
  .myButton4{
 background: gray;
 color: aqua;
 width: 30px;
 height: 30px;
 }
  .myButton5{
 background: gray;
 color: fuchsia;
 width: 30px;
 height: 30px;
 }
  .myButton6{
 background: gray;
 color:lime;
 width: 30px;
 height: 30px;
 }
  .myButton7{
 background: gray;
 color: teal;
 width: 30px;
 height: 30px;
 }
 
 .myButton8{
 background: gray;
 color: navy;
 width: 30px;
 height: 30px;
 }
 
 .myButton_{
 background: gray;
 color: red;
 width: 30px;
 height: 30px;
 }

 

  

  

/**********************************************
 * JavaScript扫雷游戏                         
 *                                            
 * @author : Sailor
 * 
 * @version : 1.0
 * 
 * Date : 2010-03-15
 * 
 * Email : [email protected]
 *  
 **********************************************/

var Mine;//用来记录每个小方块应对应的值
var markNum=8;//用来记录用户标记的数目
/**
 * 布局游戏界面 size是布局大小，number是布雷数
 */
function Interface(size,number){
	markNum=number;
	var mainFrame=$("mainInt");
	$("markNum").innerText=markNum;
	mainFrame.innerText="";
	var mine=new Array(size);
	for(var i=0;i=0)&&(j-1>=0)){
 	    		if(mine[i-1][j-1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断正上
 	    	if(i>=1){
 	    		if(mine[i-1][j]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断右上
 	    	if((i-1>=0)&&(j<=cols-2)){
 	    		if(mine[i-1][j+1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断左边
 	    	if(j>=1){
 	    		if(mine[i][j-1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断右边 
 	    	if(j<=cols-2){
 	    		if(mine[i][j+1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断左下
 	    	if((i<=rows-2)&&(j-1>=0)){
 	    		if(mine[i+1][j-1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断正下
 	    	if(i<=rows-2){
 	    		if(mine[i+1][j]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断右下
 	    	if((i<=rows-2)&&(j<=cols-2)){
 	    		if(mine[i+1][j+1]=="雷")
 	    		mineNum++;
 	    	}
 	    	if(mine[i][j]!="雷"){
 	    	mine[i][j]=mineNum;
 	    	}
 	    }
 }
 	return mine;
 }

/**
 * 创建行
 */
function createRow(row,len,mine){
	var mine=mine;
	var tr=document.createElement("tr");
	for(var i=0;i=0)&&(j-1>=0)){
 	    	var but=$((i-1)+"."+(j-1));
 	    	but.value=(Mine[i-1][j-1]=="雷") ? "" : Mine[i-1][j-1];
 	    	but.className="myButton"+but.value;	
 	    	}
 	    	//判断正上
 	    	if(i>=1){
 	    		var but=$((i-1)+"."+(j));
 	    	    but.value=(Mine[i-1][j]=="雷") ? "" : Mine[i-1][j];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断右上
 	    	if((i-1>=0)&&(j<=cols-2)){
 	    		var but=$((i-1)+"."+(j+1));
 	    	    but.value=(Mine[i-1][j+1]=="雷") ? "" : Mine[i-1][j+1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断左边
 	    	if(j>=1){
 	    		var but=$((i)+"."+(j-1));
 	    	    but.value=(Mine[i][j-1]=="雷") ? "" : Mine[i][j-1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断右边 
 	    	if(j<=cols-2){
 	    		var but=$((i)+"."+(j+1));
 	    	    but.value=(Mine[i][j+1]=="雷") ? "" : Mine[i][j+1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断左下
 	    	if((i<=rows-2)&&(j-1>=0)){
 	    		var but=$((i+1)+"."+(j-1));
 	    	    but.value=(Mine[i+1][j-1]=="雷") ? "" : Mine[i+1][j-1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断正下
 	    	if(i<=rows-2){
 	    		var but=$((i+1)+"."+(j));
 	    	    but.value=(Mine[i+1][j]=="雷") ? "" : Mine[i+1][j];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断右下
 	    	if((i<=rows-2)&&(j<=cols-2)){
 	    		var but=$((i+1)+"."+(j+1));
 	    	    but.value=(Mine[i+1][j+1]=="雷") ? "" : Mine[i+1][j+1];
 	    	    but.className="myButton"+but.value;
 	    	}
   	   }
   }
   mark++;
    }
 }
 
 /**
  * 3月18日在showSpace()方法的基础上使用递归算法改进的，速度快了很多。
  */
 function showSpace2(object){
 	var id=object.id;
	var row=parseInt(id.split(".")[0]);
    var col=parseInt(id.split(".")[1]);
    //alert(row+"."+col);
 	var cols=Mine.length;
 	var rows=Mine.length;
 	        //判断左上
 	        if((row-1>=0)&&(col-1>=0)){
 	    	    var but=$((row-1)+"."+(col-1));
 	    	    if(but.value!="0"){
 	    	    but.value=(Mine[row-1][col-1]=="雷") ? "" : Mine[row-1][col-1];
 	    	    but.className="myButton"+but.value;
 	    	      if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }	
 	    	}
 	    	//判断正上
 	    	if(row>=1){
 	    		var but=$((row-1)+"."+(col));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row-1][col]=="雷") ? "" : Mine[row-1][col];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断右上
 	    	if((row-1>=0)&&(col<=cols-2)){
 	    		var but=$((row-1)+"."+(col+1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row-1][col+1]=="雷") ? "" : Mine[row-1][col+1];
 	    	    but.className="myButton"+but.value;
 	    		 if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    		}
 	    	}
 	    	//判断左边
 	    	if(col>=1){
 	    		var but=$((row)+"."+(col-1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row][col-1]=="雷") ? "" : Mine[row][col-1];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断右边 
 	    	if(col<=cols-2){
 	    		var but=$((row)+"."+(col+1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row][col+1]=="雷") ? "" : Mine[row][col+1];
 	    	    but.className="myButton"+but.value;
 	    		 if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    		}
 	    	}
 	    	//判断左下
 	    	if((row<=rows-2)&&(col-1>=0)){
 	    		var but=$((row+1)+"."+(col-1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row+1][col-1]=="雷") ? "" : Mine[row+1][col-1];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断正下
 	    	if(row<=rows-2){
 	    		var but=$((row+1)+"."+(col));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row+1][col]=="雷") ? "" : Mine[row+1][col];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断右下
 	    	if((row<=rows-2)&&(col<=cols-2)){
 	    		var but=$((row+1)+"."+(col+1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row+1][col+1]=="雷") ? "" : Mine[row+1][col+1];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 }
 
 /**
  * 判断是否说有的格子是否都是正确的找出来了
  */
 function judge(){
 	var cols=Mine.length;
 	var rows=Mine.length;
 	var allTrue=true;
 	for(var i=0;i