No tiene contenido técnico, solo se usa para practicar la lógica del código. Para tener una estructura de código clara, escribí la parte de control lógico en variables globales, y las operaciones de interfaz de usuario se encapsularon en objetos de interfaz de usuario, que probablemente fue el caso. Solo como referencia. Cuando estaba trabajando, algunas personas se quejaron de que mi estilo de codificación era demasiado desordenado, así que quería intentar escribir algo que no fuera tan desordenado. .
La copia del código es la siguiente:
<html>
<Evista>
<title> 2048 demo </title>
<meta charset = 'utf-8' />
<!-
708616 JavaScript presente
http://treemonster.sinaapp.com
->
<Evista>
<div id = 'box'>
Msie es sb
<script>
// El método global se utiliza para el control lógico
función x4 (n) {
var t = [];
while (n-> 0) t.push ([]);
regresar t;
}
función xx (f) {
para (var i = 0; i <ui.nw; i ++) {
para (var j = 0; j <ui.nw; j ++) {
f (i, j);
}
}
}
función de función (n) {
devolver {
Número: N,
Movestep: 0,
Number: N,
Needkill: 0
};
}
función tran (_arr, md) {
var deshacer = x4 (ui.nw);
var out = x4 (ui.nw);
var ud = ui.undo;
if (ud.push (deshacer)> 32) ud.hift ();
para (var i = 0; i <ui.nw; i ++) {
var t = [], o = md%2^1;
para (var k = 0; k <ui.nw; k ++) {
deshacer [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 ();
para (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];
}
}
return [_arr, out];
}
función trans (arr) {
para (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) ruptura;
if (arr [j] .number == _ i.number) {
arr [j] .needkill = 1;
arr [i] .newnumber*= 2;
arr [i] .movestep ++;
m ++;
}
}
}
var out = [];
para (var i = ui.nw; i-;) {
! arr [i] .needkill && arr [i] .number && out.unshift (arr [i] .newnumber);
}
while (out.length <ui.nw) out.push (0);
regresar [arr, out];
}
// se inicia la operación de la interfaz y los parámetros de la operación de la interfaz se obtienen a través de un método global
función $ (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; // detener la acción del usuario antes de que se complete la animación
var out = tran (map, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(función(){
if (_n> n) {
var _q = 0;
xx (función (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 = 'bloque';
o.left = ui.size*j+"px";
o.top = ui.size*i+"px";
});
return _q? Ui.addnew () :( ui.locked = 0);
}
xx (función (i, j) {
var o = $ ('i'+i+'j'+j), t, o1 = o.style, s = d <3? 'izquierda': 'top';
if (t = map [i] [j] [_ n == n? 'nieve number': '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 (argumentos.callee, 10);
}) ();
}
Ui.undo = [];
Ui.addnew = function (_q) {
Ui.locked = 1;
var r = [];
xx (función (i, j) {
this.map [i] [j] .number || r.push ([i, j]);
});
if (! r.length) return ui.locked = 0;
var q = nueva fecha%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 << nueva fecha%2;
B.classname = 'x r'+b.inntext;
var o = 0, q = 5;
(función(){
if (o <100) setTimeout (argumentos.callee, 10);
B.Style.opacity = Math.min (O+= Q ++, 100)/100;
}) ();
Ui.locked = 0; // desbloquear
};
//crear
Ui.init = function (nw, maxundo, tamaño, tiempos) {
Ui.times = Times || 8; // Número de tiempos de animación retrasados
Ui.nw = nw || 5; // La longitud lateral de la matriz cuadrada
Ui.map = map = x4 (ui.nw); // crear un objeto de bloque digital
Ui.size = size || 100; // ancho de celda
Ui.maxundo = maxundo || 5; // número máximo de pasos de deshacer
$ ('box'). innerhtml = '';
xx (función (i, j) {
mapa [i] [j] = make (0);
document.write ("<div class = 'x' id = 'i"+i+"j"+j+"'/
Style = 'Left: "+(Ui.size*j)+" Px; Top: "+(UI.Size*i)+" Px;'> </div>/
<div class = 'y' /
style = 'Left: "+(ui.size*j)+" px; top: "+(ui.size*i)+" px;'> </div> ");
});
Ui.addnew ();
Ui.addnew ();
};
Ui.init (6,3,100,20);
// Play automático, solo para demostración. Sin atar con eventos
setInterval (function () {ui.update ([1,2,3,4] [math.random ()*4 | 0]);}, 200);
</script>
</div>
<estilo>
#box {posición: absoluto; izquierda: 50%; arriba: 50%; margen-izquierda: -300px; margin-top: -300px;}
.x, .y {fondo: #ddd; posición: absoluto; ancho: 80px; altura: 80px; font-size: 30px; text-align: centro; line-height: 80px; font-weight: 700; Font-Family: Arial; Zindex: 1;}
.x {z-index: 30;}
.r2 {fondo: #eee4da;}
.r4 {fondo: #ede0c8;}
.r8 {color: #f9f6f2; fondo: #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>
Lo anterior es todo el contenido descrito en este artículo, espero que les guste.