文件名： 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>
页面效果：
你能够按顺序把它排好吗？从小到大？
另外有个问题，我在测试过程中发现有的时候 ，数字排序到最后会出现排不通的情况。 应该是和生成的随机数据有关。不知道哪种规则的数据在生成随机数据的时候需要过滤掉。