Javascript连连看

来源：互联网发布：mac mini 2012拆机编辑：程序博客网时间：2024/05/16 07:48
闲来无事做了一个Javascript版的连连看，基本功能已经实现，并添加详细备注，同Javascript学习者们一起学习，大家多多指点。
<!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" ><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>测试页面</title> <style type="text/css"> body {background:#0E3460;} #test{ width:400px; height: 400px; margin: 10px auto; } #test div { float:left;width:38px;height:38px; border:1px solid white; } #clock {width:400px;height:10px ;border:  1px #000000 solid ;margin: 30px auto 10px}  #progress{width:100%;height:10px ; background-color:#008AFF} </style></head>      <body>     <div id="clock">      <div id="progress"></div>     </div> <div id="test"> </div> <script type="text/javascript">     var time=10;//单位秒     var speed=1;//单位秒     var clock=document.getElementById("progress");     var timeLeft=time;     var myInterval= setInterval(function(){           if(timeLeft>time)     {     timeLeft=time;     }     clock.style.width= timeLeft/time*100+"%";          if(timeLeft==0)     {         clearInterval(myInterval);     if(confirm("Game over Try again?"))     {     var address=window.location;     window.location.href=address;     }          }     timeLeft-= 1;     },speed*1000)          var PadWidth=15;//棋盘宽度     var PadHeight=10;//棋盘高度     var ChessType=[0,1,2,3,4,5,6,7,8,9,10,11];//棋子的所有类型     var ChessAppear=4;//每种棋子出现的次数     var ChessSum=ChessType.length*ChessAppear;//棋子总数         //设计棋盘chesspad[y][x];  var chesspad= new Array();  for(var i=0;i< PadWidth;i++)  {  var arr=new Array();  chesspad.push(arr);  }    function Point(x,y){  this.x=x,     this.y=y  }     //定义棋子类     function Chess(){     this.x=x,     this.y=y     this.type=null;     };     Chess.prototype.point={"x":1,"y":1};     Chess.prototype.chessClass=0;//棋子样式1,2,3,4...     var sum=[ ]; //四种棋子已经发放的数量      for(var i=0;i<ChessType.length;i++)     {     sum.push(0);     }     var allsum=0;  //棋子使用总数    //向棋盘里填充棋子,如果四种棋子分配完就停止   while(allsum< ChessSum ) {  var i= Math.round(Math.random()*(ChessType.length-1));    if(sum[i]<ChessAppear)//如果某一种棋子分配完了就跳出这次循环     {          var y= 1+Math.round( Math.random()* (PadHeight-3));    var x= 1+Math.round( Math.random()*(PadWidth-3));         if(chesspad[y][x]==undefined)//如果这个位置没有棋子就添加一个棋子    {         var chess=new Chess();    chess.chessClass=i;    chess.point.x=x;    chess.point.y=y;    chesspad[y][x]=chess;    sum[i]++;    allsum++;    }    }         }      var test=document.getElementById("test");   test.style.width=40*PadWidth+"px";   test.style.height=40*PadHeight+"px"   var selectItems=[];     //将棋子填充到dom中     function refreshPad(){     for(i=0;i<PadHeight;i++)     for(j=0;j<PadWidth;j++)     {      var element=document.createElement("div");      element.setAttribute("class","chess");      element.id=i+"-"+j;      element.point={"x":j,"y":i};           var type;         if(chesspad[i][j]==undefined)         {          type=-1;         }         else          {          type=chesspad[i][j].chessClass;          element.onclick=function(event){          switch(selectItems.length){          case 0://如果还没有选择棋子          event.target.style.borderRadius="";          selectItems.push(event.target);          break;                 case 1://如果已经选了一个棋子              if(selectItems[0].point.x==event.target.point.x&&selectItems[0].point.y==event.target.point.y)              {//如果点了同一个棋子              selectItems.length=0;              }              else {              //如果选择了两个不同的棋子，则把他们压入栈中，并判断是否联通              selectItems.push(event.target);                            if(checkColor(selectItems[0].point,selectItems[1].point)){//如果颜色相同就检查是否能消除                            check(selectItems[0].point,selectItems[1].point);//检查两个棋子是否联通              }              }               break;                 case 2://选择了两个棋子               selectItems.length=0;               selectItems.push(event.target);               break;                  }                                               };          }              switch(type)     {     case 0:element.style.backgroundColor="red";break;     case 1:element.style.backgroundColor="blue";break;     case 2:element.style.backgroundColor="yellow";break;     case 3:element.style.backgroundColor="black";break;     case 4:element.style.backgroundColor="white";break;     case 5:element.style.backgroundColor="orange ";break;     case 6:element.style.backgroundColor="#00CC33";break;     case 7:element.style.backgroundColor="#993300 ";break;     case 8:element.style.backgroundColor="#9900CC";break;     case 9:element.style.backgroundColor="#009966";break;     case 10:element.style.backgroundColor="#3399FF";break;     case 11:element.style.backgroundColor="#330000";break;          default:element.style.backgroundColor="gray";     }      test.appendChild( element);     }     } refreshPad();  //检查两点之间 是否无障碍, function checkLine(point1,point2){ var x1=point1.x; var x2=point2.x; var y1=point1.y; var y2=point2.y;    if(y1==y2){//两点在同一行上   for(i= Math.min(x1,x2)+1;i<Math.max(x1,x2);i++){   if(chesspad[y1][i]!=undefined)   return false;   }   return true;   }   if(x1==x2){//两点在同一列上   for(i= Math.min(y1,y2)+1;i<Math.max(y1,y2);i++){   if(chesspad[i][x1]!=undefined)   return false;   }       return true;   }   return false; } function checkTwoLine(point1,point2)//折一次能连接 { var x1=point1.x; var x2=point2.x; var y1=point1.y; var y2=point2.y; if(chesspad[y2][x1]==undefined) { if(checkLine(point1,{x:x1,y:y2})&&checkLine(point2,{x:x1,y:y2}))//第一个拐点 { return true; } } if(chesspad[y1][x2]==undefined) { if(checkLine(point1,{x:x2,y:y1})&&checkLine(point2,{x:x2,y:y1}))//第一个拐点 { return true; } } return false; } function checkThreeLine(point1,point2)//折两次能连接 { //横向遍历 for(var i=0;i<PadWidth;i++ ) {  p0=point1; p1={x:i,y:point1.y};     p2={x:i,y:point2.y}; p3=point2; if(getChessByPoint(p1) ==undefined&&getChessByPoint(p2) ==undefined)//两个拐点处没有棋子 { if(checkLine(p0,p1)&&checkLine(p1,p2)&&checkLine(p3,p2)) { return true; }   }   } //纵向遍历 for(var i=0;i<PadHeight;i++ ) {  p0=point1; p1={x:point1.x,y:i};     p2={x:point2.x,y:i}; p3=point2; if(getChessByPoint(p1) ==undefined&&getChessByPoint(p2) ==undefined)//两个拐点处没有棋子 { if(checkLine(p0,p1)&&checkLine(p1,p2)&&checkLine(p3,p2)) { return true; } }  } return false; }  //获得棋子 function getChessByPoint(point) { return chesspad[point.y][point.x]; } function getElementByPoint(point) { return document.getElementById(point.y+"-"+point.x); } //检查两个棋子是否能消除 function check(point1,point2) { if(checkLine(point1,point2)) {  clearChess();    return; } if(checkTwoLine(point1,point2)) { clearChess();    return; } if(checkThreeLine(point1,point2)) { clearChess();     return; }   return;  }      //检查两个棋子颜色是否相同   function checkColor(point1,point2)   {   if( chesspad[point1.y][point1.x].chessClass==chesspad[point2.y][point2.x].chessClass)   {return true;}   else   {return false;}   } function clearChess() { //消除dom selectItems[0].style.backgroundColor="gray"; selectItems[1].style.backgroundColor="gray"; //消除chesspad中的棋子 chesspad[selectItems[0].point.y][selectItems[0].point.x]=undefined; chesspad[selectItems[1].point.y][selectItems[1].point.x]=undefined;     allsum-=2;    timeLeft+=0.3*time;       if(allsum==0)    {    alert("success")   var address=window.location;     window.location.href=address;    }; // if(!checkState()) // { // alert("无可消除的棋子"); // } } //判断两者是否相邻 function isNeighbour(point1,point2){ x1=point1.x; y1=point1.y; x2=point2.x; y2=point2.y; if((y1==y2)&&(x1-1==x2)) {    return true; }   else if((x1==x2)&&(y1-1==y2)) {    return true; }  else if ((y1==y2)&&(x1+1==x2)) {    return true; }  else if((x1==x2)&&(y1+1==y2)) {    return true; }  return false;  } function pointEqual(point1,point2) { if(point1==undefined||point2==undefined) return false; if(point1.x==point2.x&&point1.y==point2.y) return true; else return false; } function checkState()//检查是否还有能消除的棋子 { for(i=0;i<PadHeight;i++) for(j=0;i<PadWidth;i++)  for(k=0;k<PadHeight;k++) for(l=0;l<PadWidth;l++) { if(getChessByPoint({x:i,y:j})!==undefined&&getChessByPoint({x:k,y:l})!==undefined){ if(!pointEqual({x:i,y:j},{x:k,y:l})) { if(check({x:j,y:i},{x:l,y:k})) { return true; }  }  }  } return false; }//转载请注明：转自AllenChang的csdn博客http://blog.csdn.net/allenchang1987 </script> </body>    </html>