Web version of 2048 Games Tutorial-Build page

1. Game title
The title of the 2048 game contains three items, such as Game Name, button to start a new game, and game score.

Create Game page index.html:

<! DOCTYPE html>
Create Style file 2048.css:

 
 

  
  
 
   
Set the game title style
 
  
 
 
header {display:block;margin:0 auto; width:100%;text-align:center;}

 
 

  
  
 
   
Set the game name style
 
  
 
 
Header h1 {font-family:arial;font-size:40px;font-weight:bold;}

 
 

  
  
 
   
Set Game button Styles
 
  
 
 
Header #newgamebutton {display:block;margin:20px auto; width:100px;padding:10px 10px; Background-color: #8f7a66; f Ont-family:arial;color:white;border-radius:10px;text-decoration:none;}

 
 

  
  
 
   
Set the game button mouse hover style
 
  
 
 
Header #newgamebutton: hover {background-color: #9f8b77;}

 
 

  
  
 
   
Set the game score style
 
  
 
 
Header p {font-family:arial;font-size:25px;margin:20px auto;}
2. Game Subjects
The main body of the 2048 game consists of 16 blocks.
Edit Game Page index.html:
<div id = "Grid-container" >< div class= "Grid-cell" id = "grid-cell-0-0" ></div>< div class= "Grid-cel L "id =" grid-cell-0-1 "></div>< div class=" Grid-cell "id =" grid-cell-0-2 "></div>< div class=" gr Id-cell "id =" grid-cell-0-3 "></div>< div class=" Grid-cell "id =" grid-cell-1-0 "></div>< div CLA Ss= "Grid-cell" id = "grid-cell-1-1" ></div>< div class= "Grid-cell" id = "Grid-cell-1-2" ></div>< Div class= "Grid-cell" id = "grid-cell-1-3" ></div>< div class= "Grid-cell" id = "grid-cell-2-0" ></DIV&G t;< Div class= "Grid-cell" id = "grid-cell-2-1" ></div>< div class= "Grid-cell" id = "Grid-cell-2-2" >< /div>< Div class= "Grid-cell" id = "grid-cell-2-3" ></div>< div class= "Grid-cell" id = "grid-cell-3-0" &G t;</div>< Div class= "Grid-cell" id = "grid-cell-3-1" ></div>< div class= "Grid-cell" id = "grid-cell- 3-2 "></div>< Div Class= "Grid-cell" id = "grid-cell-3-3" ></div></div > 
Edit Style file 2048.css:

 
 

  
  
 
   
Set the body block style for 16 blocks
 
  
 
 
#grid-container {width:460px;height:460px;padding:20px;margin:50px auto; Background-color: #bbada0; Border-radius : 10px;position:relative;}

 
 

  
  
 
   
Set the style of 16 squares
 
  
 
 
. Grid-cell {width:100px;height:100px;border-radius:6px;background-color: #ccc0b3;p Osition:absolute;}