標籤：move 次方 ide rem ase poi out 微軟雅黑 set
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/2.css"/></head><body><p>2048</p><div class="c"><!--<div class="ready block b2" style="top: 0px;">2</div><div class="ready block b2" style="top: 100px;">2</div><div class="ready block b2" style="top: 200px;">2</div>--></div><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script><script src="js/2048.js" type="text/javascript" charset="utf-8"></script></body></html>
*{margin: 0;padding: 0;}body{text-align: center;font-size: 20px;font-family: "微軟雅黑";}button{width: 60px;height: 30px;background: #222;text-align: center;line-height: 30px;color: #fff;border: none;font-size: 18px;margin-top: 10px;outline: none;border-radius: 5px;cursor: pointer;}button:active{opacity: 0.8;}.c{width: 400px;height: 400px;background: #eee;margin: 0 auto;position: relative;}.block{width: 100px;height: 100px;border-radius: 3px;position: absolute;text-align: center;line-height: 100px;font-size: 40px;color: #fff;}.block.b2{background:#21adbe;}.block.b4{background:#3706ef;}.block.b8{background:#06e1ef;}.block.b16{background:#05795c;}.block.b32{background:#08b028;}.block.b64{background:#8af027;}.block.b128{background:#ccf027;}.block.b256{background:#f0b027;}.block.b512{background:#f06e27;}.block.b1024{background:#f027b5;}.block.b2048{background:#f02743;}
/** * 2017.6.9-2017.6.15 */(function(win,doc,$,undefined){var G2048 = function(dom){this.c = $(dom);this.autor="lianxiaozhuang";this.method="對盒子中每一塊設定標記；比如位置00,01,02.....,移動方向鍵時逐行（或列）遍曆方塊使之移動（實現數的疊加）"this.arr = ["2","4","8","16","32","64","128","256","512","1024","2048"];this.arrClassName = ["b2","b4","b8","b16","b32","b64","b128","b256","b512","b1024","b2048"];this.b_width = 100;//方塊寬 。與css保持一致this.maxNum = 16;//盒子最多容納方塊個數this.initNum = 2;//初始化進來個數this.end = false;//結束標誌this.timer = null;//移動後延遲添加方塊this.arrCoreAdd();//ie8添加indexOf方法this.init();}G2048.prototype = {constructor:G2048,init:function(){var _this = this;while(_this.initNum>0){//初始化（盒子裡扔進幾個最初的塊）_this.initNum--;_this.radomCreateBlock();}doc.onkeydown = function(evt) {//鍵盤if(!_this.end){//結束標誌_this.keyBoardEvent(win.event || evt);//鍵盤事件 clearTimeout(_this.timer);_this.timer = setTimeout(function(){_this.radomCreateBlock();//添加一塊},300)}}},arrCoreAdd:function(){//解決ie8下數組沒有indexOf()方法報錯if (!Array.prototype.indexOf){ Array.prototype.indexOf = function(elt /*, from*/){ var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0)? Math.ceil(from): Math.floor(from); if (from < 0) from += len; for (; from < len; from++){ if (from in this &&this[from] === elt) return from; } return -1; };}},radomCreateBlock:function(){//隨機產生一塊放到盒子var _this = this;var c_width = _this.c.width();var c_top = this.c.offset().top,c_left = this.c.offset().left;var bl = ‘<div class="set block b2">‘+_this.arr[0]+‘</div>‘;_this.c.append($(bl).css({"visibility":"hidden"}));//先不顯示；後判斷是否重合var $set = $(".set");if($(".ready").length==_this.maxNum){//滿了_this.end = true;alert("Game Over !");}if(!_this.end){do{//設定隨機位置直到合適為止$set.offset({"top": c_top+parseInt(Math.random()*4)*_this.b_width,"left":c_left+parseInt(Math.random()*4)*_this.b_width})}while(_this.checkLap().lap)//位置不合適false時；在執行do語句}_this.setMark($set);//設定標記$set.css({"visibility":"visible"}).removeClass("set").addClass("ready");//顯示},checkLap:function(){//監測本次是否超出或者重合var _this = this;var lap = false;//不重合標誌var s_top = $(".set").offset().top,s_left = $(".set").offset().left;_this.c.find(".ready").each(function(index,element){var r_top = $(element).offset().top,r_left = $(element).offset().left;if(r_top-s_top==0&&r_left-s_left==0){lap = true;//重合return false;}})return{lap:lap}},moveBlock:function(dir){//移動var _this = this;var c_top = this.c.offset().top,c_left = this.c.offset().left;if(dir=="left"){/////////////////////////for(var loop=0;loop<=3;loop++){//迴圈四次目的（因為沒按一次方向鍵塊只移動一部；一個方向最多移動四次可保證此方向不能再移動）for(var i=0;i<=3;i++){//行var ii = i.toString();//轉為串for(j=1;j<=3;j++){//列（從左至右）var jj = j.toString();var jj_next = (j-1).toString();//當前塊的左邊的那一塊所在列數var $now= $(‘.ready[mark="‘+ii+jj+‘"]‘);//當前var $now_next = $(‘.ready[mark="‘+ii+jj_next+‘"]‘);//當前塊左邊那一塊if($now.length!=0){//遍曆當前位置存在var $now_left = $now.offset().left;if($now_next.length!=0){//當前塊的左邊不為空白位if($now.text()== $now_next.text()){//兩塊值相等；重疊並求和$now_next.remove();//移除重疊塊（其中的一個）var $text = $now.text();var $index = _this.arr.indexOf($text);//當前移動塊的值在數組的下標$now.offset({"left":$now_left-100 }).text(_this.arr[$index+1]).removeClass(_this.arrClassName[$index]).addClass(_this.arrClassName[$index+1]);//數值改變，並更換class名}}else{//當前塊的左邊為空白$now.offset({"left":$now_left-100})}_this.setMark($now);//當前塊從新設定標記}}}}}else if(dir=="right"){////////////////for(var loop=0;loop<=3;loop++){//迴圈四次目的（因為每按一次方向鍵塊只移動一步，一個方向最多移動四次可保證此方向不能再移動）for(var i=0;i<=3;i++){//行var ii = i.toString();//數轉字串for(j=2;j>=0;j--){//列（從右至左）var jj = j.toString();//轉化為字串var jj_next = (j+1).toString();//當前塊的右邊的那一塊所在列var $now= $(‘.ready[mark="‘+ii+jj+‘"]‘);//當前var $now_next = $(‘.ready[mark="‘+ii+jj_next+‘"]‘);//當前塊右邊那一塊if($now.length!=0){//遍曆當前位置存在var $now_left = $now.offset().left;if($now_next.length!=0){//當前塊的右邊不為空白位if($now.text()== $now_next.text()){//兩塊值相等；重疊並求和$now_next.removeClass("ready").hide().remove();//移除重疊塊（其中的一個）var $text = $now.text();var $index = _this.arr.indexOf($text);//當前移動塊的值在數組的下標$now.offset({"left":$now_left+100 }).text(_this.arr[$index+1]).removeClass(_this.arrClassName[$index]).addClass(_this.arrClassName[$index+1]);//數值改變，並更換class名}}else{//當前塊的右邊為空白$now.offset({"left":$now_left+100})}_this.setMark($now);//當前塊從新設定標記}}}}}else if(dir=="up"){///////////////////for(var loop=0;loop<=3;loop++){//迴圈四次目的（因為每按一次方向鍵塊只移動一步，一個方向最多移動四次可保證此方向不能再移動）for(var j=0;j<=3;j++){//列var jj = j.toString();//數轉字串for(i=1;i<=3;i++){//行（從上到下）var ii = i.toString();//轉化為字串var ii_next = (i-1).toString();//當前塊的上邊的那一塊所在行var $now= $(‘.ready[mark="‘+ii+jj+‘"]‘);//當前var $now_next = $(‘.ready[mark="‘+ii_next+jj+‘"]‘);//當前塊上邊那一塊if($now.length!=0){//遍曆當前位置存在var $now_top = $now.offset().top;if($now_next.length!=0){//當前塊的上邊不為空白位if($now.text()== $now_next.text()){//兩塊值相等；重疊並求和$now_next.remove();//移除重疊塊（其中的一個）var $text = $now.text();var $index = _this.arr.indexOf($text);//當前移動塊的值在數組的下標$now.offset({"top":$now_top-100 }).text(_this.arr[$index+1]).removeClass(_this.arrClassName[$index]).addClass(_this.arrClassName[$index+1]);//數值改變，並更換class名}}else{//當前塊的上邊為空白$now.offset({"top":$now_top-100})}_this.setMark($now);//當前塊從新設定標記}}}}}else if(dir=="down"){///////////////////for(var loop=0;loop<=3;loop++){//迴圈四次目的（因為每按一次方向鍵塊只移動一步，一個方向最多移動四次可保證此方向不能再移動）for(var j=0;j<=3;j++){//列var jj = j.toString();//數轉字串for(i=2;i>=0;i--){//行（從下到上）var ii = i.toString();//轉化為字串var ii_next = (i+1).toString();//當前塊的下邊的那一塊所在行var $now= $(‘.ready[mark="‘+ii+jj+‘"]‘);//當前var $now_next = $(‘.ready[mark="‘+ii_next+jj+‘"]‘);//當前塊下邊那一塊if($now.length!=0){//遍曆當前位置存在var $now_top = $now.offset().top;if($now_next.length!=0){//當前塊的下邊不為空白位if($now.text()== $now_next.text()){//兩塊值相等；重疊並求和$now_next.remove();//移除重疊塊（其中的一個）var $text =$now.text();var $index = _this.arr.indexOf($text);//當前移動塊的值在數組的下標$now.offset({"top":$now_top+100 }).text(_this.arr[$index+1]).removeClass(_this.arrClassName[$index]).addClass(_this.arrClassName[$index+1]);//數值改變，並更換class名}}else{//當前塊的上邊為空白$now.offset({"top":$now_top+100})}_this.setMark($now);//當前塊從新設定標記}}}}}},setMark:function(dom){//遍曆每一塊;設定標記(對應所在位置的行列)var c_top = this.c.offset().top,c_left = this.c.offset().left;var $left = dom.offset().left,$top = dom.offset().top;var left_mark = Math.round(($left-c_left)/100).toString(),//此處加Math.round()防止ie解析的不為整數而錯誤top_mark = Math.round(($top-c_top)/100).toString();dom.attr("mark",top_mark+left_mark);//比如第一行第一塊設定為"00"},keyBoardEvent: function(e) {//鍵盤事件var _this = this,_key = e.keyCode || e.which; switch(_key) { case 37: //左鍵_this.moveBlock("left");break; case 38: //向上鍵_this.moveBlock("up");break; case 39: //右鍵_this.moveBlock("right");break; case 40: //向下鍵_this.moveBlock("down");break; case 13: //斷行符號鍵 break;case 32: //空格break;default: break;} }}new G2048(".c")}(window,document,jQuery))
js寫2048遊戲代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
