JavaScript2048 game instance code (easy to understand) _ javascript skills

The 2048 games made using javascript are very fun and interesting. I will share with you the 2048 games made using javascript code. If you need a friend's reference, I will not talk much about it. I will directly post code to you, if you are satisfied, just take it.

 Untitled documentScript window. onload = function () {// newgame (); var showScore = document. getElementById ('score '); score =; init (); generateOneNumber (); window. onkeydown = function (e) {var e = e | window. event; switch (e. keyCode) {case: if (canMoveLeft (board) {moveLeft (); generateOneNumber (); isgameover () ;}break; case: if (canMoveUp (board )) {moveUp (); generateOneNumber (); isgameover ();} break; case: if (canMove Right (board) {moveRight (); generateOneNumber (); isgameover ();} break; case: if (canMoveDown (board) {moveDown (); generateOneNumber (); isgameover () ;}break; default: break ;};}; function generateOneNumber () {if (! Nospace (board) {var randx = parseInt (Math. floor (Math. random () *); var randy = parseInt (Math. floor (Math. random () *); while (true) {if (board [randx] [randy] =) {break;} var randx = parseInt (Math. floor (Math. random () *); var randy = parseInt (Math. floor (Math. random () *);} var randNumber = Math. random () <.? :; Board [randx] [randy] = randNumber; var gridCell = document. getElementById ('grid-cell-'+ randx +'-'+ randy); gridCell. innerHTML = randNumber; //} else {gameover () ;}} function newgame () {window. location. reload () ;}var board = new Array (); function init () {for (var I =; I <; I ++) {board [I] = new Array (); for (var j =; j <; j ++) {board [I] [j] =; var gridCell = document. getElementById ('grid-cell-'+ I +'-'+ j); gridCell. style. top = (+ I *) + 'px '; gridCell. style. left = (+ j *) + 'px ';}} function getNumberBackgroundColor (number) {switch (number) {case: return "# eeeda"; break; case: return "# edec"; break; case: return "# fb"; break; case: return "# f"; break; case: return "# fcf"; break; case: return "# feb"; break; case: return "# edcf"; break; case: return "# edcc"; break; case: return "# c"; break; case: return "# be"; break; case: return "# c"; break; case: r Eturn "# ac"; break; case: return "# c"; break;} function getNumberColor (number) {if (number <=) {return "# e"} return "white";} function nospace (board) {for (var I =; I <; I ++) {for (var j =; j <; j ++) {if (board [I] [j] =) {return false ;}} return true ;} function canMoveLeft (board) {for (var I =; I <; I ++) {for (var j =; j <; j ++) {if (board [I] [j]! =) {If (board [I] [j-] = | board [I] [j-] = board [I] [j]) {return true ;}}} return false;} function moveLeft () {for (var I =; I <; I ++) {for (var j =; j <; j ++) {if (board [I] [j]! =) {For (var k = j-; k>-; k --) {if (board [I] [k] ==|| board [I] [k] = board [I] [j]) {board [I] [k] = board [I] [k] + board [I] [j]; board [I] [j] =; var gridCell = document. getElementById ('grid-cell-'+ I +'-'+ j); gridCell. innerHTML = ''; var gridCellk = document. getElementById ('grid-cell-'+ I +'-'+ k); gridCellk. innerHTML = board [I] [k]; gridCellk. style. backgroundColor = getNumberBackgroundColor (board [I] [k]); gridCell. Style. backgroundColor = '# cccb'; gridCellk. style. color = getNumberColor (board [I] [k]); gridCell. style. color = 'white'; score + = board [I] [k]; var showScore = document. getElementById ('score '); showScore. innerHTML = score; j = k; //} else {break; // jump out of the var k for loop }}}} function canMoveUp (board) {for (var j =; j <; j ++) {for (var I =; I <; I ++) {if (board [I] [j]! =) {If (board [I-] [j] = | board [I-] [j] = board [I] [j]) {return true ;}}} return false;} function moveUp () {for (var j =; j <; j ++) {for (var I =; I <; I ++) {if (board [I] [j]! =) {For (var k = I-; k>-; k --) {if (board [k] [j] ==|| board [k] [j] = board [I] [j]) {board [k] [j] = board [k] [j] + board [I] [j]; board [I] [j] =; var gridCell = document. getElementById ('grid-cell-'+ I +'-'+ j); gridCell. innerHTML = ''; var gridCellk = document. getElementById ('grid-cell-'+ k +'-'+ j); gridCellk. innerHTML = board [k] [j]; gridCellk. style. backgroundColor = getNumberBackgroundColor (board [k] [j]); gridCell. Style. backgroundColor = '# cccb'; gridCellk. style. color = getNumberColor (board [I] [k]); gridCell. style. color = 'white'; score + = board [k] [j]; var showScore = document. getElementById ('score '); showScore. innerHTML = score; I = k; //} else {break; // jump out of the var k for loop }}}} function canMoveRight (board) {for (var I =; I <; I ++) {for (var j =; j>-; j --) {if (board [I] [j]! =) {If (board [I] [j +] = | board [I] [j +] = board [I] [j]) {return true ;}}} return false;} function moveRight () {for (var I =; I <; I ++) {for (var j =; j>-; j --) {if (board [I] [j]! =) {For (var k = j +; k <; k ++) {if (board [I] [k] ==|| board [I] [k] = board [I] [j]) {board [I] [k] = board [I] [k] + board [I] [j]; board [I] [j] =; var gridCell = document. getElementById ('grid-cell-'+ I +'-'+ j); gridCell. innerHTML = ''; var gridCellk = document. getElementById ('grid-cell-'+ I +'-'+ k); gridCellk. innerHTML = board [I] [k]; gridCellk. style. backgroundColor = getNumberBackgroundColor (board [I] [k]); gridCell. s Tyle. backgroundColor = '# cccb'; gridCellk. style. color = getNumberColor (board [I] [k]); gridCell. style. color = 'white'; score + = board [I] [k]; var showScore = document. getElementById ('score '); showScore. innerHTML = score; j = k; //} else {break; // jump out of the var k for loop }}}} function canMoveDown (board) {for (var j =; j <; j ++) {for (var I =; I>-; I --) {if (board [I] [j]! =) {If (board [I +] [j] = | board [I +] [j] = board [I] [j]) {return true ;}}} return false;} function moveDown () {for (var j =; j <; j ++) {for (var I =; i>-; I --) {if (board [I] [j]! =) {For (var k = I +; k <; k ++) {if (board [k] [j] ==|| board [k] [j] = board [I] [j]) {board [k] [j] = board [k] [j] + board [I] [j]; board [I] [j] =; var gridCell = document. getElementById ('grid-cell-'+ I +'-'+ j); gridCell. innerHTML = ''; var gridCellk = document. getElementById ('grid-cell-'+ k +'-'+ j); gridCellk. innerHTML = board [k] [j]; gridCellk. style. backgroundColor = getNumberBackgroundColor (board [k] [j]); gridCell. s Tyle. backgroundColor = '# cccb'; gridCellk. style. color = getNumberColor (board [I] [k]); gridCell. style. color = 'white'; score + = board [k] [j]; var showScore = document. getElementById ('score '); showScore. innerHTML = score; I = k; //} else {break; // jump out of the var k for loop }}}}} function isgameover () {if (nospace (board) & nomove (board) {gameover () ;}} function nomove (board) {if (canMoveDown (board) | canMoveLeft (board) | CanMoveRight (board) | canMoveUp (board) {return false;} return true;} function bounce (obj, top) {clearInterval (obj. timer); var nSpeed =; var acceleration =; var Flag =; obj. timer = setInterval (function () {nSpeed + = acceleration; nSpeed * = .; if (obj. offsetTop + nSpeed> = top) {obj. style. top = top + 'px '; nSpeed * =-;} else {if (Math. abs (nSpeed) <& Math. abs (top-obj.offsetTop) <) {clearInterval (obj. timer);} e Lse {obj. style. top = obj. offsetTop + nSpeed + 'px ';}},) ;}function gameover () {// alert ("gameover! "); Var gameover = document. createElement ('P'); gameover. id = 'showameover'; gameover. innerHTML = 'game over'; var gridContainer = document. getElementById ('grid-container'); gridContainer. appendChild (gameover); var showGameover = document. getElementById ('showameover'); showGameover. style. left = (gridContainer. offsetWidth-showGameover. offsetWidth)/+ 'px '; bounce (showGameover,);} script
 
  New Game
  
Score:
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

The above code is quite satisfactory. It's all about p + css. If you have any questions about the code, please give us your valuable comments and learn and make progress together, thank you very much for your support for the script home website. Thank you!