今天又在原来的基础上，增加了新的功能：当空白方格A 与 鼠标点击的方格
B在同一行，或者同一列，而且当他们不是紧挨着的情况，自动将B到A间的方格们，顺次移动填补空白方格。
var game ={
wid_num:3,
cotainerid:"game_cotainer",
init:function(_num){
console.log(‘init‘);
game.wid_num = _num || 3;
console.log( game.wid_num );
var max_num = Math.pow( game.wid_num ,2);
var arr=[];
var i = 0;
while(i < max_num)
{
arr[i] = ++i;
}
game.redraw(arr);
},
rand:function(_num){
console.log(‘rand‘);
game.wid_num= _num;
console.log(game.wid_num);
var max_num = Math.pow( game.wid_num ,2);
var arr=[];
var i = 0;
while(i < max_num)
{
arr[i] = ++i;
}
var ran_arr=[];
// 随机生成后 数组第一个元素必为1
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;
}
game.redraw(ran_arr);
},
redraw:function(arr){
console.log(‘redraw‘);
var htm_container="" ;
var m,n;
for (m=0;m<=game.wid_num; m++)
{
htm_container += "<tr>";
for(n=0;n<game.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)* game.wid_num +n) + ‘">‘ + ( ( (m-1)*game.wid_num +n)+1 )+ ‘ </td>‘ );
}
}
htm_container += "</tr>";
}
if ( htm_container != undefined || htm_container != "" ){
htm_container = ‘<table>‘ + htm_container + ‘</table>‘;
}
if(htm_container != undefined || htm_container != "")
{
$("#"+game.cotainerid).html(htm_container);
arr.forEach(function(item,index){
$($("td.active")[index]).text(item);
});
}
},
move:function(event){
var const_wid_num = game.wid_num ;
var cur_obj = $(this);
var cur_val = cur_obj.attr("value");
var cur_txt = cur_obj.text();
//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")[0]);
var bla_val = bla_obj.attr("value");
var bla_a = Math.floor( parseInt(bla_val) / const_wid_num );
var bla_b = parseInt(bla_val) % const_wid_num;
var i =0;
if(cur_val == 0 && bla_val == -1 )
{
game.exchange(bla_obj,cur_obj);
}
else if(bla_val == -1 && cur_val != 0 && cur_b == 0 ){
var nextobj = $($(‘td[value="0"]‘)[0]);
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
var nextval = parseInt( nextobj.attr("value") ) + game.wid_num;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
while(nextval <= cur_val ){
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
nextval = parseInt( nextobj.attr("value") ) + game.wid_num;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
}
}
else if(cur_val == -1 && bla_val == 0)
{
game.exchange(bla_obj,cur_obj);
}else if( cur_val == -1 && bla_b == 0 && bla_val != 0 ){
//var nextobj = blankobj;
var nextval = parseInt( bla_obj.attr("value") ) - game.wid_num;
var nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
while(nextval >= cur_val){
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
nextval = parseInt( nextobj.attr("value") ) - game.wid_num;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
}
if(cur_val == -1){
nextobj = $($(‘td[value="-1"]‘)[0]);
game.exchange(bla_obj,nextobj);
}
}
else if(cur_a == bla_a && cur_b > bla_b ){
var nextval = parseInt( bla_obj.attr("value") ) + 1 ;
var nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
while(nextval <= cur_val){
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
nextval = parseInt( nextobj.attr("value") ) + 1;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
}
}
else if(cur_a == bla_a && cur_b < bla_b ){
var nextval = parseInt( bla_obj.attr("value") ) - 1 ;
var nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
while(nextval >= cur_val){
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
nextval = parseInt( nextobj.attr("value") ) - 1;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
}
}
else if( cur_b == bla_b && cur_a < bla_a ){
var nextval = parseInt( bla_obj.attr("value") ) - game.wid_num ;
var nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
while(nextval >= cur_val){
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
nextval = parseInt( nextobj.attr("value") ) - game.wid_num;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
}
}
else if( cur_b == bla_b && cur_a > bla_a ){
var nextval = parseInt( bla_obj.attr("value") ) + game.wid_num ;
var nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
while(nextval <= cur_val){
game.exchange(bla_obj,nextobj);
bla_obj = nextobj;
nextval = parseInt( nextobj.attr("value") ) + game.wid_num;
nextobj = $($(‘td[value=‘ + nextval + ‘]‘)[0]);
}
}
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) ) )
{
game.exchange(bla_obj,cur_obj);
/*
cur_obj.removeClass("active");
cur_obj.addClass("blank");
bla_obj.removeClass("blank");
bla_obj.addClass("active");
cur_obj.text("");
bla_obj.text(cur_txt);
*/
}
if(cur_val == -1)
{
game.success();
}
},
exchange:function(blankobj, nextobj ){
var nexttxt = nextobj.text();
nextobj.removeClass("active");
nextobj.addClass("blank");
blankobj.removeClass("blank");
blankobj.addClass("active");
nextobj.text("");
blankobj.text(nexttxt);
},
success:function(){
$("td.canmove").not($("td.blank")).each(function(index, domobj){
var val = parseInt($(domobj).attr("value"));
var txt = parseInt( $(domobj).text() );
b_cor = val == txt -1 ;
return b_cor;
});
if ( true == b_cor)
{
alert("congratulation!!!!");
}
}
};
方格拼图游戏2（javascript以类的形式实现）+增加批量移动