JavaScript writing Tetris ideas and examples _javascript skills

Tetris This game has also done the mobile side of the compatibility, the game is how to flip the puzzle, the way to achieve their own is to put the box into a two-dimensional array, and then counterclockwise rotation two-dimensional array.

There are other ways, such as directly using a global variable to represent a direction, flip the time to rotate the box according to this variable, but the code to write more.

In the library to find an article on the algorithm, .... Looking at the kindly stopper:

Game screenshot pc End:

Game screenshot Moving End:

Template engine with HANDLEBARSJS, in order to better modularity, also used Requirejs .... useless;

Run the following code

var cfg = {
  width:14,
  height:20,
  time:400
};
Requirejs.config ({
  baseurl: ' Libs ',
  paths: {
    app: ' ...) /app '
  }
});

Requirejs (["App/controller/maincontroller", "App/view/mobiledom", "app/util"], function (Con, mobiledom, util) {

  if (Util.ismobile ()) {
    mobiledom.adddom ();
  };
  Con ();
});

The game has three model layer: Game block model layer, game score model layer, game overall interface structure model layer;

The control layer is just one, is the user clicks the game to start the button, the game starts, if is the PC, will listen to the KeyDown event, if is the mobile end, on the new four direction Key's Dom, listens for the directional key The Click event, the event will cause the current square the data model to rotate, as to display, That is the view layer of things, first without the tube, the main logic includes the random generation of squares, the collision detection of the box, the elimination of the block, the increase in scores, random generation of squares, and so on:

Run the following code

Define (["App/util"],function (util) {//fractional module, the game will be used when the beginning;
  var score = {};
  Require (["App/model/score"],function (definescore) {score = Definescore;

  });
    var startgame = function () {//disable the current INPUT element;
    $ (this). attr ("Disabled", "true");
      Requirejs (["App/model/data", "App/view/init", "app/model/block"], function (data, view, block) {//init box;
      var block = new Block;

      var mapData = {};
      When the box changes, we use the callback to render the interface again;
        Block.onupdate (function () {var blockdata = This.get ();
        Transforming the data format into map data;
        MapData = Data.extend (Blockdata);
      $ ("#table"). HTML (view (mapData));

      });

      Block.testtouch = Data.testtouch;
      If the element touches the bottom or if the element is already blocked by the card master;
        Block.onend (function () {//This description the current block touches the bottom of the Data.set (MapData);
        We need to regenerate a square, directly call Newblock can;
        Block.newblock ();
        Through data calculation, if there is a connected line, the implementation of score callback, and then update the current interface score;
        If the box ran to the top is the game failed; Data.oncalculate (Score.addscore, bLock.destory.bind (block));

      });
            It is now time to start binding event if (!util.ismobile ()) {$ (window). KeyDown (function (EV) {if (Ev.keycode = = 37) {
          Block.add (Block.moveleft, "left");
          }else if (Ev.keycode = =) {Block.add (Block.moveright, "right");
          }else if (Ev.keycode = =) {Block.add (Block.movedown, "down");
          }else if (Ev.keycode = =) {block.rotate ();
        };
      });
        }else{$ (". Arrow-up"). Tap (function () {block.rotate ();
        });
        $ (". Arrow-down"). Tap (function () {Block.add (Block.movedown, "down");
        });
        $ (". Arrow-left"). Tap (function () {Block.add (Block.moveleft, "left");
        });
        $ (". Arrow-right"). Tap (function () {Block.add (Block.moveright, "right");
      });
    };
  });

  };
  Binding interface events, KeyDown;
  var bindevent = function () {//start. $ ("#start"). Click (startgame)}; //Adds a DOM node to the mobile end,//Then binds the event to the mobile end;
  return function () {bindevent ();
};

 });

The main window of the game is directly considered as a two-dimensional array, all the squares to be displayed are the data in the array, through the template engine, one second updates data to view, the template is as follows:

Run the following code

  <script type= "Text/x-handlebars-template" id= "TPL-TD" >
    {{#each this}}
      <tr>
        {#each This}}
          <td class= ' {{#if this}}block{{/if}} ' >
          </td>
        {/each}}
      </tr>
    {/each}}
  </script>

In order to make the whole content and hint more beautiful, use the hint plugin zepto.alert and bootstrap;

Online Demo: Open