小时候的一个拼图游戏，做了个简化版，以数字代替图片。
主要功能：1 实现拼图
代码如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8" />
<title>图片移动游戏</title>
<link rel="stylesheet" type="text/css" href="./js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/easyui/themes/icon.css">
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/easyui/jquery.easyui.min.js "></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
table{
border-collapse:collapse;
border-color: black;
margin: 20px;
padding: 2px;
border:4px solid;
}
table tr td{
border:2px solid;
60px;
height:60px;
font-size: 40px;
text-align: center;
}
table tr td.canmove {
/*background: yellow;*/
}
table tr td.fixed {
background: gray;
}
table tr td.blank {
background: blue;
}
table tr td.active {
background: yellow;
}
#start{
90px;
background: #dddddd;
text-align: center;
border:2px solid #a1a1a1;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
padding: 10px 40px;
}
#start:hover{
background: #ddFFdd;
}
</style>
<script type="text/javascript">
var const_wid_num;
function move(){
var cur_obj = $(this);
var cur_val = $(this).attr("value");
var cur_txt = $(cur_obj[0]).text();
console.log(cur_val, cur_txt);
//if she is next to the blank one or special one , then exchange the text of them
var cur_a = Math.floor( parseInt(cur_val) / const_wid_num );
var cur_b = parseInt(cur_val) % const_wid_num;
var bla_obj = $("td.blank");
var bla_val = $(bla_obj[0]).attr("value");
var bla_a = Math.floor( parseInt(bla_val) / const_wid_num );
var bla_b = parseInt(bla_val) % const_wid_num;
if(cur_val == 0 && bla_val == -1 )
{
cur_obj.removeClass("active");
cur_obj.addClass("blank");
bla_obj.removeClass("blank");
bla_obj.addClass("active");
cur_obj.text("");
bla_obj.text(cur_txt);
}
else if( (cur_a == bla_a && cur_b == (bla_b + 1) ) || //空白在
(cur_a == bla_a && cur_b == (bla_b - 1) ) ||
(cur_b == bla_b && cur_a == (bla_a + 1) ) ||
(cur_b == bla_b && cur_a == (bla_a - 1) ) )
{
cur_obj.removeClass("active");
cur_obj.addClass("blank");
bla_obj.removeClass("blank");
bla_obj.addClass("active");
cur_obj.text("");
bla_obj.text(cur_txt);
}
else if(cur_val == -1 && bla_val == 0)
{
cur_obj.removeClass("active");
cur_obj.addClass("blank");
bla_obj.removeClass("blank");
bla_obj.addClass("active");
cur_obj.text("");
bla_obj.text(cur_txt);
}
}
$(function(){
const_wid_num = parseInt($("#num").val());
$("td.canmove").live("click",move);
$("#start").bind("click",function(){
const_wid_num = parseInt($("#num").val());
var max_num = Math.pow( const_wid_num,2);
var arr=[];
var ran_arr=[];
var i = 0;
while(i < max_num)
{
arr[i] = ++i;
}
ran_arr[0]=1;
arr.splice(0,1);
var j = 0;
var arr_l = arr.length;
var tmp ;
while(arr_l)
{
tmp = Math.ceil(arr_l * Math.random() );
ran_arr.push(arr[tmp-1]);
arr.splice(tmp-1,1);
arr_l = arr.length;
}
//redraw the table
var htm_container="" ;
var m,n;
for (m=0;m<=const_wid_num; m++)
{
htm_container += "<tr>";
for(n=0;n<const_wid_num;n++)
{
if(m ==0 && n == 0)
{
htm_container += '<td class="canmove blank" value="-1" ></td>';
}
else if(m == 0 && n != 0)
{
htm_container +='<td class="fixed"> </td>';
}
else if(m != 0)
{
htm_container += ('<td class="canmove active" value="' + ( (m-1)*const_wid_num +n) + '">' + ( ( (m-1)*const_wid_num +n)+1 )+ ' </td>' );
}
}
htm_container += "</tr>";
}
if(htm_container != undefined || htm_container != "")
{
$("#container").html(htm_container);
ran_arr.forEach(function(item,index){
console.log(item,index);
$($("td.active")[index]).text(item);
});
}
});
});
</script>
</head>
<body>
<table id="container">
<tr>
<td class="canmove blank" value="-1"> </td>
<td class="fixed"> </td>
<td class="fixed"> </td>
</tr>
<tr>
<td class="canmove active" value="0"> 1 </td>
<td class="canmove active" value="1">2</td>
<td class="canmove active" value="2">3</td>
</tr>
<tr>
<td class="canmove active" value="3">4</td>
<td class="canmove active" value="4">5</td>
<td class="canmove active" value="5">6</td>
</tr>
<tr>
<td class="canmove active" value="6">7</td>
<td class="canmove active" value="7">8</td>
<td class="canmove active" value="8">9</td>
</tr>
</table>
<spane>你要想拼的方格数，默认为3 </spane><input id="num" type="text" value="3" /><p>
<div id="start" type="button"><span>开始</span></div>
</body>
</html>