Javascript连连看

闲来无事做了一个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=ythis.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.οnclick=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(){//消除domselectItems[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>

Javascript连连看相关推荐

原生JavaScript实现连连看游戏
向大家推荐一款原生JavaScript版连连看游戏,源码可在http://download.csdn.net/detail/zhangjinpeng66/6276583中下载,首页如下图所示: 首先看 ...
html连连看小游戏论文,JavaScript编写连连看小游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
Android连连看设计思路,0049 JavaScript游戏连连看设计和编程思路
上节课完成了一个算24点的游戏,基本了解了关于使用JavaScript如何编写一个游戏的基本要素. 接下来的几节课,来完成更复杂的网页游戏:连连看. 要编游戏先得会玩游戏如果没有玩过这个游戏的同学, ...
连连看连接算法Javascript版
继连连看连接算法Python版后,我将该算法移植到了Javascript上,为在浏览器版连连看做准备. 功能及使用方法参照另外一篇:连连看连接算法Python版. 值得一提的是由于Javascript ...
JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
php 连连看游戏开发,JavaScript编写连连看小游戏_javascript技巧
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开最终的效果 ...
java怎么让a取随机_数字连连看的java代码怎么把随机数改成字母啊ba title=个人悬赏 href=javascript:;20C/a/b...
本来按钮上是1-26的随机数字,改成随机字母应该怎么改呢? import javax.swing.*; import java.awt.*; import java.awt.event.*; publ ...
JavaScript游戏之连连看连线算法实例
第一种情况为两个精灵能通过一条直线连接,如下图代码如下: var self = this; //用self变量来保存当下的这个this,以免在其他函数域中this指向不同对象而调用错误//直线连接的 ...
【游戏】JavaScript版连连看
仿照QQ游戏里的连连看做的,功能包括: 一.游戏设置游戏窗口透明度,游戏声音,背景音乐,游戏速度等设置二.地图设置可选择游戏中要玩的地图三.自定义地图带一个地图编辑器,可以自已定 ...

Javascript连连看

Javascript连连看相关推荐

最新文章

热门文章