Javascript version 2048 mini-games _ javascript skills

This article will share with you the code of the 2048 mini games made using javascript. I just want to exercise my own programming code style and try to standardize it as much as possible. my friends will give me more suggestions. There is no technical content, but it is used to practice code logic. To ensure the code structure is clear, I write the logic control part in the global variables. the user interface operations are encapsulated in the UI object. this is probably the case. For reference only. Some of my coding styles are too messy at work, so I want to write something that is not so messy ..

The code is as follows:

2048 DEMO

MSIE is SB
Script
// The Global method is used for logical control.
Function x4 (n ){
Var t = [];
While (n --> 0) t. push ([]);
Return t;
}
Function xx (f ){
For (var I = 0; I For (var j = 0; j F (I, j );
}
}
}
Function make (n ){
Return {
Number: n,
MoveStep: 0,
NewNumber: n,
NeedKill: 0
};
}
Function 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 Var t = [], o = md % 2 ^ 1;
For (var k = 0; 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 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];
}
Function trans (arr ){
For (var I = 0, m = 0; 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) continue;
If (arr [j]. needKill) break;
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 Return [arr, out];
}
// The interface operation starts. the interface operation parameters are obtained through the Global method.
Function $ (a) {return document. getElementById ();}
UI = {};
UI. update = function (d ){
If (UI. locked) return;
Var map = this. map;
Var n = this. times;
UI. locked = 1; // stop the user action before the animation is completed
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 ";
});
Return _ 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? '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 (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 = new 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 < 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; // unlock
};
// Create
UI. init = function (nw, maxUndo, size, times ){
UI. times = times | 8; // Number of animation overuse
UI. nw = nw | 5; // side length of the phalanx
UI. map = x4 (UI. nw); // create a digital block object
UI. size = size | 100; // cell width
UI. maxUndo = maxUndo | 5; // maximum number of undo steps
$ ('Box'). innerHTML = '';
Xx (function (I, j ){
Map [I] [j] = make (0 );
Document. write ("

Style = 'left: "+ (UI. size * j) +" px; top: "+ (UI. size * I) +" px; '>

\

Style = 'left: "+ (UI. size * j) +" px; top: "+ (UI. size * I) +" px; '>

");
});
UI. addNew ();
UI. addNew ();
};
UI. init (6, 3 );
// Automatic playback, which is only used for demonstration. No event binding
SetInterval (function () {UI. update ([200,] [Math. random () * 4 | 0 );
Script

The above is all the content described in this article. I hope you will like it.