方格拼图游戏2（javascript以类的形式实现）+增加批量移动

今天又在原来的基础上，增加了新的功能：当空白方格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!!!!");
        }        
    }
};