JavaScript makes 2048 games _jquery

2048.html

<! doctype>
 
 

2048.css

@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

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 til
      E = 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) {Zeroti
      Les.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 <= one) {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;
            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 (' V
      Al ') = = 2048) {return true; }}, Over:function () {for (var i = 0, len = this.tiles.length i < len; i++) {if (This.tiles[i].geta
      Ttribute (' val ') = = 0) {return false; } if (i% 4!= 3) {if (This.equal (this.tiles[i), This.tiles[i + 1)) {returnFalse
        } if (I <) {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 (thi
    S.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); }
}

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