Javascript code 2048 games _ javascript tips-js tutorial

This article introduces the idea and code of 2048 javascript, a very popular game last year. For more information, see. Last year, 2048 was very popular, and I had never played it. My colleagues said that if I use JS to write 2048, I only needed more than 100 lines of code;

I tried it today, and the logic is not complex. It mainly involves various data operations on the Data constructor. Then, the interface is updated by re-rendering the DOM, which is not complex as a whole. JS, css, more than 300 lines are combined with HTML;

The underscore is used to generate the interface. the js template method uses jQuery, mainly DOM selection and operations, as well as animation effects. Event binding only supports PC-side compatibility and only binds keydown events;

Put the code on github-page and click here to view the instance: Open the 2048 instance;

As follows:

All the code is divided into two parts: Data and View;

Data is a constructor that constructs Data and inherits some prototype methods;

View is to generate a View based on the Data instance and bind events. I directly think that the event is a controller, and it is not necessary to separate it with the View;

The Data structure is as follows:

/*** @ Desc constructor initialization **/init: function/*** @ desc generates the default data map * @ param void **/generateData: function/*** @ desc randomly fills the data with a block * @ return void **/generationBlock: function/*** @ desc get random number 2 or 4 * @ return 2 | 4; **/getRandom: function/*** @ desc the location where the data content in the data is null * @ return {x: number, y: number} **/getPosition: function/*** @ desc sets column y and column x in the data. The default value is 0. You can also pass the value. * @ param x, y **/set: function/*** @ desc determines whether the horizontal direction is all 0 * @ desc I specifies the position of the two-dimensional array. k indicates the starting position, j: end: **/no_block_horizontal: function no_block_vertica: function/*** @ desc move data to the left. This is very important **/moveLeft: function moveRight: function moveUp: function moveDown: function

With the data model, the view is simple. It mainly uses the bottom-line library underscore template method to generate html strings with the data, and then redraws the interface:

View prototype method:
RenderHTML: function // generate an html string and place it in the interface.
Init: function // constructor Initialization Method
BindEvents: function // bind the event to str and think it is a controller.

Because the original 2048 has the moving Effect of blocks, we have a separate service (the tool method will be inherited by the View), mainly responsible for moving the blocks in the interface, getPost is used for the bottom-line library. During template generation, the horizontal and vertical coordinates must be dynamically generated based on the node location, and then located:

Var util = {animateShowBlock: function () {setTimeout (function () {this. renderHTML ();}. bind (this), 200);}, animateMoveBlock: function (prop) {$ ("# num" + prop. form. y + "" + prop. form. x ). animate ({top: 40 * prop. to. y, left: 40 * prop. to. x}, 200) ;}, // This method is referenced in the bottom-line library template; getPost: function (num) {return num * 40 + "px ";} // This should be regarded as a service ;};

The following is all the code. If the referenced JS uses CDN, you can open it directly: