Il n'a pas de contenu technique, il est simplement utilisé pour pratiquer la logique du code. Afin d'avoir une structure de code claire, j'ai écrit la partie de contrôle logique dans les variables globales, et les opérations d'interface utilisateur ont été encapsulées dans des objets d'interface utilisateur, ce qui était probablement le cas. Pour référence uniquement. Quand je travaillais, certaines personnes se sont plaints que mon style de codage était trop désordonné, donc je voulais essayer d'écrire quelque chose qui n'était pas si désordonné. .
La copie de code est la suivante:
<html>
<adal>
<Title> 2048 Demo </Title>
<meta charset = 'utf-8' />
<! -
708616 JavaScript présent
http://treemonster.sinaapp.com
->
<adal>
<div id = 'box'>
MSIE est SB
<cript>
// La méthode globale est utilisée pour le contrôle logique
fonction x4 (n) {
var t = [];
tandis que (n -> 0) t.push ([]);
retour t;
}
fonction xx (f) {
pour (var i = 0; i <ui.nw; i ++) {
pour (var j = 0; j <ui.nw; j ++) {
f (i, j);
}
}
}
fonction make (n) {
retour {
Numéro: n,
MoveStep: 0,
NewNumber: n,
NeedKill: 0
};
}
fonction Tran (_arr, md) {
var undo = x4 (ui.nw);
var out = x4 (ui.nw);
var ud = ui.undo;
if (ud.push (undo)> 32) ud.shift ();
pour (var i = 0; i <ui.nw; i ++) {
var t = [], o = md% 2 ^ 1;
pour (var k = 0; k <ui.nw; k ++) {
UNDO [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 ();
pour (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];
}
fonction trans (arr) {
pour (var i = 0, m = 0; i <ui.nw; i ++) {
if (arr [i] .number === 0) m ++; else arr [i] .movestep + = m;
var _i = arr [i];
pour (var j = i-1; j> = 0; j -) {
if (! arr [j] .number) continuer;
if (arr [j] .needkill) casser;
if (arr [j] .number == _ i.number) {
arr [j] .needKill = 1;
arr [i] .newnumber * = 2;
arr [i] .moveStep ++;
m ++;
}
}
}
var out = [];
pour (var i = ui.nw; i -;) {
! arr [i] .needKill && arr [i] .number && out.unshift (arr [i] .newNumber);
}
while (out.length <ui.nw) out.push (0);
return [arr, out];
}
// L'opération d'interface commence et les paramètres de l'opération d'interface sont obtenus via une méthode globale
fonction $ (a) {return document.getElementByid (a);}
Ui = {};
Ui.update = fonction (d) {
if (ui.locked) return;
var map = this.map;
var n = this.Times;
Ui.locked = 1; // Arrêtez l'action de l'utilisateur avant la fin de l'animation
var out = Tran (map, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(fonction(){
if (_n> n) {
var _q = 0;
xx (fonction (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";
});
Retour _Q? Ui.AddNew () :( ui.locked = 0);
}
xx (fonction (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': 'nombre']) o.innerhtml = t; else o1.display = 'non';
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 = fonction (_q) {
Ui.locked = 1;
var r = [];
xx (fonction (i, j) {
this.map [i] [j] .number || r.push ([i, j]);
});
if (! R.Length) return ui.locked = 0;
var q = nouvelle 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 << Nouvelle date% 2;
B.ClassName = 'x r' + b.InnerText;
var o = 0, q = 5;
(fonction(){
if (o <100) setTimeout (arguments.callee, 10);
b.style.opacity = math.min (o + = q ++, 100) / 100;
}) ();
Ui.locked = 0; // déverrouiller
};
//créer
Ui.init = fonction (nw, maxundo, taille, fois) {
Ui.times = Times || 8; // Nombre d'animations en souffrance
Ui.nw = nw || 5; // la longueur latérale de la matrice carrée
Ui.map = map = x4 (ui.nw); // créer un objet de bloc numérique
Ui.size = size || 100; // largeur de cellule
Ui.maxundo = maxundo || 5; // Nombre maximum d'étapes d'annulation
$ ('box'). innerhtml = '';
xx (fonction (i, j) {
map [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);
// jeu automatique, uniquement pour la démonstration. Aucune reliure d'événement
setInterval (function () {ui.update ([1,2,3,4] [math.random () * 4 | 0]);}, 200);
</cript>
</div>
<style>
#box {position: absolu; gauche: 50%; top: 50%; marge-gauche: -300px; marge: -300px;}
.x, .y {Background: #ddd; position: absolu; largeur: 80px; hauteur: 80px; font-taille: 30px; text-align: Center; Line-Height: 80px; Font-weight: 700; Font-Family: Arial; z-index: 1;}
.x {z-index: 30;}
.r2 {Background: # EEE4DA;}
.r4 {fond: # ede0c8;}
.r8 {couleur: # f9f6f2; fond: # f2b179;}
.r16 {couleur: # f9f6f2;
Contexte: # F59563; }
.r32 {couleur: # f9f6f2;
Contexte: # F67C5F; }
.r64 {couleur: # f9f6f2;
Contexte: # F65E3B; }
.r128 {couleur: # f9f6f2;
Contexte: # EDCF72;}
.r256 {couleur: # f9f6f2;
Contexte: # EDCC61;}
.r512 {couleur: # f9f6f2;
Contexte: # EDC850;}
.r1024 {couleur: # f9f6f2;
Contexte: # edc53f;}
.r2048 {Color: # f9f6f2;
Contexte: # EDC22E;}
</ style>
Ce qui précède est tout le contenu décrit dans cet article, j'espère que vous l'aimez.