2048 미니게임_javascript 스킬의 JavaScript 버전

기술적인 내용은 없으며 단지 코드 논리를 연습하는 데 사용됩니다. 명확한 코드 구조를 갖기 위해 로직 제어 부분을 전역 변수에 작성했고, 사용자 인터페이스 작업은 UI 객체에 캡슐화하는 것 정도였습니다. 참고용으로만 사용하세요. 직장에서 누군가 내 코딩 스타일이 너무 지저분하다고 불평을 해서, 그렇게 지저분하지 않은 글을 써보고 싶었다. .

코드 복사 코드는 다음과 같습니다.

MSIE는 SB입니다

//완전한 방법을 사용합니다
함수 x4(n){
    var t=[];
    while(n-->0)t.push([]);
    돌아오세요;
}
함수 xx(f){
    for(var i=0;i         for(var j=0;j             f(i,j);
        }
    }
}
함수 make(n){
    반환 {
        번호:n,
        moveStep:0,
        새로운번호:n,
        needKill:0
    };
}
함수 tran(_arr,md){
    var undo=x4(UI.nw);
    var out=x4(UI.nw);
    var ud=UI.undo;
    if(ud.push(undo)>32)ud.shift();
    for(var i=0;i         var t=[],o=md%2^1;
        for(var k=0;k             실행 취소[i][k]=_arr[i][k].number;
            if(md<3)t.push(_arr[i][k]);else t.push(_arr[k][i]);
        }
        o && t.reverse();
        t=트랜스(t);
        if(o)t[0].reverse(),t[1].reverse();
        for(var j=0;j             var x=i,y=j;
            if(md>2)x=j,y=i;
            _arr[x][y]=t[0][j];
            아웃[x][y]=t[1][j];
        }
    }
    return [_arr,out];
}
함수 trans(arr){
    for(var i=0,m=0;i         if(arr[i].number===0)m ;else arr[i].moveStep =m;
        var _i=arr[i];
        for(var j=i-1;j>=0;j--){
            if(!arr[j].number)continue;
            if(arr[j].needKill)break;
            if(arr[j].number==_i.number){
                arr[j].needKill=1;
                arr[i].newNumber*=2;
                arr[i].moveStep ;
                m ;
            }
        }
    }
    var 출력=[];
    for(var i=UI.nw;i--;){
        !arr[i].needKill && arr[i].number && out.unshift(arr[i].newNumber);
    }
    while(out.length     return [arr,out];
}
//界면操작성, 界면操작성 参数통신 전체 활용 방식 来获得
함수 $(a){return document.getElementById(a);}
UI={};
UI.update=function(d){
    if(UI.locked)return;
    var map=this.map;
    var n=this.times;
    UI.locked=1;//현재 사용하기 전에 사용하기
    var out=tran(map,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{배경:#ddd;위치:절대;너비:80px;높이:80px;글꼴 크기:30px;텍스트-정렬:중심;줄 높이:80px;글꼴-무게:700;글꼴-가족 :arial;z-index:1;}
.x{z-index:30;}
.r2{배경: #eee4da;}
.r4{배경: #ede0c8;}
.r8{색상: #f9f6f2;배경: #f2b179;}
.r16{ 색상: #f9f6f2;
    배경: #f59563; }
.r32{색상: #f9f6f2;
    배경: #f67c5f; }
.r64{ 색상: #f9f6f2;
    배경: #f65e3b; }
.r128{    색상: #f9f6f2;
    배경: #edcf72;}
.r256{    색상: #f9f6f2;
    배경: #edcc61;}
.r512{   색상: #f9f6f2;
    배경: #edc850;}
.r1024{ 색상: #f9f6f2;
    배경: #edc53f;}
.r2048{    색상: #f9f6f2;
    배경: #edc22e;}

以上就是本文所述의 전체 부서 内容了, 希望大家能够喜欢。