Javascript 2048 games
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:
<HTML>
<Head>
<Title> 2048 DEMO </title>
<Meta charset = 'utf-8'/>
<! --
708616 javascript present
Http://treemonster.sinaapp.com
1696292264@qq.com
-->
<Head>
<Div id = 'box'>
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 <UI. nw; I ++ ){
For (var j = 0; j <UI. nw; 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 <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];
}
}
Return [_ arr, out];
}
Function 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) 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 <UI. nw) out. push (0 );
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 <new Date % 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 ("<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 );
// Automatic playback, which is only used for demonstration. No event binding
SetInterval (function () {UI. update ([200,] [Math. random () * 4 | 0 );
</Script>
</Div>
<Style>
# Box {position: absolute; left: 50%; top: 50%; margin-left:-300px; margin-top:-300px ;}
. X ,. y {background: # ddd; position: absolute; width: 80px; height: 80px; font-size: 30px; text-align: center; line-height: 80px; font-weight: 700; font-family: arial; z-index: 1 ;}
. X {z-index: 30 ;}
. R2 {background: # eee4da ;}
. R4 {background: # ede0c8 ;}
. R8 {color: # f9f6f2; background: # f2b179 ;}
. R16 {color: # f9f6f2;
Background: # f59563 ;}
. R32 {color: # f9f6f2;
Background: # f67c5f ;}
. R64 {color: # f9f6f2;
Background: # f65e3b ;}
. R128 {color: # f9f6f2;
Background: # edcf72 ;}
. R256 {color: # f9f6f2;
Background: # edcc61 ;}
. R512 {color: # f9f6f2;
Background: # edc850 ;}
. R1024 {color: # f9f6f2;
Background: # edc53f ;}
. R2048 {color: # f9f6f2;
Background: # edc22e ;}
</Style>
The above is all the content described in this article. I hope you will like it.
