Home > Developer > JavaScript
2048 of games written in native javascript code. We recommend that you run it in Google Chrome.
2048. html
Copy codeThe Code is as follows:
<! DOCTYPE>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> 2048 </title>
<Link rel = "stylesheet" type = "text/css" href = "css/2048.css"/>
<! -- <Script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js"> </script> -->
<Script type = "text/javascript" src = "js/2048.js"> </script>
</Head>
<Body>
<Div id = "div2048">
<A id = "start"> tap to start :-) </a>
</Div>
</Body>
</Html>
2048. css
Copy codeThe Code is as follows:
@ Charset "UTF-8 ";
# Div2048
{
Width: 500px;
Height: 500px;
Background-color: # b8af9e;
Margin: 0 auto;
Position: relative;
}
# Start
{
Width: 500px;
Height: 500px;
Line-height: 500px;
Display: block;
Text-align: center;
Font-size: 30px;
Background: # f2b179;
Color: # FFFFFF;
}
# Div2048 div. tile
{
Margin: 20px 0px 0px 20px;
Width: 100px;
Height: 40px;
Padding: 30px 0;
Font-size: 40px;
Line-height: 40px;
Text-align: center;
Float: left;
}
# Div2048 div. tile0 {
Background: # ccc0b2;
}
# Div2048 div. tile2
{
Color: # 7c736a;
Background: # eee4da;
}
# Div2048 div. tile4
{
Color: # 7c736a;
Background: # ece0c8;
}
# Div2048 div. tile8
{
Color: # fff7eb;
Background: # f2b179;
}
# Div2048 div. tile16
{
Color: # fff7eb;
Background: # f59563;
}
# Div2048 div. tile32
{
Color: # fff7eb;
Background: # f57c5f;
}
# Div2048 div. tile64
{
Color: # fff7eb;
Background: # f65d3b;
}
# Div2048 div. tile128
{
Color: # fff7eb;
Background: # edce71;
}
# Div2048 div. tile256
{
Color: # fff7eb;
Background: # edcc61;
}
# Div2048 div. tile512
{
Color: # fff7eb;
Background: # ecc850;
}
# Div2048 div. tile1024
{
Color: # fff7eb;
Background: # edc53f;
}
# Div2048 div. tile2048
{
Color: # fff7eb;
Background: # eec22e;
}
2048. js
Copy codeThe Code is as follows:
Function game2048 (container)
{
This. container = container;
This. tiles = new Array (16 );
}
Game2048.prototype = {
Init: function (){
For (var I = 0, len = this. tiles. length; I <len; I ++ ){
Var tile = this. newTile (0 );
Tile. setAttribute ('index', I );
This. container. appendChild (tile );
This. tiles [I] = tile;
}
This. randomTile ();
This. randomTile ();
},
NewTile: function (val ){
Var tile = document. createElement ('div ');
This. setTileVal (tile, val)
Return tile;
},
SetTileVal: function (tile, val ){
Tile. className = 'tile tile' + val;
Tile. setAttribute ('val', val );
Tile. innerHTML = val> 0? Val :'';
},
RandomTile: function (){
Var zeroTiles = [];
For (var I = 0, len = this. tiles. length; I <len; I ++ ){
If (this. tiles [I]. getAttribute ('val') = 0 ){
ZeroTiles. push (this. tiles [I]);
}
}
Var rTile = zeroTiles [Math. floor (Math. random () * zeroTiles. length)];
This. setTileVal (rTile, Math. random () <0.8? 2: 4 );
},
Move: function (direction ){
Var j;
Switch (direction ){
Case 'W ':
For (var I = 4, len = this. tiles. length; I <len; I ++ ){
J = I;
While (j> = 4 ){
This. merge (this. tiles [j-4], this. tiles [j]);
J-= 4;
}
}
Break;
Case's ':
For (var I = 11; I> = 0; I --){
J = I;
While (j <= 11 ){
This. merge (this. tiles [j + 4], this. tiles [j]);
J + = 4;
}
}
Break;
Case 'A ':
For (var I = 1, len = this. tiles. length; I <len; I ++ ){
J = I;
While (j % 4! = 0 ){
This. merge (this. tiles [j-1], this. tiles [j]);
J-= 1;
}
}
Break;
Case 'D ':
For (var I = 14; I> = 0; I --){
J = I;
While (j % 4! = 3 ){
This. merge (this. tiles [j + 1], this. tiles [j]);
J + = 1;
}
}
Break;
}
This. randomTile ();
},
Merge: function (prevTile, currTile ){
Var prevVal = prevTile. getAttribute ('val ');
Var currVal = currTile. getAttribute ('val ');
If (currVal! = 0 ){
If (prevVal = 0 ){
This. setTileVal (prevTile, currVal );
This. setTileVal (currTile, 0 );
}
Else if (prevVal = currVal ){
This. setTileVal (prevTile, prevVal * 2 );
This. setTileVal (currTile, 0 );
}
}
},
Equal: function (tile1, tile2 ){
Return tile1.getAttribute ('val') = tile2.getAttribute ('val ');
},
Max: function (){
For (var I = 0, len = this. tiles. length; I <len; I ++ ){
If (this. tiles [I]. getAttribute ('val') = 2048 ){
Return true;
}
}
},
Over: function (){
For (var I = 0, len = this. tiles. length; I <len; I ++ ){
If (this. tiles [I]. getAttribute ('val') = 0 ){
Return false;
}
If (I % 4! = 3 ){
If (this. equal (this. tiles [I], this. tiles [I + 1]) {
Return false;
}
}
If (I <12 ){
If (this. equal (this. tiles [I], this. tiles [I + 4]) {
Return false;
}
}
}
Return true;
},
Clean: function (){
For (var I = 0, len = this. tiles. length; I <len; I ++ ){
This. container. removeChild (this. tiles [I]);
}
This. tiles = new Array (16 );
}
}
Var game, startBtn;
Window. onload = function (){
Var container = document. getElementById ('div2048 ');
StartBtn = document. getElementById ('start ');
StartBtn. onclick = function (){
This. style. display = 'none ';
Game = game | new game2048 (container );
Game. init ();
}
}
Window. onkeydown = function (e ){
Var keynum, keychar;
If (window. event) {// IE
Keynum = e. keyCode;
}
Else if (e. which) {// Netscape/Firefox/Opera
Keynum = e. which;
}
Keychar = String. fromCharCode (keynum );
If (['w', 's', 'A', 'D']. indexOf (keychar)>-1 ){
If (game. over ()){
Game. clean ();
StartBtn. style. display = 'block ';
StartBtn. innerHTML = 'game over, replay? ';
Return;
}
Game. move (keychar );
}
}
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
