JavaScript writing 2048 Games _javascript Tips

Last year 2048 very fire, originally I did not play, colleagues said that if you use JS to write 2048 to 100 more lines of code;

Try today, the logic is not complex, mainly data on the data constructor of the various operations, and then by rendering the DOM to implement the interface update, the overall is not complex, js,css, and HTML together on more than 300 lines;

The interface generation uses the Underscore.js template method, uses the jquery, mainly is the DOM choice and the operation as well as the animation effect, the event binding only does the PC side compatibility, only then binds the KeyDown event;

Put the code on the Github-page, click here to view the example: open 2048 instances;

The effect chart is as follows:

All the code is divided into two chunks, Data, View;

Data is a constructor that constructs data that inherits some of the methods on the prototype;

View is based on the instance of data generated views, and binding events, and so on, I directly consider the incident is controller, and view put together, there is no need to separate;

The data is structured as follows:

    /**
     * @desc Constructor initialization */
    init:function
    /**
     * @desc generated the default data map
     * @param void
     * *
    * * Generatedata:function
    /**
     * @desc random a block is filled into the data
     * @return void * * * * *
    Generationblock: function
    /**
     * @desc get random number 2 or 4
     * @return 2 | | 4;
     * * * * * * * * * * * * * *
     @desc to get the data inside the contents of the Getrandom:function
     @return {x:number, y:number}
     * */< C23/>getposition:function
    /**
     * @desc the data in the Y row, column x set, the default is 0, you can also transfer values;
     * @param x, y
     * */
    set:function
    /**
     * @desc the horizontal direction in the range of the two-dimensional array is all 0
     * @desc I clear the position of the two-dimensional array, K is the starting position, J is End
     * */
    no_block_horizontal:function
    no_block_vertica:function
    /**
     * @desc move to the left of the data, This is very important
     * * * * * * *
    moveleft:function
    moveright:function
    moveup:function
    movedown:function

With the data model, the view is simple, mainly using the underscore template method of the base line to generate HTML strings with the data, and then redraw the interface:

The prototype method of view:
Renderhtml:function//Generate HTML strings, then put them in the interface
Init:function//Constructor initialization method
Bindevents:function//To STR binding event, think the controller can

Because the original 2048 has the moving effect of the square, we are independent of a service (tool method, this tool method will be the view inheritance), mainly responsible for the interface of the box to move, Getpost is to the bottom line library, in the process of template generation need to be based on the location of the node dynamically generate the coordinates, Then locate:

  var util = {animateshowblock:function () {settimeout () (
      function () {
        this.renderhtml ();
      }. Bind (this),)
    ,
    animatemoveblock:function (prop) {
      $ ("#num" +prop.form.y+ "" +prop.form.x). Animate ( {top:40*prop.to.y,left:40*prop.to.x},200);
    },
    //The template in the bottom line library references this method;
    Getpost:function (num) {return
      num*40 + ' px ';
    }
    This should be regarded as a service;
  

The following is all the code, the reference JS using a CDN, you can directly open to see:

<! DOCTYPE html>  

The above is the entire contents of this article, I hope you can enjoy.