Es hat keinen technischen Inhalt, es wird nur verwendet, um Codelogik zu üben. Um eine klare Codestruktur zu haben, habe ich den Logic Control -Teil in globalen Variablen geschrieben, und die Benutzeroberflächenvorgänge wurden in UI -Objekten eingekapselt, was wahrscheinlich der Fall war. Nur als Referenz. Als ich arbeitete, beschwerten sich einige Leute darüber, dass mein Codierungsstil zu chaotisch sei, also wollte ich versuchen, etwas zu schreiben, das nicht so chaotisch war. .
Die Codekopie lautet wie folgt:
<html>
<kopf>
<title> 2048 Demo </title>
<meta charset = 'utf-8' />
<!-
708616 JavaScript vorhanden
http://treemonster.sinaapp.com
->
<kopf>
<div id = 'box'>
Msie ist sb
<Script>
// Globale Methode wird zur logischen Kontrolle verwendet
Funktion x4 (n) {
var t = [];
while (n-> 0) t.push ([]);
return t;
}
Funktion xx (f) {
für (var i = 0; i <ui.nw; i ++) {
für (var j = 0; j <ui.nw; j ++) {
f (i, j);
}
}
}
Funktion make (n) {
zurückkehren {
Nummer: N,
witchestep: 0,,
NEWNumber: n,
Needkill: 0
};
}
Funktion tran (_arr, md) {
var zuo = x4 (ui.nw);
var out = x4 (ui.nw);
var ud = ui.undo;
if (ud.push (rückgängig)> 32) ud.Shift ();
für (var i = 0; i <ui.nw; i ++) {
var t = [], o = md%2^1;
für (var k = 0; k <ui.nw; k ++) {
rückgängig [i] [k] = _ arr [i] [k] .number;
if (md <3) t.push (_arr [i] [k]); sonst t.push (_arr [k] [i]);
}
o && t.reverse ();
t = trans (t);
if (o) t [0] .Reverse (), t [1] .Reverse ();
für (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];
}
Funktion trans (arr) {
für (var i = 0, m = 0; i <ui.nw; i ++) {
if (arr [i] .number === 0) m ++; sonst arr [i] .movstep+= m;
var _i = arr [i];
für (var j = i-1; j> = 0; j-) {
if (! arr [j] .number) Weiter;
if (arr [j] .Needkill) brechen;
if (arr [j] .number == _ i.number) {
arr [j] .Needkill = 1;
arr [i] .Newnumber*= 2;
arr [i] .Movstep ++;
M ++;
}
}
}
var out = [];
für (var i = ui.nw; i-;) {
!
}
while (out.length <ui.nw) out.push (0);
Rückkehr [arr, out];
}
// Der Schnittstellenvorgang beginnt und die Parameter des Schnittstellenvorgangs werden über eine globale Methode erhalten
Funktion $ (a) {return document.getElementById (a);}
Ui = {};
Ui.Update = Funktion (d) {
if (ui.locked) return;
var map = this.map;
var n = this.times;
Ui.locked = 1; // STOPPENDE Benutzeraktion vor Abschluss der Animation
var out = tran (map, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(Funktion(){
if (_n> n) {
var _q = 0;
xx (Funktion (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 (Funktion (i, j) {
var o = $ ('i'+i+'j'+j), t, o1 = o.style, s = d <3? 'links': 'top';
if (t = map [i] [j] [_ n == n? 'newnumber': 'number']) o.innerhtml = t; sonst 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 (Argumente.Callee, 10);
}) ();
}
Ui.undo = [];
Ui.addNew = Funktion (_Q) {
Ui.locked = 1;
var r = [];
xx (Funktion (i, j) {
this.map [i] [j] .number || R.Push ([i, j]);
});
if (! r.Length) return Ui.locked = 0;
var q = neuer Datum%R.Length; q = r [q];
var b = $ ('i'+q [0]+'j'+q [1]);
var m = this.map [q [0]] [q [1]];
B.Nerhtml = m.number = M.Newnumber = 2 << New Datum%2;
b.className = 'x r'+b.inNertext;
var o = 0, q = 5;
(Funktion(){
if (o <100) setTimeout (Argumente.Callee, 10);
b.Style.opacity = math.min (o+= q ++, 100)/100;
}) ();
Ui.locked = 0; // entsperren
};
//erstellen
Ui.init = Funktion (NW, Maxundo, Größe, Zeiten) {
Ui.times = Zeiten || 8; // Anzahl der überfälligen Animationszeiten
Ui.nw = nw || 5; // die Seitenlänge der Quadratmatrix
Ui.map = map = x4 (ui.nw); // Erstellen Sie ein digitales Blockobjekt
Ui.size = Größe || 100; // Zellbreite
Ui.maxundo = maxundo || 5; // Maximale Anzahl der Rückgängigmachen
$ ('Box'). Innerhtml = '';
xx (Funktion (i, j) {
Karte [i] [j] = make (0);
document.write ("<div class = 'x' id = 'i"+i+"j"+j+"'//
style = 'links: "+(ui.size*j)+" px; top: "+(ui.size*i)+" px;'> </div>//
<div class = 'y' / /
style = 'links: "+(ui.size*j)+" px; top: "+(ui.size*i)+" px;'> </div> ");
});
Ui.addnew ();
Ui.addnew ();
};
UI.init (6,3,100,20);
// automatisches Spiel, nur zur Demonstration. Keine Ereignisbindung
setInterval (function () {Ui.Update ([1,2,3,4] [Math.random ()*4 | 0]);}, 200);
</script>
</div>
<Styles>
#Box {Position: absolut; links: 50%; ober: 50%; Margin-Links: -300px; Margin-Top: -300px;}
.x, .y {Hintergrund: #ddd; Position: absolut; Breite: 80px; Höhe: 80px; Schriftgröße: 30px; Text-Align: Mitte; Linienhöhe: 80px; Schriftgewicht: 700; Schriftfamilie: Arial; Z-Index: 1;}
.x {z-Index: 30;}
.r2 {Hintergrund: #eee4da;}
.r4 {Hintergrund: #ede0c8;}
.r8 {color: #f9f6f2; Hintergrund: #f2b179;}
.r16 {color: #f9f6f2;
Hintergrund: #F59563; }
.R32 {color: #f9f6f2;
Hintergrund: #F67C5f; }
.r64 {color: #f9f6f2;
Hintergrund: #f65e3b; }
.R128 {Farbe: #f9f6f2;
Hintergrund: #EDCF72;}
.R256 {Farbe: #f9f6f2;
Hintergrund: #EDCC61;}
.R512 {Farbe: #f9f6f2;
Hintergrund: #EDC850;}
.R1024 {Farbe: #f9f6f2;
Hintergrund: #EDC53F;}
.R2048 {Farbe: #f9f6f2;
Hintergrund: #edc22e;}
</style>
Das obige Inhalt ist der in diesem Artikel beschriebene Inhalt. Ich hoffe, es gefällt Ihnen.