Web version 2048 Game Maker

Write in front

after working in the "MU Lesson network 2048 game Production" learning video, video intermittently read, the game has been produced successfully. Because other things did not come and summed up, a drag time has passed, the disk when the discovery of 2048 source code, think about it or push it to GitHub (post), but also write a summary, review, but also thank Liuyubobobo Teacher's lecture.

But the source in hand, do not run under play, how to say the past, haha! Here is the game.

The big picture is the effect of the PC side running, the small picture is the running effect on the iphone5s (Chrome browser debug, how to do reference article: http://1.liangtao.sinaapp.com/?p=628)

What, the effect is good, next I will review the production of 2048 games.

Game architecture

first, before we start making a game, we need to know what the game's logic is. To make it easy for us to choose what technology to consider the game architecture problem. This 2048 game uses a process-oriented design (readers are interested in changing to object-oriented). 2048 games are based on the user response of the game, and relatively simple, the use of the technology is:

• Ui-html/css: Custom Game UI interface.
• Javascript/jquery: Game Master logic.
  

game architecture such as:

The typical MVC pattern, the 2048 game comparison is simple, there is no object-oriented design, the main data directly into the game Master logic on the line, and the need for data is not very complex:

/** * @Description: Main,js * @Author: Lcore *///4*4 lattice var board = new Array (); var score = 0;     Score record var hasconflicted = new Array ();   Record checkerboard each grid is conflicting var StartX,    Starty,    endx,    EndY;                  Touch Support//move direction definition var direction = {    left:1,    up:2,    down:3,    right:4};

after the game Master data definition is complete, the game interface is built, that is, the checker is initialized. This is the following interface:

Here comes the front end css+html, does not stick the code.

Game Logic

game Logic This piece is the core part of the whole game production, after dealing with the logic of the whole game, basically the whole prototype of the game is also done (except for some interactive effects and bugs). Includes game rules, initialization logic, moving logic (whether it can move, how to move, how much to move), the logic of the game's end, and the board's updated logic.

In order to implement the above game logic, some support function support.js will be formed.

Game Interactionafter processing the game logic, a game prototype will come out, but at this time the game is also relatively stiff, not dynamic. You need to add some game interaction effects including random number animations, moving animations, adding effects animations. Eventually form Animation.js.
Optimization

This section mainly deals with some legacy bugs and performs some performance optimizations, including random number generation. Use viewport to add mobile support, handle mobile effects, and more.

The use of viewport can be consulted: http://1.liangtao.sinaapp.com/?p=628

Erection 2048

This part of the main is how to put the local 2048 on the network, set up a lot of methods (plainly, put on the public network server). Here I put on Sina SAE, access address is as follows:http://lcorejianli.sinaapp.com/visit a bit slow-_-!

At last

Would like to have the time to further make it possible to record scores, points ranked, helpless. Interested friends can have their own brainstorming for some more interesting ideas (digital change to pictures, gorgeous sliding, add-on effect, etc.).

GitHub Address: https://github.com/Kiritor/2048

Web version 2048 Game Maker