2048 Games Written in Javascript, javascript2048

2048 Games Written in Javascript, javascript2048

Recently, the project is over. You can use javascript to write a small game and practice it. If you do not write well, please give your criticism and suggestions.

The HTML code is as follows:

<! DOCTYPE html> 
The CSS code is as follows:
@ Charset "UTF-8"; # gridPanel {width: 480px; height: 480px; margin: 0 auto; background-color: # bbada0; border-radius: 10px; position: relative ;}. grid ,. cell {width: 100px; height: 100px; border-radius: 6px ;}. grid {background-color: # ccc0b3; margin: 16px 0 0 16px; float: left ;}. cell {/* margin: 16px 0 0 16px; float: left; position: relative; z-index: 10; top:-464px; left: 0; */position: absolute; text-align: center; line-height: 100px; font-size: 60px;} # c00, # c01, # c02, # c03 {top: 16px;} # c10, # c11, # c12, # c13 {top: 132px;} # c20, # c21, # c22, # c23 {top: 248px;} # c30, # c31, # c32, # c33 {top: 364px ;}# c00, # c10, # c20, # c30 {left: 16px ;}# c01, # c11, # c21, # c31 {left: 132px ;}# c02, # c12, # c22, # c32 {left: 248px;} # c03, # c13, # c23, # c33 {left: 364px ;}. n2 {background-color: # eee3da }. n4 {background-color: # ede0c8 }. n8 {background-color: # f2b179 }. n16 {background-color: # f59563 }. n32 {background-color: # f67c5f }. n64 {background-color: # f65e3b }. n128 {background-color: # edcf72 }. n256 {background-color: # edcc61 }. n512 {background-color: #9c0 }. n1024 {background-color: #33b5e5 }. n2048 {background-color: # 09c }. n4096 {background-color: # a6c }. n8192 {background-color: # 93c }. n8 ,. n16 ,. n32 ,. n64 ,. n128 ,. n256 ,. n512 ,. n1024 ,. n2048 ,. n4096 ,. n8192 {color: # fff }. n1024 ,. n2048 ,. n4096 ,. n8192 {font-size: 40px}/* score display */p {width: 480px; margin: 0 auto; font-family: Arial; font-weight: bold; font-size: 40px; padding-top: 15px;}/* Game Over */# gameOver {width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none ;}# gameOver> div {width: 100%; height: 100%; background-color: #555; opacity :. 5 ;}# gameOver> p {width: 300px; height: 200px; border: 1px solid # edcf72; line-height: 1.6em; text-align: center; background-color: # fff; border-radius: 10px; position: absolute; top: 50%; left: 50%; margin-top:-135px; margin-left:-150px ;}. button {padding: 10px; border-radius: 6px; background-color: #9f8b77; color: # fff; cursor: pointer ;}
The javascript code is as follows:
Var game = {data: [], // save the two-dimensional array of all numbers rn: 4, // total number of rows cn: 4, // total number of columns state: 0, // current game status: Running | GameOver RUNNING: 1, GAMEOVER: 0, score: 0, // score isGameOver: function () {// determines whether the game is in the final state. // if the game is not full, false if (! This. isFull () {return false;} else {// otherwise // traverse the two-dimensional array for (var row = 0; row <this. rn; row ++) {for (var col = 0; col <this.cn; col ++) {// if the current element is not the rightmost element if (col <this.cn-1) {// if the current element = The right element if (this. data [row] [col] = this. data [row] [col + 1]) {return false ;}// if the current element is not the bottom element if (row <this. rn-1) {// if the current element = element below if (this. data [row] [col] = this. data [row + 1] [col]) {return false ;}}} return true ;}, start: function () {// The game starts this. state = this. RUNNING; // find the game end interface and hide var div = document. getElementById ("gameOver"); div. style. display = "none"; this. data = [// initialize a two-dimensional array [0, 0, 0, 0], [0, 0, 0], [0, 0, 0], [0, 0, 0]; this. score = 0; // reset the score to 0/* for (var r = 0; r <this. rn; r ++) {this. data [r] = []; // Add each row of array to the empty array for (var c = 0; c <this.cn; c ++) {// Add the default element 0 this to the current empty row array. data [r] [c] = 0 ;}} * // generate 2 or 4 this at two random locations. randomNum (); this. randomNum (); // update the data Page this. updateView () ;}, isFull: function () {// determines whether the current array is full for (var row = 0; row <this. rn; row ++) {// traverse the two-dimensional array for (var col = 0; col <this.cn; col ++) {// as long as the current element = 0 if (this. data [row] [col] = 0) {return false ;}}// (if the loop Exits normally) return true ;}, randomNum: function () {// generate a random null value if (! This. isFull () {// If * not * full, {while (true) {// loop true // 0-3 randomly generate a row number row var row = parseInt (Math. random () * this. rn); // 0-3 randomly generates a column number col var col = parseInt (Math. random () * this.cn); // if data [row] [col] = 0 if (this. data [row] [col] = 0) {// Math. random (): <0.5> = 0.5 // 2 4 // a random number is generated <0.5?, // Put data [row] [col] this. data [row] [col] = Math. random () <0.5? 2: 4; break; // exit loop }}}, updateView: function () {// place the numbers of each cell in the two-dimensional array into the front lattice // traverse each element in the two-dimensional array, for example: row = 2, col = 3, 16for (var row = 0; row <this. rn; row ++) {for (var col = 0; col <this.cn; col ++) {/* all elements and attributes in the webpage, all text objects */var div = document. getElementById ("c" + row + col); // "c23" var curr = this. data [row] [col]; // current element value // modify the content div between the start tag and end tag of the div. innerHTML = curr! = 0? Curr: ""; // modify div's class attribute div. className = curr! = 0? "Cell n" + curr: "cell" // class} var span = document. getElementById ("score"); span. innerHTML = this. score; // judge and modify the game status to GAMEOVER if (this. isGameOver () {this. state = this. GAMEOVER; var div = document. getElementById ("gameOver"); var span = document. getElementById ("finalScore"); span. innerHTML = this. score; // modify the display sub-attribute under the style attribute of div to "block" div. style. display = "block" ;}}, // end of the updateView method/* implement left shift * // * Find the right of the current position, * Next * Number not 0 */getRightNext: function (row, col) {// loop variable: nextc --> indicates the column subscript of the next element // starts from col + 1, traverse the remaining elements in the row, and <cn ends for (var nextc = col + 1; nextc <this.cn; nextc ++) {// If the element to be traversed! = 0 if (this. data [row] [nextc]! = 0) {// return nextc;} return-1; // (if the loop Exits normally) return-1 }, /* judge and move left each element in * specified row */moveLeftInRow: function (row) {// col starts from 0 and traverses each element in the row, <cn-1 ended for (var col = 0; col <this.cn-1; col ++) {// obtain the subscript nextc var nextc = this for the next element not 0 of the current element. getRightNext (row, col); // If nextc =-1, (No! If (nextc =-1) {break;} else {// otherwise // if the current position is = 0, if (this. data [row] [col] = 0) {// set the value of the next position as the current position this. data [row] [col] = this. data [row] [nextc]; // set the next position to 0 this. data [row] [nextc] = 0; col --; // Let col return one cell, repeat once} else if (this. data [row] [col] = this. data [row] [nextc]) {// otherwise, if the current position is = nextc, // The current position * = 2; this. data [row] [col] * = 2; // set the next position to 0; this. data [row] [nextc] = 0; // Add the value of the current position to the score. this. score + = this. d Ata [row] [col] ;}}},/* Move all rows */moveLeft: function () {var oldStr = this. data. toString (); // cyclically traverse each row for (var row = 0; row <this. rn; row ++) {// call the moveLeftInRow method and pass in the current row this. moveLeftInRow (row);} // (after the loop ends) var newStr = this. data. toString (); if (oldStr! = NewStr) {// call randomNum () to generate a random number this. randomNum (); // call updateView () to update the page this. updateView () ;}}, moveRight: function () {var oldStr = this. data. toString (); for (var row = 0; row <this. rn; row ++) {this. moveRightInRow (row);} var newStr = this. data. toString (); if (oldStr! = NewStr) {this. randomNum (); this. updateView () ;}},/* judge and right shift each element in * specified row */moveRightInRow: function (row) {// col starting from the cn-1, end with> 0 for (var col = this.cn-1; col> 0; col --) {var nextc = this. getLeftNext (row, col); if (nextc =-1) {break;} else {if (this. data [row] [col] = 0) {this. data [row] [col] = this. data [row] [nextc]; this. data [row] [nextc] = 0; col ++;} else if (this. data [row] [col] = this. data [row] [nextc]) {this. data [row] [col] * = 2; this. data [row] [nextc] = 0; this. score + = this. data [row] [col] ;}}},/* Find the left side of the current position, and the next number is not 0 */getLeftNext: function (row, col) {// nextc starts from col-1 and traverses the remaining elements in the row,> = 0 ends for (var nextc = col-1; nextc> = 0; nextc --) {// during the traversal process, the same as getRightNext if (this. data [row] [nextc]! = 0) {return nextc ;}} return-1 ;},/* obtain a position not 0 below any position */getDownNext: function (row, col) {// nextr starts from row + 1 to <this. rn ends for (var nextr = row + 1; nextr <this. rn; nextr ++) {if (this. data [nextr] [col]! = 0) {return nextr ;}} return-1 ;},/* judge and move up each element in * Specified column */moveUpInCol: function (col) {// row starts from 0 to <rn-1, traversing each row element for (var row = 0; row <this. rn-1; row ++) {// first obtain the row not 0 below the current position nextr var nextr = this. getDownNext (row, col); if (nextr =-1) {break; // if nextr =-1} else {// otherwise // if the current position is equal to 0 if (this. data [row] [col] = 0) {// Replace the current position with the nextr position element this. data [row] [col] = this. data [nextr] [col]; // set the position of nextr to 0 this. data [nextr] [col] = 0; Row --; // return a row and keep the original position when recycling} else if (this. data [row] [col] = this. data [nextr] [col]) {// otherwise, if the current location is equal to the nextr location // set the current location * = 2 this. data [row] [col] * = 2; // set the nextr position to 0 this. data [nextr] [col] = 0; // Add the value of the current position to the score attribute. this. score + = this. data [row] [col] ;}}},/* Move all columns up */moveUp: function () {var oldStr = this. data. toString (); // traverse all columns for (var col = 0; col <this.cn; this. moveUpInCol (col ++); var newStr = this. data. toString (); if (oldS Tr! = NewStr) {this. randomNum (); this. updateView () ;}},/* Move all columns down */moveDown: function () {var oldStr = this. data. toString (); for (var col = 0; col <this.cn; this. moveDownInCol (col ++); var newStr = this. data. toString (); if (oldStr! = NewStr) {this. randomNum (); this. updateView () ;}}, moveDownInCol: function (col) {// row from this. rn-1, ends at> 0, row -- for (var row = this. rn-1; row> 0; row --) {var nextr = this. getUpNext (row, col); if (nextr =-1) {break;} else {if (this. data [row] [col] = 0) {this. data [row] [col] = this. data [nextr] [col]; this. data [nextr] [col] = 0; row ++;} else if (this. data [row] [col] = this. data [nextr] [col]) {this. data [row] [col] * = 2; this. data [Nextr] [col] = 0; this. score + = this. data [row] [col] ;}}},/* obtain a position not 0 above any position */getUpNext: function (row, col) {for (var nextr = row-1; nextr> = 0; nextr --) {if (this. data [nextr] [col]! = 0) {return nextr ;}} return-1 ;}// onload event: * automatically execute window after page loading. onload = function () {game. start (); // After the page is loaded, the game is automatically started. // when you press the keyboard button, the movement is triggered: document. onkeydown = function () {// obtain the key disk Number of the event object: Step 2 // event object: automatically create the event when the event occurs // encapsulate the event information if (game. state = game. RUNNING) {// Step1: Obtain the event object var e = window. event | arguments [0]; // ie dom standard // Step 2: Obtain the keyboard number: e. keyCode if (e. keyCode = 37) {game. moveLeft ();} else if (e. keyCode = 39) {game. moveRight ();} else if (e. keyCode = 38) {game. moveUp ();} else if (e. keyCode = 40) {game. moveDown ();} // If you press the left button, call moveLeft // otherwise, if you press the right button, call moveRight }}}
The above code is a 2048 game written in javascript. The code is easy to understand and annotated. I hope you will like it.