工作找不到，闲在家写个js的连连看，打发无聊时间，
2012-09-28 13:52
309 查看
<html>
<head>
</head>
<body>
<script>
//设置游戏的初始值
//横向数目
var frame_height = 16;
//纵向数目
var frame_width = 16;
//单元格宽度
var td_width = 30;
//单元格高度
var td_height = 30;
//图片
var pictures = ["1.gif" ,"2.gif" ,"3.gif" ,"4.gif" ,"5.gif" ,"6.gif" ,"7.gif" ,"8.gif" ,"9.gif" ,"10.gif"];
//点击历史，只记两部,全局的变量
var clicks = [ "" , "" ];
//下标转坐标,返回坐标数组,余数对应横坐标，商对应纵坐标
var id2pos = function (id)
{
return [ id % frame_width , parseInt( id / frame_width ) ];
}
//坐标数组转下标，返回下标值
var pos2id = function(pos)
{
return pos[1] * frame_width + pos[0];
}
//检查框架的正确性
var check_frame = function( frame_height , frame_width )
{
if( frame_height * frame_width % 2 )
{
return true;
}
else
{
return false;
}
}
//绘制图形
var load_frame = function ( frame_height , frame_width , frame )
{
var html = "<table border='1px' >";
for( var i = 0 ; i < frame.length ; i++ )
{
var td = "";
var on_click = " onclick = 'click_pic(" + i + ',' + frame_height + ',' + frame_width + ");' ";
var width_heigth = " width='" + td_width + "px' height='" + td_width + "px' ";
// 当前位置无图片
if( frame[i] == "" )
{
td = "<td id='pic_" + i + "' " + width_heigth + on_click + " ></td>" ;
}
// 当前位置有图片
else
{
td = "<td id='pic_" + i + "' " + width_heigth + on_click +" ><img " + width_heigth + " src='img/" + frame[i] + "'/></td>" ;
}
// tr 换行 处理
if( i % frame_width == 0 )
{
html += "<tr>" + td ;
}
else if( i % frame_width == frame_width - 1 )
{
html += td + "</tr>" ;
}
else
{
html += td ;
}
}
html += "</table>"
return html;
}
//单击单元格触发的方法
var click_pic = function( id , frame_height , frame_width )
{
if( clicks[0] == "" )
{
if( document.getElementById( "pic_" + id ).innerHTML != '' )
{
clicks[0] = id;
document.getElementById( "pic_" + id ).style.border = "1px solid #ff0000";
}
}
else
{
if( document.getElementById( "pic_" + id ).innerHTML != '' && id != clicks[0] )
{
if( clicks[1] == "" )
{
clicks[1] = id;
document.getElementById( "pic_" + id ).style.border = "1px solid #ff0000";
var path = cal( clicks[0] , clicks[1] , frame_height , frame_width );
//如果匹配
if( path )
{
//alert(path);
//显示路径
show_path( path );
//消失图片
document.getElementById( "pic_" + clicks[0] ).innerHTML = "";
document.getElementById( "pic_" + clicks[1] ).innerHTML = "";
if( if_end() )
{
alert("无可匹配的方块,游戏结束");
return;
}
}
}
}
if( clicks[0] )
{
document.getElementById( "pic_" + clicks[0] ).style.border = "1px solid #000000";
}
if( clicks[1] )
{
document.getElementById( "pic_" + clicks[1] ).style.border = "1px solid #000000";
}
clicks = [ "" , "" ];
}
}
//显示路径
var show_path = function ( path )
{
for( var i = 0 ; i < path.length ; i++ )
{
document.getElementById( "pic_" + path[i] ).setAttribute( "bgcolor", "#ff0000" );
}
setTimeout( "hide_path('" + path.toString() + "')", 300 );
}
//隐藏路径
var hide_path = function ( path )
{
path = path.split(",") ;
for( var i = 0 ; i < path.length ; i++ )
{
document.getElementById( "pic_" + path[i] ).setAttribute( "bgcolor", "" );
}
}
//计算两点之间是否满足要求，如符合要求返回路线数组的点
var cal = function ( id1 , id2 , frame_height , frame_width )
{
var pos1 = id2pos(id1);
var pos2 = id2pos(id2);
var path = new Array();
//不一样图片，肯定不对
if( get_pic( pos1 ) != get_pic( pos2 ) )
{
return false;
}
//同横坐标，即在同一竖列上
if( pos1[0] == pos2[0] )
{
path = get_line( pos2id(pos1) , pos2id(pos2) );
if( path )
{
return path;
}
//排序保证循环
if( pos1[1] > pos2[1] )
{
var tmp_y = pos1[1];
pos1[1] = pos2[1];
pos2[1] = tmp_y;
}
//虚拟两个点，即转弯处
var tmp_pos1 = [ , ];
var tmp_pos2 = [ , ];
for( var i = 0 ; i < frame_width ; i++ )
{
var tmp_pos1 = [ i , pos1[1] ];
var tmp_pos2 = [ i , pos2[1] ];
var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
{
var lines = new Array();
//alert(lines.concat(line1 , line2 , line3 ));
return lines.concat(line1 , line2 , line3 );
}
else
{
continue;
}
}
}
//同纵坐标,即同在一横排上
else if( pos1[1] == pos2[1] )
{
path = get_line( pos2id(pos1) , pos2id(pos2) );
if( path )
{
return path;
}
//排序保证循环
if( pos1[0] > pos2[0] )
{
var tmp_x = pos1[0];
pos1[0] = pos2[0];
pos2[0] = tmp_x;
}
//虚拟两个点，即转弯处
var tmp_pos1 = [ , ];
var tmp_pos2 = [ , ];
for( var i = 0 ; i < frame_height ; i++ )
{
var tmp_pos1 = [ pos1[0] , i];
var tmp_pos2 = [ pos2[0] , i];
var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
{
var lines = new Array();
//alert(lines.concat(line1 , line2 , line3 ));
return lines.concat(line1 , line2 , line3 );
}
else
{
continue;
}
}
}
//其他情况
else
{
var tmp_pos_1 = [ pos1[0] , pos2[1] ];
var tmp_pos_2 = [ pos2[0] , pos1[1] ];
var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos_1) );
var line2 = get_line( pos2id(pos2) , pos2id(tmp_pos_1) );
if( line1 && line2 && !get_pic(tmp_pos_1) )
{
var lines = new Array();
return lines.concat(line1 , line2 );
}
line1 = get_line( pos2id(pos1) , pos2id(tmp_pos_2) );
line2 = get_line( pos2id(pos2) , pos2id(tmp_pos_2) );
if( line1 && line2 && !get_pic(tmp_pos_2) )
{
var lines = new Array();
return lines.concat(line1 , line2 );
}//-------------------------------------------------------
//排序保证循环
if( pos1[1] > pos2[1] )
{
var tmp_y = pos1[1];
pos1[1] = pos2[1];
pos2[1] = tmp_y;
var tmp_x = pos1[0];
pos1[0] = pos2[0];
pos2[0] = tmp_x;
}
//虚拟两个点，即转弯处
var tmp_pos1 = [ , ];
var tmp_pos2 = [ , ];
for( var i = 0 ; i < frame_width ; i++ )
{
var tmp_pos1 = [ i , pos1[1] ];
var tmp_pos2 = [ i , pos2[1] ];
var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
{
var lines = new Array();
//alert(lines.concat(line1 , line2 , line3 ));
return lines.concat(line1 , line2 , line3 );
}
else
{
continue;
}
}
//排序保证循环
if( pos1[0] > pos2[0] )
{
var tmp_y = pos1[1];
pos1[1] = pos2[1];
pos2[1] = tmp_y;
var tmp_x = pos1[0];
pos1[0] = pos2[0];
pos2[0] = tmp_x;
}
//虚拟两个点，即转弯处
var tmp_pos1 = [ , ];
var tmp_pos2 = [ , ];
for( var i = 0 ; i < frame_height ; i++ )
{
var tmp_pos1 = [ pos1[0] , i];
var tmp_pos2 = [ pos2[0] , i];
var line1 = get_line( pos2id(pos1) , pos2id(tmp_pos1) );
var line2 = get_line( pos2id(tmp_pos1) , pos2id(tmp_pos2) );
var line3 = get_line( pos2id(tmp_pos2) , pos2id(pos2) );
if( line1 && line2 && line3 && !get_pic(tmp_pos2) && !get_pic(tmp_pos1) )
{
var lines = new Array();
//alert(lines.concat(line1 , line2 , line3 ));
return lines.concat(line1 , line2 , line3 );
}
else
{
continue;
}
}
}
return false;
}
//判断是否结束
var if_end = function ()
{
return false;
}
//获取两点之间的线
var get_line = function ( id1 , id2 )
{
var line = new Array();
var j = 0;
var pos_1 = id2pos( id1 );
var pos_2 = id2pos( id2 );
//获取竖线
if( pos_1[0] == pos_2[0] )
{
//排序保证循环
if( pos_1[1] > pos_2[1] )
{
var tmp_y = pos_1[1];
pos_1[1] = pos_2[1];
pos_2[1] = tmp_y;
}
//循环，看是否是通路,并返回
for( var i = pos_1[1]; i <= pos_2[1] ; i++ )
{
var tmp_pos = [ pos_1[0] , i ];
if( !get_pic(tmp_pos) || i == pos_1[1] || i == pos_2[1] )
{
line[j++] = pos2id(tmp_pos);
}
else
{
return false;
}
}
return line;
}
//获取横线
else if( pos_1[1] == pos_2[1] )
{
//排序保证循环
if( pos_1[0] > pos_2[0] )
{
var tmp_x = pos_1[0];
pos_1[0] = pos_2[0];
pos_2[0] = tmp_x;
}
//循环，看是否是通路,并返回
for( var i = pos_1[0] ; i <= pos_2[0] ; i++ )
{
var tmp_pos = [ i , pos_1[1] ];
if( !get_pic( tmp_pos ) || i == pos_1[0] || i == pos_2[0] )
{
line[j++] = pos2id(tmp_pos);
}
else
{
return false;
}
}
return line;
}
else
{
return false;
}
}
//获取图片
var get_pic = function( pos )
{
var tmp_id = pos2id( pos );
var td = document.getElementById( "pic_" + tmp_id );
if( td.innerHTML )
{
return td.childNodes[0].getAttribute("src");
}
else
{
return false;
}
}
//获取实际框架
var get_frame = function( frame_height , frame_width , tmp_frame)
{
if( check_frame( frame_height , frame_width ) )
{
alert("长高错误!");
}
//框架
var frame = new Array( frame_height * this.frame_width );
// ...
var j = 0;
for( var i = 0 ; i < frame.length ; i++ )
{
var pos = id2pos( i );
//处于边界不赋值
if( pos[0] == 0 || pos[1] == 0 || pos[0] == frame_width - 1 || pos[1] == frame_height - 1 )
{
frame[i] = "";
}
//中间赋值
else
{
frame[i] = tmp_frame[j++];
}
}
//返回框架
return frame;
}
//获取中间全是图片那块区域
var get_tmp_frame = function( frame_height , frame_width , pictures)
{
if( check_frame( frame_height , frame_width ) )
{
alert("长高错误!");
}
//临时数组
var tmp_frame = new Array( ( frame_height - 2 ) * ( frame_width - 2 ) );
//随机出来的临时数组的下标
var k = 0;
//图片在数组中的下标
var index = 0 ;
var i = 0 ;
for( i = 0 ; i < (frame_height-2) * (frame_width-2) ; i+=2 )
{
//因为图片必须成对出现，所以一次取两个一样的
var j = 0 ;
for( j = 0 ; j < 2 ; j++ ){
var k = parseInt( Math.random()*( (frame_height-2) * (frame_width-2) ) );
//该位置已被占领则加1,直到没被占领
while( tmp_frame[k] )
{
k++;
if( k == (frame_height-2) * (frame_width-2) )
{
k = 0;
}
}
tmp_frame[k] = pictures[index];
}
index++;
//循环到最后一张图片，则重新从第一张图片选取
if( index == pictures.length )
{
index = 0;
}
}
return tmp_frame;
}
//测试
/*
var a = id2pos(12);
alert( a[0] + " " + a[1] );
var b = pos2id(a);
alert(b);
*/
var a = get_tmp_frame( frame_height , frame_width , pictures);
var b = get_frame( frame_height , frame_width , a );
/*
for( var i = 0 ; i< b.length ; i++)
{
document.write(b[i]+"<br/>");
}
*/
var c = load_frame( frame_height , frame_width , b );
document.write( c );
//alert(get_pic([1,1]));
//alert(get_line( [0,6] , [0,11] ) );
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前台工作笔记（时间戳、js中clone的使用、js中动态填充数据注意事项、前台查错方法的学习）
- OSChina 娱乐弹弹弹——程序猿如何打发无聊的时间
- 工作笔记---js时间插件的使用
- 无聊的时间工作没了激情
- 【工作笔记】js常用方法--格式化时间、格式化金额
- 打发无聊时间
- 一周乱弹2016-3-13（第五个周日，以今年工作开始时间计1，java类在继承2，js 的confirm确认方法3,tomcat 在设置项目的部署路径）
- JS 计算外出办事时间（按照一天工作八小时制）
- 一句话总结—打发无聊的时间
- 一句话总结―打发无聊的时间
- JS工作随笔 05 JS格式化Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)
- (总结)工作中常用的js自定义函数——日期时间类
- js实现检测当前时间是否超过指定时间，而进行操作
- JS window窗口操作暂停和时间间隔
- 时间是什么？（无聊研究社）
- Js处理13位时间戳
- JS 与 php 时间处理
- js时间加减
- js时间戳和时间格式之间的转换
- jquery获取当前系统时间+js两个时间的大小比较