Recently, I have been on a whim and the project is over. I will use JavaScript to write a small game and practice it. If I don’t write well, please give me criticism and suggestions.
The HTML code is as follows
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href=""/> <script src=""></script> <script> </script> </head> <body> <p>Score:<span ></span></p> <div > <!--Background grid--> <!--The1OK--> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <!--The2OK--> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <!--The3OK--> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <!--The4OK--> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <div class="grid"></div> <!--Prospect grid--> <!--The1OK--> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <!--The2OK--> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <!--The3OK--> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <!--The4OK--> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div ><!--Container containing both foreground and background--> <div><!--Translucent gray background--></div> <p><!--Small and medium window--> Game Over!<br> Score:<span ></span><br> <a class="button" onclick="()">Try again!</a> </p> </div> </body> </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 a 2D array of all numbers rn:4, //Total number of rows cn:4, //Total number of columns state: 0, //The current status of the game: Running|GameOver RUNNING:1,
GAMEOVER:0,
score:0, //Fraction isGameOver:function(){//Judge the game status to end //If it is not full, return false if(!()){
return false;
}else{//otherwise // Start from the first element in the upper left corner and traverse the two-dimensional array for(var row=0;row<;row++){
for(var col=0;col<;col++){
//If the current element is not the rightmost element if(col<-1){
// If the current element == the right element if([row][col]==
[row][col+1]){
return false;
}
}
//If the current element is not the lowest element if(row<-1){
// If the current element == the following element if([row][col]==
[row+1][col]){
return false;
}
}
}
}return true;
}
},
start:function(){//The game begins =;
//Find the game end interface and hide it var div=("gameOver");
="none";
=[//Initialize a two-dimensional array [0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
=0; //Reset the score to 0 /*for(var r=0;r<;r++){
[r]=[];//Add each row array to an empty array
for(var c=0;c<;c++){
//Add default element 0 to the current empty row array
[r][c]=0;
}
}*/
//Generate 2 or 4 in two random positions ();
();
//Update the data to the page ();
},
isFull:function(){//Judge whether the current array is fullfor(var row=0;row<;row++){//Transfer the two-dimensional array for(var col=0;col<;col++){
// Just find the current element ==0 if([row][col]==0){
return false;
}
}
}
//(If the loop exits normally) return true;
},
randomNum:function(){//Generate a number in a random empty position if(!()){//If * is not full, only { while(true){//Loop true //0-3 randomly generates a row number row var row=parseInt(()*);
//0-3 randomly generates a column number col number col var col=parseInt(()*);
//If data[row][col]==0 if([row][col]==0){
// ():<0.5 >=0.5
// 2 4
// Randomly generate a number <0.5?2:4, // Put data[row][col] [row][col]=
()<0.5?2:4;
break;//Exit the loop }
}
}
},
updateView:function(){
//Put the numbers of each grid in the two-dimensional array into the foreground grid//Transfer through each element in a two-dimensional array, such as: row=2, col=3, 16for(var row=0;row<;row++){
for(var col=0;col<;col++){
/*All elements, attributes, and texts in the web page are objects*/
var div=("c"+row+col);
//"c23"
var curr=[row][col]; //Current element value //Modify the content between the div start tag and the end tag =curr!=0?curr:"";
//Modify the class attribute of the div =curr!=0?"cell n"+curr:"cell"
// class
}
}
var span=("score");
=;
//Judge and modify the game status to GAMEOVER if(()){
=;
var div=("gameOver");
var span=("finalScore");
=;
//Modify the display sub-property under the style attribute of the div to "block" ="block";
}
},//The end of the updateView method /*Realize left shift*/
/* Find the right side of the current position, *Next *not 0*/
getRightNext:function(row,col){
//Loop variable: nextc—> refers to the column subscript of the next element //Start from col+1, traverse the remaining elements in the row line, <cn ends for(var nextc=col+1;nextc<;nextc++){
// If the element traversed!=0 if([row][nextc]!=0){
// Return nextc return nextc;
}
}return -1;//(The loop exits normally, just return -1 },
/*Judge and move left *Specify each element in the specified row */
moveLeftInRow:function(row){
//col starts at 0, iterates through each element in the row line, ends with <cn-1 for(var col=0;col<-1;col++){
// Get the subscript nextc of the current element that is not 0 var nextc=(row,col);
// If nextc==-1, (it means there is no element with !=0 afterwards) if(nextc==-1){
break;
}else{// Otherwise // If the current position ==0, if([row][col]==0){
// Enter the value of the next position as the current position [row][col]=
[row][nextc];
// The next position is set to 0 [row][nextc]=0;
col--;//Let col back up and check again }else if([row][col]==
[row][nextc]){
// Otherwise, if the current position == nextc position // Set the current position *=2; [row][col]*=2;
// The next position is set to 0; [row][nextc]=0;
// Add the value of the current position to score +=[row][col];
}
}
}
},
/*Move all rows*/
moveLeft:function(){
var oldStr=();
//Loop through each row for(var row=0;row<;row++){
// Call moveLeftInRow method and pass the current line number row (row);
}//(After the loop is over) var newStr=();
if(oldStr!=newStr){
//Call randomNum() to generate a random number ();
//Call updateView() to update the page ();
}
},
moveRight:function(){
var oldStr=();
for(var row=0;row<;row++){
(row);
}
var newStr=();
if(oldStr!=newStr){
();
();
}
},
/*Judge and move right*Every element in specified row**/
moveRightInRow:function(row){
//col starts from cn-1 and ends at >0 for(var col=-1;col>0;col--){
var nextc=(row,col);
if(nextc==-1){
break;
}else{
if([row][col]==0){
[row][col]=
[row][nextc];
[row][nextc]=0;
col++;
}else if([row][col]==
[row][nextc]){
[row][col]*=2;
[row][nextc]=0;
+=[row][col];
}
}
}
},
/* Find the left side of the current position, the next number that is not 0*/
getLeftNext:function(row,col){
//nextc starts from col-1, traverses the remaining elements in the row line, ends with >=0 > for(var nextc=col-1;nextc>=0;nextc--){
// During the traversal process, getRightNext if([row][nextc]!=0){
return nextc;
}
}return -1;
},
/*Get any position where it is not 0 below*/
getDownNext:function(row,col){
//nextr starts from row+1 and ends at < for(var nextr=row+1;nextr<;nextr++){
if([nextr][col]!=0){
return nextr;
}
}return -1;
},
/*Judge and move up*Specify each element in the column*/
moveUpInCol:function(col){
//row starts from 0, to <rn-1, traverses each row of elements for(var row=0;row<-1;row++){
// First get the line nextr below the current position that is not 0 var nextr=(row,col);
if(nextr==-1){ break; // If nextr==-1 }else{// Otherwise // If the current position is equal to 0 if([row][col]==0){
// Replace the current position with the element of the next position [row][col]=
[nextr][col];
// Set nextr position to 0 [nextr][col]=0;
row--;//Return one line and keep in place when recirculating }else if([row][col]==
[nextr][col]){
// Otherwise, if the current position is equal to the nextr position // Set the current position *=2 [row][col]*=2;
// Set nextr position to 0 [nextr][col]=0;
// Add the value of the current position to the score property +=[row][col];
}
}
}
},
/*Move all columns up*/
moveUp:function(){
var oldStr=();
//Transfer all columnsfor(var col=0;col<;(col++));
var newStr=();
if(oldStr!=newStr){
();
();
}
},
/*Move all columns down*/
moveDown:function(){
var oldStr=();
for(var col=0;col<;(col++));
var newStr=();
if(oldStr!=newStr){
();
();
}
},
moveDownInCol:function(col){
//row ends from -1 to >0, row-- for(var row=-1;row>0;row--){
var nextr=(row,col);
if(nextr==-1){
break;
}else{
if([row][col]==0){
[row][col]=
[nextr][col];
[nextr][col]=0;
row++;
}else if([row][col]==
[nextr][col]){
[row][col]*=2;
[nextr][col]=0;
+=[row][col];
}
}
}
},
/*Get a position above any position that is not 0*/
getUpNext:function(row,col){
for(var nextr=row-1;nextr>=0;nextr--){
if([nextr][col]!=0){
return nextr;
}
}return -1;
}
}
//onload event: Automatically execute when the page is loaded *after*=function(){
();//After the page loads, the game will be automatically started // When pressing the keyboard key, trigger movement: =function(){
//Get the keyboard number in the event object: Step 2 //Event object: automatically created when an event occurs // Encapsulated event information if(==){
//Step1: Obtain the event object var e=||arguments[0];
//IE DOM standard //Step2: Obtain the keyboard number: if(==37){
();
}else if(==39){
();
}else if(==38){
();
}else if(==40){
();
}
//If you press the left button, call moveLeft // Otherwise, if you press the right click, call moveRight }
}
}
The above code is a 2048 mini game written using javascript. The code is simple and easy to understand and is accompanied by comments. I hope everyone likes it.