<!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>
Javascript連連看
閒來無事做了一個Javascript版的連連看，基本功能已經實現，並添加詳細備註，同Javascript學習者們一起學習，大家多多指點。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.