(转)牛啊!JS版连连看出炉
来源:互联网 发布:杭州创业软件口碑 编辑:程序博客网 时间:2024/06/10 01:41
转自:http://topic.csdn.net/u/20090623/13/f0825c45-ac0f-418b-af86-d7dc180a4bcd.html
代码如下:
<SCRIPT LANGUAGE="JavaScript">
<!--
var RowMax = 42;//列数
var ColMax = 22;//行数
var PicMax = 26;//总图片数
var TimeMax = 60;//总时间
var OffSet = 32;//使用系统图标webdings(从asc2的32开始)
var st;//倒计时
var TmpStr = "";
var TmpObj = null;
var TmpTime = 0;
var TmpInt = 0;
var PicAry = new Array(PicMax);
var Matrix = new Array(RowMax);
for(i=0; i<RowMax; i++){
Matrix[i] = new Array(ColMax);
}
var P = new Array(4);
for(i=0; i<4; i++){
P[i] = new Object();
}
//初始化
function SetTab(){
clearInterval(st);//清除倒计时
//从input中取出设定值
TmpInt = parseInt(document.getElementById("setrow").value);//列
if(TmpInt>0 && TmpInt<41 && !(TmpInt%2)){RowMax = (TmpInt+2);}
TmpInt = parseInt(document.getElementById("setcol").value);//行
if(TmpInt>0 && TmpInt<21){ColMax = (TmpInt+2);}
TmpInt = parseInt(document.getElementById("setpic").value);//图片数
if(TmpInt>0 && TmpInt<27){PicMax = TmpInt;}
TmpInt = parseInt(document.getElementById("settime").value);//时间
if(TmpInt>0 && TmpInt<601){TimeMax = TmpInt;}
TmpTime = TimeMax;
OffSet = 40 + Math.floor( (120-PicMax) * Math.random() );//图标asc2值40~120(32~158)
//图片数组,记录每种图片总数的奇偶
for(PicNum=0; PicNum<=PicMax; PicNum++){PicAry[PicNum] = 0;}
PicNum = 0;//总数为奇数的图片种类总数
TmpInt = (RowMax-2) * (ColMax-2);//有效区域的图片总数
//绘制表格
TmpStr = "<table border=/"1/">";
for(j=0; j<ColMax; j++){
TmpStr += "<tr>";
for(i=0; i<RowMax; i++){
TmpStr += "<td onclick=/"CheckP(this,"+i+","+j+");/" width=/"32/" height=/"40/"><font face=/"webdings/" size=/"6/" "
if(0==i || 0==j || (RowMax-1)==i || (ColMax-1)==j){
Matrix[i][j] = 0;//边界填充空单元格,连线用。
TmpStr += ">";
}
else{
TmpInt--;
Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() );
if(TmpInt<PicNum){//图片配对
for(k=1; k<=PicMax; k++){
if(PicAry[k]){
Matrix[i][j] = k;
break;
}
}
}
//更新该类图片的奇偶数数组,以及单张图片总数
if(PicAry[Matrix[i][j]]){
PicAry[Matrix[i][j]] = 0;
PicNum--;
}
else{
PicAry[Matrix[i][j]] = 1;
PicNum++;
}
//填写颜色
var tmp_color = Math.floor(0xFFFF00*Matrix[i][j]/PicMax).toString(16);
TmpStr += "color=/"#";
for(k=tmp_color.length; k<6; k++) TmpStr += "0";
TmpStr += tmp_color;
TmpStr += "/">";
//添图片(webdings图标)
TmpStr += String.fromCharCode(Matrix[i][j] + OffSet);//different pics
}
TmpStr += "</font></td>";
}
TmpStr += "</tr>";
}
TmpStr += "</table>";
TmpInt = (RowMax-2) * (ColMax-2) / 2;//剩余数量,判断结束用。
//TmpStr += "<BGSOUND volume=-1000 src=/"emc.mid/" LOOP=-1>"//背景音乐
document.getElementById("container").innerHTML = TmpStr;//输出表格
document.getElementById("timeleft").innerHTML = TmpTime;//显示剩余时间
document.getElementById("timebar").style.width = 600;//时间条
document.getElementById("timebar").style.backgroundColor = "green";
st = setInterval("ShowTime()",1000);//开始倒计时
}
//X方向连线。(有起点,无终点)
function LineX(x, y, xt){
for( i=x; i!=xt; (x<xt? i++: i--) ){
if(Matrix[i][y]){
return false;
}
}
return true;
}
//Y方向连线。(有起点,无终点)
function LineY(x, y, yt){
for( i=y; i!=yt; (y<yt? i++: i--) ){
if(Matrix[x][i]){
return false;
}
}
return true;
}
//2个点被3条线连接
function LinkP(P1,P2){
//P1在P2下方,交换P1、P2
if(P1.y>P2.y){
P3=P1;
P1=P2;
P2=P3;
}
//P1下方1点(y+1)先纵向再横向是否可连接。(因为起点P1不为空,所以检测其下方一点)
if( LineY(P1.x, (P1.y+1), P2.y) && LineX(P1.x, P2.y, P2.x) ) return true;
//P1先向左侧连接,再检测该点再纵向再横向是否可连接P2。
for(j=(P1.x-1); j>=0; j--){
if(Matrix[j][P1.y]) break;
if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;
}
//P1先向右侧连接,再检测该点再纵向再横向是否可连接P2。
for(j=(P1.x+1); j<RowMax; j++){
if(Matrix[j][P1.y]) break;
if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;
}
//P1在P2右侧,交换P1、P2
if(P1.x>P2.x){
P3=P1;
P1=P2;
P2=P3;
}
if( LineX((P1.x+1), P1.y, P2.x) && LineY(P2.x, P1.y, P2.y) ) return true;
for(j=(P1.y-1); j>=0; j--){
if(Matrix[P1.x][j]) break;
if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;
}
for(j=(P1.y+1); j<ColMax; j++){
if(Matrix[P1.x][j]) break;
if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;
}
return false;
}
//单击检测该点
function CheckP(o,x,y){
if(Matrix[x][y]){//非空
if(null==TmpObj){//之前无选中图片
TmpObj = o;//选中该图片
TmpObj.borderColor = "0000FF";//改变边框颜色
P[0].x = x;//保存该点
P[0].y = y;
}
else if(o!=TmpObj){//非同一点
TmpObj.borderColor = "FFFFFF";//恢复边框颜色
P[1].x = x;//保存该点
P[1].y = y;
if(Matrix[P[0].x][P[0].y]==Matrix[P[1].x][P[1].y]){//同一类图片
if(LinkP(P[0],P[1])){//可以连接
Matrix[P[0].x][P[0].y] = 0;//清零
Matrix[P[1].x][P[1].y] = 0;
TmpObj.innerHTML = "";//原图片显示为空
o.innerHTML = "";
TmpTime++;//奖励时间
TmpInt--;//剩余图片减1
if(!TmpInt){//剩余图片为0
clearInterval(st);//清除倒计时
document.getElementById("container").innerHTML = "";
document.getElementById("timeleft").innerHTML = "";
document.getElementById("timebar").style.backgroundColor = "white";
alert("完成!");
}
}
}
TmpObj = null;//无选中图片
}
}
else{
if(TmpObj){TmpObj.borderColor = "FFFFFF";}//恢复边框颜色
TmpObj = null;//无选中图片
}
}
function ShowTime(){
TmpTime--;//时间减1
//更新时间显示
document.getElementById("timeleft").innerHTML = TmpTime;
document.getElementById("timebar").style.width = Math.floor(600*TmpTime/TimeMax);
if( (TimeMax/TmpTime)>4 ){
document.getElementById("timebar").style.backgroundColor = "red";
}
else if( (TimeMax/TmpTime)>2 ){
document.getElementById("timebar").style.backgroundColor = "yellow";
}
if(!TmpTime){//剩余时间为0
clearInterval(st);//清除倒计时
document.getElementById("container").innerHTML = "";//清屏
document.getElementById("timeleft").innerHTML = "";
document.getElementById("timebar").style.backgroundColor = "white";
alert("时间到!");
}
}
//-->
</SCRIPT>
行数<INPUT id="setrow" type="text" value="16" size="2">
列数<INPUT id="setcol" type="text" value="9" size="2">
图片数<INPUT id="setpic" type="text" value="12" size="2">
时间<INPUT id="settime" type="text" value="60" size="3">秒
<BUTTON onclick="SetTab();">重置</BUTTON>
<DIV id="timeleft" style="float:left;"></DIV>
<DIV id="timebar" style="height:5;width:600;background-color:white;"></DIV>
<DIV id="container"></DIV>
- (转)牛啊!JS版连连看出炉
- JS版连连看
- 连连看js版
- 新鲜出炉的连连看连接算法Python版
- JS 连连看 原生代码
- Java版连连看
- javascript版连连看
- 纯js 连连看,多套图片连连看
- JS连连看源码完美注释版(原创)
- Qt版连连看之极速连连看:设计
- 连连看涟漪版 下载
- 【游戏】JavaScript版连连看
- 自制JQuery版连连看
- 连连看简单终端版
- 局域网版的连连看
- c#2010版连连看
- 连连看
- 连连看.
- 软件的架构与模式之经典架构模式简介
- 用于Commons Digester的基于XML的规则集
- 测试人员如何跟踪和测试新增功能
- win7下的iis7.5 乱码 和 解析不了ASP的ADO连接数据库 的解决方法
- Apache之Digester
- (转)牛啊!JS版连连看出炉
- Flex与.NET互操作(十四):FluorineFx的AMF(Action Message Format)通信
- C#数据库操作的三种经典用法
- SQL Server查询过程的内存实际消耗
- 条款25:考虑写出一个不抛异常的swap函数
- 获取本目录下的文件名
- 教你轻松掌握SQL Server中Case的不同用法
- 输入输出流(一)
- 切换SQL Server 2005中执行SQL的用户