기술 컨텐츠가 없으며 코드 로직을 연습하는 데 사용됩니다. 명확한 코드 구조를 갖기 위해 글로벌 변수에 로직 제어 부분을 작성했으며 사용자 인터페이스 작업은 UI 객체에 캡슐화되었을 것입니다. 참조 만. 내가 일할 때, 어떤 사람들은 내 코딩 스타일이 너무 지저분하다고 불평했기 때문에 그렇게 지저분한 것을 쓰려고 노력하고 싶었습니다. .
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 2048 데모 </title>
<meta charset = 'utf-8' />
<!-
708616 JavaScript 현재
http://treemonster.sinaapp.com
->
<헤드>
<div id = 'box'>
MSIE는 SB입니다
<cript>
// 글로벌 메소드는 논리적 제어에 사용됩니다
함수 X4 (N) {
var t = [];
while (n-> 0) T.push ([]);
반환 t;
}
함수 xx (f) {
for (var i = 0; i <ui.nw; i ++) {
for (var j = 0; j <ui.nw; j ++) {
f (i, j);
}
}
}
함수는 (n) {
반품 {
번호 : n,
Movestep : 0,
NewNumber : 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 <ui.nw; i ++) {
var t = [], o = md%2^1;
for (var k = 0; k <ui.nw; 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 = trans (t);
if (o) t [0] .reverse (), t [1] .reverse ();
for (var j = 0; j <ui.nw; j ++) {
var x = i, y = j;
if (md> 2) x = j, y = i;
_arr [x] [y] = t [0] [j];
out [x] [y] = t [1] [J];
}
}
반환 [_arr, out];
}
기능 트랜스 (ARR) {
for (var i = 0, m = 0; i <ui.nw; 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) 계속;
if (arr [j] .needkill) 브레이크;
if (arr [j] .number == _ i.number) {
arr [j] .needkill = 1;
arr [i] .newnumber*= 2;
arr [i] .movestep ++;
m ++;
}
}
}
var out = [];
for (var i = ui.nw; i-;) {
! arr [i] .needkill && arr [i] .number && out.unshift (arr [i] .newnumber);
}
while (out.length <ui.nw) out.push (0);
반환 [arr, out];
}
// 인터페이스 작동이 시작되고 인터페이스 작동의 매개 변수는 전역 메소드를 통해 얻습니다.
function $ (a) {return document.getElementById (a);}
ui = {};
ui.update = function (d) {
(ui.locked) 반환 인 경우;
var map = this.map;
var n = this.times;
ui.locked = 1; // 애니메이션이 완료되기 전에 사용자 작업을 중지합니다
var out = tran (map, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(기능(){
if (_n> n) {
var _q = 0;
xx (기능 (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 = '블록';
O.left = ui.size*j+"px";
o.top = ui.size*i+"px";
});
반환 _Q? ui.addnew () :( ui.locked = 0);
}
xx (기능 (i, j) {
var o = $ ( 'i'+i+'j'+j), t, o1 = o.style, s = d <3? '왼쪽': '상단';
if (t = map [i] [j] [_ n == n? 'newnumber': 'number']) o.innerhtml = t; else o1.display = 'none';
if (_begin [i] [j] === 정의되지 않은) _begin [i] [j] = parseint (o1 [s]);
O1 [s] = (_ 시작 [i] [j]+(맵 [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 (기능 (i, j) {
this.map [i] [j] .number || r.push ([i, j]);
});
if (! r.length) return ui.locked = 0;
var q = 새로운 날짜%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 << 새로운 날짜%2;
b.classname = 'x r'+B.innertext;
var o = 0, q = 5;
(기능(){
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 (기능 (i, j) {
맵 [i] [j] = make (0);
document.write ( "<div class = 'x'id = 'i"+i+"j"+j+"'/
스타일 = '왼쪽 : "+(ui.size*j)+"px; 상단 : "+(ui.size*i)+"px;'> </div>/
<div class = 'y' /
스타일 = '왼쪽 : "+(ui.size*j)+"px; 상단 : "+(ui.size*i)+"px;'> </div> ");
});
ui.addnew ();
ui.addnew ();
};
ui.init (6,3,100,20);
// 자동 재생, 데모만을 위해서만. 이벤트 바인딩이 없습니다
setInterval (function () {ui.update ([1,2,3,4] [math.random ()*4 | 0];}, 200);
</스크립트>
</div>
<스타일>
#box {위치 : 절대; 왼쪽 : 50%; 상단 : 50%; 마진 왼쪽 : -300px; 마진-탑 : -300px;}
.x, .y {배경 : #ddd; 위치 : 절대; 너비; 너비 : 80px; 높이 : 80px; 글꼴 크기 : 30px; 텍스트-정렬 : 중심; 선-높이 : 80px; font-weight : 700; font-family : 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;}
</스타일>
위는이 기사에 설명 된 모든 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다.