Он не имеет технического контента, он просто используется для практики логики кода. Чтобы иметь четкую структуру кода, я написал логическую контрольную часть в глобальных переменных, и операции пользовательского интерфейса были инкапсулированы в объекты пользовательского интерфейса, что, вероятно, имело место. Только для справки. Когда я работал, некоторые люди жаловались на то, что мой стиль кодирования был слишком грязным, поэтому я хотел попытаться написать что -то, что было не таким грязным. Полем
Кода -копия выглядит следующим образом:
<html>
<голова>
<название> 2048 Демо </title>
<meta charset = 'utf-8' />
<!-
708616 JavaScript присутствует
http://treemonster.sinaapp.com
->
<голова>
<div id = 'box'>
MSIE SB
<Скрипт>
// глобальный метод используется для логического управления
функция 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 ++) {
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 ();
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];
}
функция 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) продолжить;
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];
}
// Запускается операция интерфейса, и параметры операции интерфейса получены с помощью глобального метода
Функция $ (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; // остановить действие пользователя до завершения анимации
var out = tran (map, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(function () {
if (_n> n) {
var _q = 0;
xx (function (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";
});
вернуть _q? Ui.addnew () :( ui.locked = 0);
}
xx (function (i, j) {
var o = $ ('i'+i+'J'+j), t, o1 = o.style, s = d <3? '' Left ':' top ';
if (t = map [i] [j] [_ n == n?
if (_begin [i] [j] === не определен) _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 = function (_q) {
Ui.locked = 1;
var r = [];
xx (function (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;
(function () {
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 (function (i, j) {
карта [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);
// автоматическая игра, только для демонстрации. Нет связывания событий
setInterval (function () {ui.update ([1,2,3,4] [math.random ()*4 | 0]);}, 200);
</script>
</div>
<style>
#box {позиция: абсолют; слева: 50%; сверху: 50%; маржа-лето: -300px; маржа-вершина: -300px;}
.x, .y {founal: #ddd; положение: абсолютная;
.x {z-index: 30;}
.r2 {founale: #eee4da;}
.r4 {founale: #ede0c8;}
.r8 {color: #f9f6f2; фон: #f2b179;}
.r16 {color: #f9f6f2;
Фон: #F59563; }
.r32 {color: #f9f6f2;
Фон: #F67C5F; }
.r64 {color: #f9f6f2;
Фон: #F65E3B; }
.r128 {color: #f9f6f2;
Фон: #EDCF72;}
.r256 {color: #f9f6f2;
Фон: #EDCC61;}
.r512 {color: #f9f6f2;
Фон: #EDC850;}
.r1024 {color: #f9f6f2;
Фон: #EDC53F;}
.r2048 {color: #f9f6f2;
Фон: #EDC22E;}
</style>
Приведенное выше контент, описанный в этой статье, надеюсь, вам понравится.