Javascript 2048 games

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.