Javascript Russian square game code explanation! (1)

Javascript Russian square game code explanation! (1)

The code of this Russian square is written in JavaScript, which is easy to understand;

The full code consists of static classes and static variable members;

The full script configures OLSFK. Options = {...} globally by implementing the code {...}

Defines the starting coordinate of the square and the respective rotation points;

Start from the initialization of the Tetris interface, then listen to the keyboard events; as well as left and right, downward and rotating action judgment, re-rendering the square location;

Determine whether or not to cancel the operation, as well as the corresponding addition level judgment, execution speed, and extra points for execution;

Finally, judge whether the current level is greater than the defined maximum level to determine whether the end is over;

Code Description

 
 

  
  
OLSFK. Options = {// related parameters
  
  
Width: 12, // number of horizontal squares on the Interface
  
  
Height: 20, // number of vertical squares on the Interface
  
  
BoxWidth: '16px ',
  
  
CurLevel: 1,
  
  
Speed: 1000, // setInterval, setTimeout
  
  
Direct: {// you can set whether it is a s d w, or even running →
  
  
Down: 40,/* run speed */
  
  
Left: 37,
  
  
Right: 39,
  
  
Rotate: 38
  
  
},
  
  
Move: true, // whether the object is being moved
  
  
Eventing: false,
  
  
Levels :{
  
  
1:1000,
  
  
2: 900,
  
  
3: 800,
  
  
4: 700,
  
  
Five: 600,
  
  
6: 500,
  
  
7: 400,
  
  
8: 300,
  
  
9: 200,
  
  

  
  
},
  
  
CurBlock: 4, // The Name Of The currently moved Image
  
  
NextBlock: 0,
  
  
GampMap: new Object (),
  
  
Timer: null,
  
  
Deline: 0,
  
  
Score: 0,
  
  
Deling: false,
  
  
Start: false,
  
  
LineNum: 10, // delete a few rows and add the level
  
  
ScoreNum: 40 // delete one row plus points
  
  
}
 
 

Direct indicates that the orientation key of the keyboard is used to operate the movement direction of the square;

Which direction keys do you like to use? For example, the keys A, S, D, W, or the numbers on the right keypad are encoded by their respective keyboards;

For example, the top (rotation), bottom, left, and right direction keys are encoded as 38, 40, 37, and 39;

Levels: indicates the level configuration. This configuration is divided into 10 Levels. The falling speed of each level is the scheduled execution interval;

CurBlock: the current active block;

NextBlock: The Block index to be executed next. The preview box in the upper-right corner of the page is displayed;

GampMap: used to store the data information of each cell in a game table based on the number of defined columns;

OLSFK.Options.GampMap[x+'_'+y] = 0;

The object table is: id: "box _" + x + "_" + y;

The initial data is '0', indicating that the table is not in use. When there is an occupation, set the value to '1 ';

Timer: scheduled actuator; setTimeout: the frequency at which the execution blocks fall; the smaller the timing time, the faster the speed;

Deling;

LineNum: indicates that more than 10 rows are eliminated, and a level is added;

ScoreNum: indicates the score added to each line;

 
 

  
  
OLSFK. ReItems = function (cur) {// key rotation point
  
  

  
  
Switch (cur)
  
  
{
  
  
Case 1:
  
  
OLSFK. Items [1] = {// long LongBlock
  
  
1: {x: 4, y: 0 },
  
  
2: {x: 5, y: 0 },
  
  
3: {x: 6, y: 0 },
  
  
4: {x: 7, y: 0 },
  
  
5: {x: 5, y: 0} // rotation point
  
  
};
  
  
Break;
  
  
//....
  
  
}
  
  
}
 
 

This method is used to restore the initial setting of a square;

 
 

  
  
OLSFK. Next = {// key rotation point
  
  
// Long LongBlock
  
  
1 :{
  
  
1: {x: 0, y: 1 },
  
  
2: {x: 1, y: 1 },
  
  
3: {x: 2, y: 1 },
  
  
4: {x: 3, y: 1}
  
  
},
  
  
//...
  
  
}
 
 

Cannot conflict with the settings of the game square, and the object configuration of the next random square is independent;

 
 

  
  
OLSFK. Items = {// key rotation point
  
  
// Long LongBlock
  
  
1 :{
  
  
1: {x: 4, y: 0 },
  
  
2: {x: 5, y: 0 },
  
  
3: {x: 6, y: 0 },
  
  
4: {x: 7, y: 0 },
  
  
5: {x: 5, y: 0}
  
  
},
  
  
// Box
  
  
2 :{
  
  
1: {x: 4, y: 0 },
  
  
2: {x: 5, y: 0 },
  
  
3: {x: 4, y: 1 },
  
  
4: {x: 5, y: 1 },
  
  
5: {x: 0, y: 0}
  
  
},
  
  
// Convex block TuBlock
  
  
3 :{
  
  
1: {x: 4, y: 1 },
  
  
2: {x: 5, y: 0 },
  
  
3: {x: 5, y: 1 },
  
  
4: {x: 6, y: 1 },
  
  
5: {x: 5, y: 1}
  
  
},
  
  
// L Block LBlock
  
  
4 :{
  
  
1: {x: 5, y: 0 },
  
  
2: {x: 5, y: 1 },
  
  
3: {x: 5, y: 2 },
  
  
4: {x: 6, y: 2 },
  
  
5: {x: 5, y: 2}
  
  
},
  
  
5: {// Reverse L Block FLBlock
  
  
1: {x: 5, y: 2 },
  
  
2: {x: 6, y: 2 },
  
  
3: {x: 6, y: 1 },
  
  
4: {x: 6, y: 0 },
  
  
5: {x: 6, y: 2}
  
  
},
  
  
// Z-block ZBlock
  
  
6 :{
  
  
1: {x: 4, y: 0 },
  
  
2: {x: 5, y: 0 },
  
  
3: {x: 5, y: 1 },
  
  
4: {x: 6, y: 1 },
  
  
5: {x: 5, y: 0}
  
  
},
  
  
7: {// reverse Z block FZBlock
  
  
1: {x: 4, y: 1 },
  
  
2: {x: 5, y: 1 },
  
  
3: {x: 5, y: 0 },
  
  
4: {x: 6, y: 0 },
  
  
5: {x: 5, y: 1}
  
  
}
  
  
}
 
 

Blocks are divided into several types: bars, blocks, convex blocks (T blocks), L blocks, anti-L blocks, Z blocks, and anti-Z blocks;

A total of seven squares are represented by index keys 1, 2, 3, 4, 5, 6, and 7. The square is composed of four small blocks, each of which has its own coordinates. 1-4 represents the initial Coordinate Position of the block, 5 indicates the rotation point;

 
 

  
  
OLSFK. Init = function () {// initialization Interface
  
  
//...
  
  
}
 
 

Interface Initialization Method of Tetris. It will be called and executed in window. onload;

 
 

  
  
var w = OLSFK.Options.width;  
  
  
    var h = OLSFK.Options.height;  
  
  
    var total = w * h;  
  
  
 
  
  
    var x=0,y=0;  
  
  
    for (var i=0; i<total; i++)  
  
  
    {  
  
  
          
  
  
        OLSFK.Options.GampMap[x+'_'+y] = 0;  
  
  
 
  
  
        Lib.Tag('SPAN',{id:"box_"+x+"_"+y,name:"cbox",style:{  
  
  
            width:OLSFK.Options.boxWidth,  
  
  
            height:OLSFK.Options.boxWidth,  
  
  
            border:"2px outset #669",  
  
  
            background:"#ddd",  
  
  
            float:"left",  
  
  
            overflow:"hidden" 
  
  
        },innerHTML:"&nbsp;",className:"cssbox"},back);  
  
  
 
  
  
        var end = i + 1;  
  
  
        x++;  
  
  
        if (end >= w && end % w == 0)  
  
  
        {  
  
  
            x=0;  
  
  
            y++;  
  
  
            Lib.Tag('DIV',{style:{  
  
  
                clear:"both" 
  
  
            }},back);  
  
  
        }  
  
  
 
  
  
    } 
 
 

By setting Options. width, Options. height, the number of columns and the number of rows, and the configured small square width, a table interface with the width: Options. width is initialized, and the height is Options. height;

Lib. Tag is used to create a Tag object;

 
 

  
  
Lib.Tag = function(TAG,json,pnode) {  
  
  
    //...  
  
  
}  
 
 

TAG is the TAG name, such as div and span;

Json sets the label style;

Pnode is the parent container of the Creation;

OLSFK. Init = function () {} also creates the next random block preview area, current level, and score next to the primary game area, as well as the "Start" and "pause" buttons;