方格拼图游戏2（javascript以类的形式实现）

文件名： game_css.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;
    width: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{
    width: 90px;
    background: #ffffdd;
    text-align: center;
    border:4px solid #a1a1a1;
    border-radius:10px;
    -moz-border-radius:25px; /* 老的 Firefox */
    padding: 4px 10px;
}    

#start:hover{
     background: #ddFFdd;
} 

主要js文件：number_game2.js

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 = $(this).attr("value");

         var cur_txt = $(cur_obj[0]).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");
         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;

         var i =0;
     
         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);
         }

         if(cur_val == -1)
         {
             game.success();
         }
    },
    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!!!!");
        }        
    }
};

html页面：

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf8" />
    <title>test2</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>     
    <link rel="stylesheet" type="text/css" href="game_css.css">         
    <script type="text/javascript" src="./number_game.js"></script>
    <script type="text/javascript" src="./number_game2.js"></script>
    <script type="text/javascript">
    $(function(){
        game.init();
        $("#start").bind("click",function(){game.rand( parseInt($("#num").val()) );});
        $("td.canmove:not(.blank)").live("click", game.move );
        
    });
        
    </script>
</head>
<body>
    <div id="game_container" class="easyui-tabs" data-options="fit:true">   
        <div id="szpb" title="数字拼板" style="padding:15px;">   
                <div class="easyui-layout"  data-options="fit:true" >
                    <div data-options="region:'west',split:true" title="参数" style="180px;">
                        <div><span>方格数，默认为3 </span></div>
                        设置方格参数：<input id="num" type="text" value="3" size="2" />
                        <div id="start" type="button"><span>开始</span></div>
                    </div>
                    <div data-options="region:'center',title:'数字拼板'">
                        <div id="game_cotainer">
                                                
                        </div>
                    </div>
                </div>
                  

                
        </div>   
          <div id="other" title="sss">sss</div>
    </div>
</body>
</html>

页面效果：

你能够按顺序把它排好吗？从小到大？

另外有个问题，我在测试过程中发现有的时候 ，数字排序到最后会出现排不通的情况。 应该是和生成的随机数据有关。不知道哪种规则的数据在生成随机数据的时候需要过滤掉。