JavaScript makes 2048 games

These days playing 2048 this game, suddenly whim want to practice the idea of writing a program, so The imitation did a, to the current position has not realized dynamic movement, not very good-looking, but play their own imitation of the small game is pretty cool, haha

-->

2048.html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

<! doctype>

2048.css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90

@charset "Utf-8";   #div2048 {width:500px height:500px; Background-color: #b8af9e; margin:0 auto; position:relative;} #start {W idth: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.tile 4 {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 {c Olor: #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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160

function game2048 (container) {This.container = container; this.tiles = new Array;}   Game2048.prototype = {in It:function () {for (var i = 0, len = this.tiles.length i < len; i++) {var tile = this.newtile (0); Tile.setattribute (' I Ndex ', 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 va L: '; }, 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 = one; I >= 0; i--) {j = i; while (J <=) {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 = i >= 0; i--) {j = i (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 <) {if this.equal (this.ti Les[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 '; start btn.innerhtml = ' Game over, replay? ' Return } game.move (Keychar); } }

The above is the full content of this article, I hope you can enjoy.