Não possui conteúdo técnico, é usado apenas para praticar a lógica de código. Para ter uma estrutura clara de código, escrevi a parte de controle lógica nas variáveis globais, e as operações da interface do usuário foram encapsuladas nos objetos da interface do usuário, o que provavelmente foi o caso. Apenas para referência. Quando eu estava trabalhando, algumas pessoas reclamaram que meu estilo de codificação estava muito confuso, então eu queria tentar escrever algo que não era tão confuso. .
A cópia do código é a seguinte:
<html>
<head>
<title> 2048 Demo </ititle>
<meta charset = 'utf-8' />
<!-
708616 JavaScript presente
http://tremonster.sinaapp.com
->
<head>
<div id = 'caixa'>
Msie é sb
<Cript>
// O método global é usado para controle lógico
função x4 (n) {
var t = [];
enquanto (n-> 0) t.push ([]);
retornar t;
}
função xx (f) {
for (var i = 0; i <ui.nw; i ++) {
for (var j = 0; j <ui.nw; j ++) {
f (i, j);
}
}
}
função make (n) {
retornar {
Número: n,
Movestep: 0,
Número newNumber: n,
Needkill: 0
};
}
função Tran (_arr, MD) {
var undo = x4 (ui.nw);
var out = x4 (ui.nw);
var ud = ui.undo;
if (ud.push (desfazer)> 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 ++) {
desfazer [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] .ververse (), t [1] .ververse ();
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];
}
}
retornar [_arr, fora];
}
função trans (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) continuar;
if (arr [j] .needkill) quebra;
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);
retornar [arr, fora];
}
// A operação da interface é iniciada e os parâmetros da operação da interface são obtidos através de um método global
função $ (a) {return document.getElementById (a);}
Ui = {};
Ui.update = function (d) {
if (ui.locked) retornar;
var map = this.map;
var n = this.Times;
Ui.locked = 1; // Stop User Ação antes que a animação seja concluída
var out = Tran (mapa, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(função(){
if (_n> n) {
var _q = 0;
xx (função (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 = 'bloco';
o.left = ui.size*j+"px";
o.top = ui.size*i+"px";
});
retornar _q? Ui.addnew () :( ui.locked = 0);
}
xx (função (i, j) {
var o = $ ('i'+i+'j'+j), t, o1 = o.style, s = d <3? 'esquerda': 'top';
if (t = map [i] [j] [_ n == n? 'newNumber': 'número']) o.innerhtml = t; else o1.display = 'nenhum';
if (_begin [i] [j] === indefinido) _begin [i] [j] = parseint (o1 [s]);
o1 [s] = (_ Comece [i] [j]+(mapa [i] [j] .movestep*100/n*_n)*math.pow (-1, d))+'px';
});
_n ++;
setTimeout (argumentos.callee, 10);
}) ();
}
Ui.undo = [];
Ui.addnew = function (_q) {
Ui.locked = 1;
var r = [];
xx (função (i, j) {
this.map [i] [j] .Number || r.push ([i, j]);
});
se (! R.Length) retornar Ui.Locked = 0;
var q = nova data%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 << Novo Data%2;
b.className = 'x r'+b.innerText;
var o = 0, q = 5;
(função(){
if (o <100) setTimeout (argumentos.callee, 10);
b.style.Opacity = Math.min (O+= Q ++, 100)/100;
}) ();
Ui.locked = 0; // desbloquear
};
//criar
Ui.init = function (nw, maxundo, tamanho, horários) {
Ui.Times = Times || 8; // Número de tempos de animação vencidos
Ui.nw = nw || 5; // o comprimento lateral da matriz quadrada
Ui.map = map = x4 (ui.nw); // cria um objeto de bloco digital
Ui.size = tamanho || 100; // largura da célula
Ui.maxundo = maxundo || 5; // Número máximo de etapas de desfazer
$ ('caixa'). innerhtml = '';
xx (função (i, j) {
mapa [i] [j] = make (0);
document.write ("<div class = 'x' id = 'i"+i+"j"+j+"'/
style = 'esquerda: "+(ui.size*j)+" px; top: "+(ui.size*i)+" px;'> </div>/
<div class = 'y' /
style = 'esquerda: "+(ui.size*j)+" px; top: "+(ui.size*i)+" px;'> </div> ");
});
Ui.addnew ();
Ui.addnew ();
};
Ui.init (6,3,100,20);
// jogo automático, apenas para demonstração. Nenhuma ligação a eventos
setInterval (function () {ui.update ([1,2,3,4] [Math.random ()*4 | 0]);}, 200);
</script>
</div>
<estilo>
#Box {Posição: Absolute; esquerda: 50%; topo: 50%; margem-esquerda: -300px; margem-top: -300px;}
.x, .y {background: #ddd; posição: absoluto; largura: 80px; altura: 80px; tamanho da fonte: 30px; alinhamento de texto: centro; altura da linha: 80px; peso-fonte: 700; font-família: arial; z-index: 1;}
.x {z-index: 30;}
.r2 {background: #eee4da;}
.r4 {background: #ede0c8;}
.r8 {color: #f9f6f2; fundo: #f2b179;}
.r16 {color: #f9f6f2;
Antecedentes: #f59563; }
.r32 {color: #f9f6f2;
Antecedentes: #f67c5f; }
.r64 {color: #f9f6f2;
Antecedentes: #f65e3b; }
.r128 {color: #f9f6f2;
Antecedentes: #edcf72;}
.r256 {color: #f9f6f2;
Antecedentes: #edcc61;}
.r512 {color: #f9f6f2;
Antecedentes: #edc850;}
.r1024 {color: #f9f6f2;
Antecedentes: #edc53f;}
.r2048 {color: #f9f6f2;
Antecedentes: #edc22e;}
</style>
O exposto acima é todo o conteúdo descrito neste artigo, espero que você goste.