Web Version 2048 game production, web2048 Production

Web Version 2048 game production, web2048 Production
Preface

After work, I participated in the learning video "MOOC 2048 game production". After watching the video intermittently, the game was also created successfully. Because other things did not come and were summarized, the time was too long. When I sorted out the disk, I found the 2048 source code. I thought about it and pushed it to github (which will be posted later ), by the way, I would like to write a summary and review it. Also, I would like to thank teacher liuyubobobo for teaching.

However, the source code is in the hand and can be used without running it. What should I do in the past? haha! Below is the game.

Big graph is running on the PC side of the effect, small figure is in iphone5s running effect (Chrome browser debug, specific how to do reference articles: http://1.liangtao.sinaapp.com /? P = 628)

How about it? The effect is good. Next I will review the creation of the 2048 game.

Game Architecture

First, before starting to make a game, we need to know what the game logic is. So that we can choose the technology and consider the game architecture. This 2048 game uses a process-oriented design (intended for readers ). 2048 games are user-response-based games that are relatively simple and use the following technologies:

• UI-HTML/CSS: customizes the game UI.
• JavaScript/jQuery: Main game logic.
  

The game architecture is as follows:

The typical MVC mode is that the 2048 game is relatively simple, and the object-oriented design is not used here. The primary data can be directly put into the primary logic of the game, the required 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 whether each grid of a chess board conflicts with var startX, startY, endX, and endY; // Touch support // define var direction = {left: 1, up: 2, down: 3, right: 4} in the movement direction };

After the game master data is defined, the game interface is built, that is, the game board is initialized. That is, the following interface:

If front-end css + html is involved, no code will be pasted.

Game Logic

The game logic is the core part of the entire game production. After the logic of the entire game is well handled, the entire prototype of the game is basically ready (in addition to some interactive effects and bugs ). Including game rules, initialization logic, movement logic (whether to move, how to move, and how much to move), game end logic, and Board update logic.

Then, to implement the above game logic, some supporting functions support. js will be formed.

After the game interaction completes the logic of the game, a prototype of the game will also come out, but the game is still relatively stiff and not dynamic. You need to add some game interaction effects, including random number animation, mobile animation, and bonus animation. The final form is animation. js.
Optimization

This part mainly deals with some legacy bugs and performance optimizations, including the generation of random numbers. Use viewport to add mobile terminal support and process mobile terminal effects.

For the use of viewport, see: http://1.liangtao.sinaapp.com /? P = 628

Setup 2048

This part is mainly about how to put the local 2048 on the network, there are many ways to set up (to put it bluntly, it is on the public network server ). Here I am on Sina SAE, access address is as follows: http://lcorejianli.sinaapp.com/access a little slow -_-!

Last

Originally, I wanted to have time to further record scores and rank points. I had no choice but to put them on hold. If you are interested, you can brainstorm on your own to make some more interesting ideas (you can change the number to an image, slide beautifully, and add extra points ).

Github address: https://github.com/Kiritor/2048

2048 games (2048 by yourself)

2048.malash.net/custom/ custom website ~~~

Create a simple 2048 game with unity3d

You won't be able to use some of them, such as RPG.