The idea of compiling Tetris in Javascript and the example _ javascript skills

This article mainly introduces how to use javascript to compile a Russian Square game and the specific instance code. if you need it, you can refer to the Russian Square game and make mobile compatibility, the difficulty of this game is how to flip the square. the self-implemented method is to put the square into a two-dimensional array, and then rotate the two-dimensional array counterclockwise.

There are also other methods, such as directly using a global variable to represent a direction, turning the square according to this variable during the flip, but the code should write more.

I found an article about algorithms in the library:

Game PC end:

Game mobile terminal:

The template engine uses HandlebarsJS. for better modularization, it also uses requireJS... it is 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 mainly has three model layers: the model layer of the game square, the model layer of the game score, and the model layer of the overall game interface structure;

The control layer is one where the user clicks the Start button of the game and the game starts. if it is a PC, the user listens to the keydown event. if it is a mobile terminal, the DOM with four direction keys is created, listen to the clicking event of the direction key, and the event will rotate the data model of the current square. As for the display, it is the view layer thing. no need to worry about it. the main logic includes the random generation of blocks, collision detection of blocks, elimination of blocks, increase of scores, and re-random generation of blocks:

Run the following code:

Define (["app/util"], function (util) {// score module, used at the beginning of the game; 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) {// initialize the block; var Block = new Block; var mapData ={}; // when the block is changed, we use callback to re-render the interface; block. Onupdate (function () {var blockData = this. get (); // convert the data format to map data; mapData = data. extend (blockData); $ ("# table" ).html (view (mapData);}); block. testTouch = data. testTouch; // if the element has reached the bottom or the element has been unable to be moved by the card master; block. onend (function () {// This indicates that the current block has reached the bottom of data. set (mapData); // we need to generate a new square and call newBlock directly; block. newBlock (); // after data calculation, if a line is connected, the SCORE callback is executed and the SCORE on the current interface is updated accordingly; // if the square goes to the top, the Game Fails. data. oncal Culate (score. addScore, block. destory. bind (block) ;}); // bind event now if (! Util. isMobile () {$ (window ). keydown (function (ev) {if (ev. keyCode = 37) {block. add (block. moveLeft, "left");} else if (ev. keyCode = 39) {block. add (block. moveRight, "right");} else if (ev. keyCode = 40) {block. add (block. moveDown, "down");} else if (ev. keyCode = 38) {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") ;};};};}; // bind an interface event, keyDown; var bindEvent = function () {// start .... $ ("# start "). click (startGame)}; // add a DOM node to the mobile terminal, // bind the event to the mobile terminal; return function () {bindEvent ();};});

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

Run the following code: