今天又在原来的基础上,增加了新的功能:当空白方格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以类的形式实现)+增加批量移动,布布扣,bubuko.com
方格拼图游戏2(javascript以类的形式实现)+增加批量移动
原文:http://www.cnblogs.com/Eastsong/p/3710497.html