连连看游戏-优快云博客

在写过Python版和JavaScript版连连看的算法后，特为JavaScript版连连看算法写了一个图形交互界面。至此完整的连连看游戏出炉了。

下面是文件下载网址：http://download.youkuaiyun.com/source/873086

下面是界面的代码：

 
  <html> 
 <head> 
 <title>图标连连看</title> 
 </head> 
 <scriptsrc="link.js"></script> 
 <body> 
 <tablecellpadding=0cellspacing=0><tr><td><tbodystyle="background-color:black;"id="gamecanvas"></tbody></td></tr></table> 
 <script> 
 varwidth=14; 
 varheight=14; 
 vareleWidth=40; 
 vareleHeight=40; 
 vargameEles=newArray(); 
 varlinkStack=newArray(); 
 varlock=false; 
functioncreateCanvas(_width,_height){
 vargc=document.getElementById("gamecanvas"); 
vartempEles;
vartempEle;
vartempTr;
vartempTd;
 for(varx=0;x<_width;x++){ 
 tempEles=newArray(); 
 tempTr=document.createElement("tr"); 
 tempTr.style.height=eleHeight+"px"; 
 for(vary=0;y<_height;y++){ 
 tempEle=document.createElement("img"); 
tempEle.setAttribute("src","img/"+points[x][y].value+".jpg");
tempEle.setAttribute("id","ele"+x+"_"+y);
 tempEle.style.width=eleWidth+"px"; 
 tempEle.style.height=eleHeight+"px"; 
 if(x>1&&x<_width-2&&y>1&&y<_height-2){ 
 tempEle.onclick=eleChoose; 
}
 tempTd=document.createElement("td"); 
 tempTd.style.width=eleWidth+"px"; 
 tempTd.style.textAlign="center"; 
tempTd.appendChild(tempEle);
tempTr.appendChild(tempTd);
gc.appendChild(tempTr);
tempEles[y]=tempEle;
}
gameEles[x]=tempEles;
}
}
functioneleChoose(_event){
if(lock){
return;
}
 lock=true; 
varevent;
varp;
varpath;
if(window.event){
 event=window.event; 
 p=getPoint(event.srcElement.getAttribute("id")); 
}
else{
 event=_event; 
 p=getPoint(event.target.getAttribute("id")); 
}
 if(linkStack.length==0){ 
choose(p);
linkStack.push(p);
}
else{
 if(p.x==linkStack[0].x&&p.y==linkStack[0].y){ 
unchoose(linkStack.pop());
 lock=false; 
return;
}
choose(p);
 if(p.value==linkStack[0].value){ 
 path=linkPoints(linkStack[0],p); 
if(path){
unchoose(linkStack.pop());
unchoose(p);
linkSus(path);
}
else{
 path=linkPoints(p,linkStack[0]); 
if(path){
unchoose(linkStack.pop());
unchoose(p);
linkSus(path);
}
else{
unchoose(linkStack.pop());
linkStack.push(p);
}
}
}
else{
unchoose(linkStack.pop());
linkStack.push(p);
}
}
 lock=false; 
}
functionchoose(_point){
 vargameEle=gameEles[_point.x][_point.y]; 
 gameEle.style.width=eleWidth-2+"px"; 
 gameEle.style.height=eleHeight-2+"px"; 
}
functionunchoose(_point){
 vargameEle=gameEles[_point.x][_point.y]; 
 gameEle.style.width=eleWidth+"px"; 
 gameEle.style.height=eleHeight+"px"; 
}
functionlinkSus(_path){
 varsourcePoint=_path.shift(); 
 vartargetPoint=_path.pop(); 
 sourcePoint.value=0; 
 targetPoint.value=0; 
 varsourceEle=gameEles[sourcePoint.x][sourcePoint.y]; 
 vartargetEle=gameEles[targetPoint.x][targetPoint.y]; 
 sourceEle.onclick=null; 
sourceEle.setAttribute("src","img/0.jpg");
 targetEle.onclick=null; 
targetEle.setAttribute("src","img/0.jpg");
}
functiongetPoint(_id){
 varpatterner=/ele(/d+)_(/d+)/; 
 varresult=_id.match(patterner); 
returnpoints[result[1]][result[2]];
}
createPoints(width,height);
createCanvas(width,height);
 </script> 
 </body> 
 </html> 
 