Home > Developer > JavaScript
Javascript 2048 games, javascript2048
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 ..
Copy codeThe 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
