<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
td{width: 50px; height: 50px; text-align: center;}
.block{border: solid 1px #FFF;}
.selected{border: solid 2px #57E;};
</style>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var Map = new Array();
var Path = new Array();
var Points = new Array();
var tmpPoint;
var size = 60;
var M = 8;
var N = 10;
var realM = M + 2;
var realN = N + 2;
var picCount = 10;
var rndTimes = 20;
var picLeft = M * N;
var clearLine;
var timer;
var timeLeft = 20;
/*
Map = [[-1,-1,-1,-1,-1,-1],
[-1,5,0,0,5,-1],
[-1,2,0,3,1,-1],
[-1,2,0,5,1,-1],
[-1,5,3,0,0,-1],
[-1,-1,-1,-1,-1,-1]];
*/
function initMap()
{
Map = [];
var counterArr = [];
for(var i = 0; i <= picCount; i++)
{
counterArr[i] = 0;
}
var tmpMap = [];
for(var i = 0; i < (M * N / 2); i++)
{
tmpMap.push(parseInt(10*Math.random()) + 1);
}
for(var i = tmpMap.length - 1; i >= 0; i--)
{
tmpMap.push(tmpMap[i]);
}
for(var i = 0; i < rndTimes; i++)
{
var rnd1,rnd2,t;
rnd1 = parseInt(M * N * Math.random());
rnd2 = parseInt(M * N * Math.random());
if(rnd1 == rnd2)
i--;
else
{
t = tmpMap[rnd1];
tmpMap[rnd1] = tmpMap[rnd2];
tmpMap[rnd2] = t;
}
}
var outline = [];
for(var i = 0; i < realN; i++)
outline.push(-1);
Map.push(outline);
for(var i = 0; i < M; i++)
{
var t = [];
t.push(-1);
for(var j = i * N; j < (i + 1) * N; j++)
{
t.push(tmpMap[j]);
}
t.push(-1);
Map.push(t);
}
Map.push(outline);
}
function initTimer()
{
$("#timeLeft").css('width',"900px");
timer = setInterval(countDown,100);
}
function countDown()
{
/* if(parseInt(timeLeft) == 0)
{
clearInterval(timer);
alert('You Lose!!!');
}
timeLeft -= 0.1;
*/
if(parseInt($("#timeLeft").css("width")) < 5)
{
clearInterval(timer);
alert('You Lose!!!');
return;
}
//$("#timeLeft").html('Time Left : ' + parseInt(timeLeft));
$("#timeLeft").css('width',(parseInt($("#timeLeft").css("width")) - 1) + "px");
}
function init()
{
initMap();
$("#game").html('');
var html = '';
for(var i=0;i < realM; i++)
{
for(var j=0;j < realN; j++)
{
var pic = '';
if(Map[i][j] > 0)
{
pic = 'background:url(images\/' + Map[i][j] + '.jpg);background-size: 60px 60px;';
}
html += '<div class="block" id="block-' + i + '-' + j + '" x="' + i + '" y="' + j + '" value="' + Map[i][j] + '" style="position:absolute; top:' + (i * (size + 5)) + 'px;left:' + (j * (size + 5)) + 'px;height:' + size + 'px;width:' + size + 'px;' + pic + '"></div>';//' + Map[i][j] + '
}
}
$("#game").html($("#game").html() + html);
picLeft = M * N;
initTimer();
}
init();
$(".block").live("click",function(){
if(parseInt($(this).attr('value')) < 0)
return;
if(Points == '')
{
var pointA = {
x : parseInt($(this).attr("x")),
y : parseInt($(this).attr("y")),
value : $(this).attr('value')
};
Points.push(pointA);
tmpPoint = pointA;
$(this).addClass("selected");
}
else
{
var pointB = {
x : parseInt($(this).attr("x")),
y : parseInt($(this).attr("y")),
value : $(this).attr('value')
};
if(pointB.x == tmpPoint.x && pointB.y == tmpPoint.y)
{
Points = [];
$(".selected").removeClass("selected");
return;
}
if(tmpPoint.value != pointB.value)
{
Points = [];
Points.push(pointB);
tmpPoint = pointB;
$(".selected").removeClass("selected");
$(this).addClass("selected");
return;
}
Points.push(pointB);
$(this).addClass("selected");
scan(Points);
Points = [];
}
});
function scan(points)
{
var A = points[0];
var B = points[1];
// 检查直线连通的情况
if(lineLink(points,(A.x == B.x ? 'h' : (A.y == B.y ? 'v': false))))
{
drawLine();
Map[A.x][A.y] = 0;
Map[B.x][B.y] = 0;
$("#block-" + A.x + "-" + A.y).attr("value","0");
$("#block-" + B.x + "-" + B.y).attr("value","0");
$("#block-" + A.x + "-" + A.y).css("background",'');
$("#block-" + B.x + "-" + B.y).css("background",'');
checkWin();
return;
}
Path = [];
if(oneCorner(points,(A.x == B.x || A.y == B.y ? false : true)))
{
drawLine();
Map[A.x][A.y] = 0;
Map[B.x][B.y] = 0;
$("#block-" + A.x + "-" + A.y).attr("value","0");
$("#block-" + B.x + "-" + B.y).attr("value","0");
$("#block-" + A.x + "-" + A.y).css("background",'');
$("#block-" + B.x + "-" + B.y).css("background",'');
checkWin();
return;
}
Path = [];
if(towCorner(points))
{
drawLine();
Map[A.x][A.y] = 0;
Map[B.x][B.y] = 0;
$("#block-" + A.x + "-" + A.y).attr("value","0");
$("#block-" + B.x + "-" + B.y).attr("value","0");
$("#block-" + A.x + "-" + A.y).css("background",'');
$("#block-" + B.x + "-" + B.y).css("background",'');
checkWin();
return;
}
Path = [];
$(".selected").removeClass("selected");
}
function lineLink(points,direction)
{
if(!direction)
return false;
else
{
var A = points[0];
var B = points[1];
if(direction == 'h')
{
var tmpA,tmpB;
tmpA = A;
tmpB = B;
if(A.y > B.y)
{
var t = B;
B = A;
A = t;
}
for(var i = A.y + 1; i <= B.y; i++)
{
if(Map[A.x][i] > 0 && !(Map[A.x][i] == B.value && i == B.y))
return false;
}
checkPath(tmpA);
checkPath(tmpB);
return true;
}
else
{
var tmpA,tmpB;
tmpA = A;
tmpB = B;
if(A.x > B.x)
{
var t = B;
B = A;
A = t;
}
for(var i = A.x + 1; i <= B.x; i++)
{
if(Map[i][A.y] > 0 && !(Map[i][A.y] == B.value && i == B.x))
return false;
}
checkPath(tmpA);
checkPath(tmpB);
return true;
}
}
}
function oneCorner(points,condition)
{
if(!condition)
return false;
var pointA,pointB,pointC,pointD;
pointA = points[0];
pointB = points[1];
pointC = {
x : pointB.x,
y : pointA.y,
value : pointA.value
};
pointD = {
x : pointA.x,
y : pointB.y,
value : pointA.value
};
if(Map[pointB.x][pointA.y] <= 0 && lineLink([pointA,pointC],'v') && lineLink([pointC,pointB],'h'))
{
return true;
}
else if(Map[pointA.x][pointB.y] <= 0 && lineLink([pointA,pointD],'h') && lineLink([pointD,pointB],'v'))
{
return true;
}
else
return false;
}
function towCorner(points)
{
var pointA,pointB,pointC;
pointA = points[0];
pointB = points[1];
checkPath(pointA);
var i = pointA.y - 1;
while(Map[pointA.x][i] <= 0 && i >= 0)
{
var pointC = {
x : pointA.x,
y : i,
value : pointA.value
};
if(oneCorner([pointC,pointB],(pointC.x == pointB.x || pointC.y == pointB.y ? false : true)))
return true;
i--;
}
Path = [pointA];
i = pointA.y + 1;
while(Map[pointA.x][i] <= 0 && i < realN && i >= 0)
{
var pointC = {
x : pointA.x,
y : i,
value : pointA.value
};
if(oneCorner([pointC,pointB],(pointC.x == pointB.x || pointC.y == pointB.y ? false : true)))
return true;
i++;
}
Path = [pointA];
i = pointA.x - 1;
while(Map[i][pointA.y] <= 0 && i >= 0)
{
var pointC = {
x : i,
y : pointA.y,
value : pointA.value
};
if(oneCorner([pointC,pointB],(pointC.x == pointB.x || pointC.y == pointB.y ? false : true)))
return true;
i-
基于Jquery的网页版连连看
需积分: 9 165 浏览量
2012-09-02
14:42:34
上传
评论
收藏 141KB RAR 举报
连连看网页版.rar （25个子文件） 
连连看网页版 images 
19.jpg 5KB 2.jpg 4KB 21.jpg 5KB 11.jpg 5KB 13.jpg 4KB 8.jpg 5KB 6.jpg 5KB 1.jpg 5KB 16.jpg 5KB 22.jpg 4KB 12.jpg 5KB 14.jpg 4KB 4.jpg 5KB 5.jpg 5KB 17.jpg 4KB 9.jpg 5KB 18.jpg 5KB 23.jpg 5KB 10.jpg 5KB 7.jpg 5KB 20.jpg 4KB 15.jpg 4KB 3.jpg 4KB
jquery.js 92KB
link.html 11KB资源评论
