Home > Developer > Web Develop

Web Version 2048 game tutorial, 2048 game web version

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Web Version 2048 game tutorial, 2048 game web version

1. Game title
The title of the 2048 game contains the game name, buttons for starting a new game, and game scores.

Create a game page index.html:

<!DOCTYPE html>



Create a sample file 2048.css:


 
    
 
  
  • Set game title styles
    • 

 






header {display : block;margin : 0 auto ;width : 100%;text-align : center;}






 
    
 
  
  • Set game name styles
    • 

 






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;font-family : Arial;color : white;border-radius : 10px;text-decoration : none;}






 
    
 
  
  • Set game button 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 contains 16 blocks.




Edit the game page index.html:




<div id ="grid-container">< div class= "grid-cell" id ="grid-cell-0-0"></ div>< div class= "grid-cell" id ="grid-cell-0-1"></ div>< div class= "grid-cell" id ="grid-cell-0-2"></ div>< div class= "grid-cell" id ="grid-cell-0-3"></ div>< div class= "grid-cell" id ="grid-cell-1-0"></ div>< div class= "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>< 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"></ 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 the sample file 2048.css:


 
    
 
  
  • Set the subject block style of 16 squares
    • 

 






#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;position : absolute;}






2048 how to play the game the more detailed the better how to get a high score game started 4x4 Board there are two numbers on the move through the direction keys every time they move the board will increase the number of the same number will be combined to make a spell 2084!



2048 game gameplay strategy experiences



1. For example, if you want to keep the corners of the rows in the lower right corner, you must note that the fourth column is full every time you press the left and right sides. (when the four rows are full, you can still keep the corners)



2. Try to keep the big number in the lower right corner on the left.



3. Move the number of parts to a smaller value (I usually put the upper left corner of the page to make sure that the computing capability is relatively strong). Use the lower-level root to create a higher root and the root must have a continuity example: when the number of sheets is 512, the figure shows 256 (previously added with a low-level root) adding up the numbers 128, 64, and 32 makes it much easier to end the game. The game actually relies on "Preparation" to clear the meaning of the game. Before we make a difference, we need to urgently put each root out.

2048 simplified enhanced edition for unlimited return Thank you

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
2048 maker apache web server version check web server version web version control 2048 github flappy 2048 2048 cheat

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More