Versi JavaScript kemahiran 2048 mini-game_javascript

Tiada kandungan teknikal, hanya digunakan untuk mempraktikkan logik kod. Untuk mempunyai struktur kod yang jelas, saya menulis bahagian kawalan logik dalam pembolehubah global, dan operasi antara muka pengguna dirangkumkan dalam objek UI, dan itu sahaja. Untuk rujukan sahaja. Di tempat kerja, seseorang mengadu bahawa gaya pengekodan saya terlalu kemas, jadi saya ingin cuba menulis sesuatu yang tidak begitu kemas. .

Salin kod Kod adalah seperti berikut:

MSIE ialah SB

//全局方法用于逻辑控制
fungsi x4(n){
    var t=[];
    while(n-->0)t.push([]);
    pulangkan t;
}
fungsi xx(f){
    untuk(var i=0;i         untuk(var j=0;j             f(i,j);
        }
    }
}
function make(n){
    kembali {
        nombor:n,
        moveStep:0,
        newNombor:n,
        needKill:0
    };
}
fungsi tran(_arr,md){
    var undo=x4(UI.nw);
    var out=x4(UI.nw);
    var ud=UI.undo;
    if(ud.push(undo)>32)ud.shift();
    untuk(var i=0;i         var t=[],o=md%2^1;
        untuk(var k=0;k             buat asal[i][k]=_arr[i][k].nombor;
            if(md<3)t.push(_arr[i][k]);lain t.push(_arr[k][i]);
        }
        o && t.reverse();
        t=trans(t);
        if(o)t[0].reverse(),t[1].reverse();
        untuk(var j=0;j             var x=i,y=j;
            if(md>2)x=j,y=i;
            _arr[x][y]=t[0][j];
            keluar[x][y]=t[1][j];
        }
    }
    kembali [_arr,keluar];
}
fungsi trans(arr){
    untuk(var i=0,m=0;i         if(arr[i].number===0)m ; else arr[i].moveStep =m;
        var _i=arr[i];
        untuk(var j=i-1;j>=0;j--){
            jika(!arr[j].nombor)teruskan;
            if(arr[j].needKill)break;
            if(arr[j].number==_i.number){
                arr[j].needKill=1;
                arr[i].newNumber*=2;
                arr[i].moveStep ;
                m ;
            }
        }
    }
    var out=[];
    untuk(var i=UI.nw;i--;){
        !arr[i].needKill && arr[i].nombor && out.unshift(arr[i].newNomber);
    }
    while(out.length     kembali [arr,out];
}
//界面操作开始，界面操作的参数通过全局方法来获得
fungsi $(a){return document.getElementById(a);}
UI={};
UI.update=function(d){
    jika(UI.dikunci)kembali;
    var map=this.map;
    var n=this.times;
    UI.locked=1;//未完成动画之前阻止用户动作
    var out=tran(peta,d)[1];
    var _n=0,_begin=x4(UI.nw);
(function(){
if(_n>n){
            var _q=0;
            xx(function(i,j){
                _q=_q||this.map[i][j].moveStep;
                var o=$('i'+i+'j'+j);
                o.innerHTML=out[i][j]||'';
                o.className='x r'+o.innerText;
                this.map[i][j]=make(out[i][j]);
                o=o.style;
                o.display='block';
                o.left=UI.size*j+"px";
                o.top=UI.size*i+"px";
            });
            return _q ? UI.addNew():(UI.locked=0);
        }
        xx(function(i,j){
            var o=$('i'+i+'j'+j),t,o1=o.style,s=d<3?'left':'top';
if(t=map[i][j][_n==n?'newNumber':'number'])o.innerHTML=t;else o1.display='none';
if(_begin[i][j]===undefined)_begin[i][j]=parseInt(o1[s]);
o1[s]=(_begin[i][j]+(map[i][j].moveStep*100/n*_n)*Math.pow(-1,d))+'px';
});
_n++;
setTimeout(arguments.callee,10);
})();
}
UI.undo=[];
UI.addNew=function(_q){
UI.locked=1;
var r=[];
xx(function(i,j){
this.map[i][j].number || r.push([i,j]);
});
if(!r.length)return UI.locked=0;
var q=new Date%r.length;q=r[q];
var b=$('i'+q[0]+'j'+q[1]);
var m=this.map[q[0]][q[1]];
b.innerHTML=m.number=m.newNumber=2< b.className='x r'+b.innerText;
var o=0,q=5;
(function(){
if(o<100)setTimeout(arguments.callee,10);
b.style.opacity=Math.min(o+=q++,100)/100;
})();
UI.locked=0;//解除锁定
};
//创建
UI.init=function(nw,maxUndo,size,times){
UI.times=times||8;//动画过度次数
UI.nw=nw||5;//方阵边长
UI.map=map=x4(UI.nw);//创建数字块对象
UI.size=size||100;//单元格宽度
UI.maxUndo=maxUndo||5;//最大撤销步数
$('box').innerHTML='';
xx(function(i,j){
map[i][j]=make(0);
document.write("

style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'>

\
        

style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'>

");
    });
    UI.addNew();
    UI.addNew();
};
UI.init(6,3,100,20);
//自动播放，仅用来做演示的。没有做事件绑定
setInterval(function(){UI.update([1,2,3,4][Math.random()*4|0]);},200);

#box{position:absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px;}
.x,.y{background:#ddd;position:absolute;width:80px;height:80px;font-size:30px;text-align:center;line-height:80px;font-weight:700;font-family :arial;z-index:1;}
.x{z-index:30;}
.r2{latar belakang: #eee4da;}
.r4{latar belakang: #ede0c8;}
.r8{warna: #f9f6f2;latar belakang: #f2b179;}
.r16{ warna: #f9f6f2;
    latar belakang: #f59563; }
.r32{warna: #f9f6f2;
    latar belakang: #f67c5f; }
.r64{ warna: #f9f6f2;
    latar belakang: #f65e3b; }
.r128{    warna: #f9f6f2;
    latar belakang: #edcf72;}
.r256{    warna: #f9f6f2;
    latar belakang: #edcc61;}
.r512{   warna: #f9f6f2;
    latar belakang: #edc850;}
.r1024{ warna: #f9f6f2;
    latar belakang: #edc53f;}
.r2048{    warna: #f9f6f2;
    latar belakang: #edc22e;}

以上就是本文所述的全部内容了，希望大家能够喜欢。