CocosCreator Typescript makes Tetris game

CocosCreator Typescript makes Tetris game

1. Introduction

I recently started learning Cocos. After learning the Typescript syntax, I went to look at the official documentation of Cocos. After tinkering with it for a few days, I wrote a very simple snake, which didn’t even have a decent collision detection. I found it boring, so I abandoned it for a while. In the past few weeks I have picked up Cocos again and came up with the idea of ​​implementing Tetris. At first, I thought about looking for information online, but I found that there were very few articles about developing Tetris for Cocos (it might also be that I was not searching in the right way). What was more frustrating was that the only few shared articles I found had few code comments. It might also be that my comprehension ability was not good enough. Later, I spent several days but still could not fully understand it. So I decided to try writing it myself, and after two weeks, I finally finished it.

At the end of the article, I will attach the entire cocos project file for your reference. The code is not well written, so please give me your advice.

2. Several key issues that need to be resolved

1. How do we store the blocks in the game area?

Because Tetris is a pixel game, we can regard each block as a pixel, so the entire game area is a collection of pixels. Combined with Cocos, we define each block as a cc.Node type, so our game area can use a two-dimensional array of cc.Node type to save the blocks, which is convenient for key operations such as rotation, displacement, stacking, and deletion. Here I am using a 20*10 two-dimensional array.

//The grid of the entire game area is saved in a two-dimensional array box: cc.Node[][] = [];
// Initialize the box two-dimensional array. [0][0] of this array is at the lower left corner of the game area. InitBox() {
        for (let i = 0; i < 20; i++) {
            this.box[i] = [];
            for (let j = 0; j < 10; j++) {
                this.box[i][j] = null;
            }
        }
        //Generate different block sets this.buildBlock();
    }

2. Construction of each type of block set

As we all know, there are seven types of blocks in Tetris, namely: reverse Z-type, L-type, reverse L-type, Z-type, stripe-type, T-type, and square.

We can find that each block set is composed of four small blocks. We can use this feature to build a unified construction method.

For the convenience of subsequent use, I first defined a prefab for each small block and a prefab for an empty node. The node generated by this prefab is used to install the block nodes constructed later. So structurally it is a father-son relationship.

    //Square sub-block @property(cc.Prefab)
    block_0: cc.Prefab = null;
    //Z-shaped sub-block @property(cc.Prefab)
    block_1: cc.Prefab = null;
    //Left L-shaped sub-block @property(cc.Prefab)
    block_2: cc.Prefab = null;
    //Right L-shaped sub-block @property(cc.Prefab)
    block_3: cc.Prefab = null;
    //Anti-Z sub-block @property(cc.Prefab)
    block_4: cc.Prefab = null;
    //Long strip sub-block @property(cc.Prefab)
    block_5: cc.Prefab = null;
    //T-shaped sub-block @property(cc.Prefab)
    block_6: cc.Prefab = null;
    //The center of the block collection @property(cc.Prefab)
    currentBlockCentre = null;
    //Current blockcurrentBlock: cc.Node = null; //Specific implementation of currentBlockCentrecurrentBlockPart01: cc.Node = null; //Specific implementation of four sub-blockscurrentBlockPart02: cc.Node = null;
    currentBlockPart03: cc.Node = null;
    currentBlockPart04: cc.Node = null;

Regarding the random generation of color and type of blocks, I simply chose the built-in Math.random().

    buildBlock() {
        this.rand = Math.floor(7 * Math.random()); //Randomly select one from seven to construct this.chooseColor(this.rand);
        this.chooseType(this.rand);
    }

The next step is to select the color and type of the building block set based on the input rand parameter. As for how to construct it, specifically, you need to select the center point of this block set - it is best to choose the center of a sub-block and set the position to (0, 0). In this way, the subsequent rotation will be very convenient to implement. After selecting the center point, the positions of other child blocks are set according to this center point. The position of child nodes in Cocos is relative to the parent node. If the position of a child node is set to (0, 0), the position of the child node is at the center point of the parent node.

In addition, the prefab size of each sub-block is 60*60, which means that the interval between each grid in the game area is 60.

This section of code is quite long, so I won’t give it in detail.

    //Select the color of the block set chooseColor(rand) {
        …
        //Z-shaped block color if (rand == 1) {
            this.currentBlockPart01 = cc.instantiate(this.block_1);
            this.currentBlockPart02 = cc.instantiate(this.block_1);
            this.currentBlockPart03 = cc.instantiate(this.block_1);
            this.currentBlockPart04 = cc.instantiate(this.block_1);
            this.currentBlock = cc.instantiate(this.currentBlockCentre);
            this.node.addChild(this.currentBlock);
            this.currentBlock.setPosition(30, 510); //Set the position of the currently generated block set above the game area to prepare for subsequent drop}
        //The color of the left L-shaped square if (rand == 2)
        …
    }
    //Select shape chooseType(rand) {
        …
        //Create a zigzag if (rand == 1) {
            //Z-shaped left this.currentBlockPart01.setPosition(-60, 0);
            this.currentBlockPart01Pos = cc.v2(18, 4); //Initialize the position of the current block, relative to currentBlock
            //In the Z shape this.currentBlockPart02.setPosition(0, 0);
            this.currentBlockPart02Pos = cc.v2(18, 5);
            //Z-shaped this.currentBlockPart03.setPosition(0, -60);
            this.currentBlockPart03Pos = cc.v2(17, 5);
            //Z-shaped right this.currentBlockPart04.setPosition(60, -60);
            this.currentBlockPart04Pos = cc.v2(17, 6);
        }
        //Create left L-type if (rand == 2)
        …
    }

3. How to combine the created block set with the node two-dimensional array

The above code contains the following variable: currentBlockPart0XPos, which defines the specific position of each sub-block currentBlockPart0X of the current operable block set currentBlock in the two-dimensional array of the box node. These four variables are very useful. After the current operable block is moved, the position information can be saved in the two-dimensional array of the box node.

//The current sub-block position currentBlockPart01Pos: cc.Vec2 = null;
    currentBlockPart02Pos: cc.Vec2 = null;
    currentBlockPart03Pos: cc.Vec2 = null;
    currentBlockPart04Pos: cc.Vec2 = null;

After that, every time the set of operable blocks changes, we can call the following two methods to update the position of the operable block set in the box array.

    //Read the position information of the current operation block set checkCurrentBlockPos() {
        this.box[this.currentBlockPart01Pos.x][this.currentBlockPart01Pos.y] = this.currentBlockPart01;
        this.box[this.currentBlockPart02Pos.x][this.currentBlockPart02Pos.y] = this.currentBlockPart02;
        this.box[this.currentBlockPart03Pos.x][this.currentBlockPart03Pos.y] = this.currentBlockPart03;
        this.box[this.currentBlockPart04Pos.x][this.currentBlockPart04Pos.y] = this.currentBlockPart04;
    }
    // Clear the current operation block set position information of the previous position deleteCurrentBlockPos() {
        this.box[this.currentBlockPart01Pos.x][this.currentBlockPart01Pos.y] = null;
        this.box[this.currentBlockPart02Pos.x][this.currentBlockPart02Pos.y] = null;
        this.box[this.currentBlockPart03Pos.x][this.currentBlockPart03Pos.y] = null;
        this.box[this.currentBlockPart04Pos.x][this.currentBlockPart04Pos.y] = null;
    }

4. Move and rotate the block set

Regarding movement, it follows the operation method of most Tetris games: left button moves left, right button moves right, up button rotates, down button moves down, and there is automatic falling.

    //Automatically drop autoDown() {
        this.schedule(() => {
            //Keep falling until it hits the bottom boundary if (this.isClashBottom()) {
                this.deleteRow(); //Row elimination detection this.buildBlock(); //Create a new block set } else if (this.isClashBlockDown()) { //Keep falling until you hit other blocks this.isGameOver(); //Judge whether the game is over this.deleteRow();
                this.buildBlock();
            } else {
                //One block down this.currentBlock.y -= 60;
                this.deleteCurrentBlockPos();
                this.currentBlockPart01Pos.x -= 1;
                this.currentBlockPart02Pos.x -= 1;
                this.currentBlockPart03Pos.x -= 1;
                this.currentBlockPart04Pos.x -= 1;
                this.checkCurrentBlockPos();
            }
        }, 1);
    }
    
    //Keyboard monitoring onKeyDown(e) {
        switch (e.keyCode) {
            case cc.macro.KEY.left:
                if (this.isClashLeft()) { //Judge whether it hits the left border break;
                } else if (this.isClashBlockLeft()) { //Judge whether the current operation block collides with other sub-blocks on the left break;
                } else {
                    this.currentBlock.x -= 60;
                    this.deleteCurrentBlockPos();
                    this.currentBlockPart01Pos.y -= 1;
                    this.currentBlockPart02Pos.y -= 1;
                    this.currentBlockPart03Pos.y -= 1;
                    this.currentBlockPart04Pos.y -= 1;
                    this.checkCurrentBlockPos();
                    break;
                }
            case cc.macro.KEY.right:
                …
            case cc.macro.KEY.up:
                //Change shapeif (this.isClashLeft()) { //Judge whether it hits the left borderbreak;
                } else if (this.isClashRight()) { //Judge whether it hits the right border break;
                } else if (this.isClashBottom()) { //Judge whether it hits the lower boundary break;
                } else if (this.isClashBlockLeft()) { //Judge whether the current operation block collides with other sub-blocks on the left break;
                } else if (this.isClashBlockRight()) { //Judge whether the right side of the current operation block collides with other sub-blocks break;
                } else if (this.isClashBlockDown()) { //Judge whether the current operation block collides with other sub-blocks below break;
                } else {
                    this.deleteCurrentBlockPos();
                    this.changeShape(); //Rotation and shape change this.checkCurrentBlockPos();
                    break;
                }
            case cc.macro.KEY.down:
                …
        }
    }

Regarding the rotation part, I actually took a shortcut. I deliberately set the positions of some sub-blocks as center points, which just makes my rotation operation possible.

The sub-block indicated by the gray circle in the figure is the center point I set. If the center point is taken as the origin of the two-dimensional coordinate system, it can be divided into eight areas: the upper half of the y-axis, the lower half of the y-axis, the left half of the x-axis, the right half of the x-axis, the first quadrant, the second quadrant, the third quadrant, and the fourth quadrant.

Taking the Z-rotation as an example, it can be found that the x and y of the sub-blocks on the four coordinate axes are changed, while the sub-blocks on the quadrant only change one of the x and y, and the value is the opposite of the original value. When we implement rotation in this way, in fact, only the position of the sub-block is changed, and the direction of the sub-block does not change.

//Rotation change shapechangeShape() {
        this.whichPartChange(this.currentBlockPart01, this.currentBlockPart01Pos);
        this.whichPartChange(this.currentBlockPart02, this.currentBlockPart02Pos);
        this.whichPartChange(this.currentBlockPart03, this.currentBlockPart03Pos);
        this.whichPartChange(this.currentBlockPart04, this.currentBlockPart04Pos);
    }
    
    // Pass in the part to be judged whichPartChange(currentBlockPart: cc.Node, currentBlockPartPos: cc.Vec2) {
        //Modification parameter used to rotate the position of currentBlockPartPos from left to top, top to right, right to bottom, bottom to left. It is not needed in the quadrant. let modParameterX = Math.abs(currentBlockPart.position.x / 60);
        let modParameterY = Math.abs(currentBlockPart.position.y / 60);
        let modParameterMax = Math.max(modParameterX, modParameterY);
        //Upper half of the y axis if (currentBlockPart.position.x == 0 && currentBlockPart.position.y > 0) {
            //row-column+
            currentBlockPartPos.x -= modParameterMax;
            currentBlockPartPos.y += modParameterMax;
            //Rotate the position of the current block currentBlockPart.setPosition(currentBlockPart.position.y, currentBlockPart.position.x);
        }
        // Left half of the x-axis else if (currentBlockPart.position.x < 0 && currentBlockPart.position.y == 0) {
            …
        }
        //lower half of the y axis else if (currentBlockPart.position.x == 0 && currentBlockPart.position.y < 0) {
            …
        }
        //right half of the x-axis else if (currentBlockPart.position.x > 0 && currentBlockPart.position.y == 0) {
            …
        }
        //First quadrantif (currentBlockPart.position.x > 0 && currentBlockPart.position.y > 0) {
            //OK-
            if (currentBlockPart.position.x >= 60 && currentBlockPart.position.y >= 60) {
                currentBlockPartPos.x -= 2;
            } else {
                currentBlockPartPos.x -= 1;
            }
            //Rotate the position of the current blockcurrentBlockPart.setPosition(currentBlockPart.position.x, -currentBlockPart.position.y);
        }
        //Second quadrant else if (currentBlockPart.position.x < 0 && currentBlockPart.position.y > 0) {
            …
        }
        //The third quadrant else if (currentBlockPart.position.x < 0 && currentBlockPart.position.y < 0) {
            …
        }
        //The fourth quadrant else if (currentBlockPart.position.x > 0 && currentBlockPart.position.y < 0) {
            …
        }
    }

5. Boundary and block detection

There are three types of boundary detection: left boundary detection, right boundary detection and bottom boundary detection. There are also three types of block detection, namely detection below the current operable block set, detection to the left, and detection to the right.

//Judge whether it is about to collide with the left border isClashLeft(): boolean {
        if (this.currentBlockPart01Pos.y - 1 < 0 || this.currentBlockPart02Pos.y - 1 < 0 ||
            this.currentBlockPart03Pos.y - 1 < 0 || this.currentBlockPart04Pos.y - 1 < 0) {
            return true;
        }
        return false;
    }
 
    //Judge whether it is about to collide with the right border isClashRight(): boolean {
        …
    }
 
    //Judge whether it is about to collide with the lower boundary isClashBottom(): boolean {
        …
    }
//Judge whether it is about to collide with other blocks (below)
    isClashBlockDown(): boolean {
        //Detect block collision downwards if (this.box[this.currentBlockPart01Pos.x - 1][this.currentBlockPart01Pos.y] != null && !this.isCurrentBlockChild(this.box[this.currentBlockPart01Pos.x - 1][this.currentBlockPart01Pos.y]) ||
            this.box[this.currentBlockPart02Pos.x - 1][this.currentBlockPart02Pos.y] != null && !this.isCurrentBlockChild(this.box[this.currentBlockPart02Pos.x - 1][this.currentBlockPart02Pos.y]) ||
            this.box[this.currentBlockPart03Pos.x - 1][this.currentBlockPart03Pos.y] != null && !this.isCurrentBlockChild(this.box[this.currentBlockPart03Pos.x - 1][this.currentBlockPart03Pos.y]) ||
            this.box[this.currentBlockPart04Pos.x - 1][this.currentBlockPart04Pos.y] != null && !this.isCurrentBlockChild(this.box[this.currentBlockPart04Pos.x - 1][this.currentBlockPart04Pos.y])) {
            return true;
        }
    }
 
    //Judge whether it is about to collide with other blocks (left)
    isClashBlockLeft() {
        …
    }
 
    //Judge whether it is about to collide with other blocks (right)
    isClashBlockRight() {
        …
    }
 
    //Judge whether it is a child block of the current operation block set isCurrentBlockChild(judgeObj: cc.Node): boolean {
        for (let i = 0; i < 4; i++) {
            if (judgeObj === this.currentBlock.children[i]) {
                return true;
            }
        }
        return false;
    }

Because when each child block detects a block, it must look left, right or next to determine whether there are other blocks, and it is possible that the block being determined is of the same parent class as itself, so when judging, it is also necessary to determine whether it is a child block of the current operating block set.

6. Eliminate the entire row of blocks

It should be noted that if you look at the blocks in the game row by row, sometimes there will be hollow spaces. In this case, you need to consider how to move the blocks down one grid when they are hollowed out. Therefore, in the rowDown() method, when the whole column is descending, if it is determined that the previous cell in the same column is empty, it is assigned to null and the information of the block just moved to the next cell is deleted.

//Row deletion detection deleteRow() {
        for (let i = 0; i < 18; i++) {
            let count = 0;
            for (let j = 0; j < 10; j++) {
                if (this.box[i][j] != null) {
                    count++;
                }
            }
            //If all blocks exist in a rowif (count == 10) {
                for (let j = 0; j < 10; j++) {
                    //Block deletion this.box[i][j].removeFromParent();
                    this.box[i][j] = null;
                }
                this.rowDown(i);
                i--; //Because after rowDown(i), the whole line goes down one grid, so i--, otherwise multiple rows cannot be eliminated, causing the game to not run normally}
        }
    }
    
    //Move all blocks down one grid rowDown(i: number) {
        //Record the value of i, which is the row currently being eliminated let k = i;
        // Column traversal for (let j = 0; j < 10; j++) {
            //temp: used to calculate how many rows of block elements there are above the currently eliminated row (including hollowing out of the middle layer)
            let temp = -1;
            for (i = k; i < 18; i++) {
                temp++;
                if (this.box[i][j] != null) {
                    this.box[i - 1][j] = this.box[i][j];
                    this.box[i][j].y -= 60;
                    if (this.box[i + 1][j] == null) {
                        this.box[temp + k][j] = null;
                    }
                }
            }
        }
    }

3.Write at the end

Generally speaking, I should have explained the most important issues. If there are any unclear points, you are welcome to download the original project file:

Link: Baidu Netdisk Please enter the extraction code Extraction code: c4ss

This is the end of this article about making Tetris games with CocosCreator. For more relevant CocosCreator content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • CocosCreator Getting Started Tutorial: Making Your First Game with TS
  • CocosCreator Skeleton Animation Dragon Bones
  • Detailed explanation of making shooting games with CocosCreator
  • How to draw a cool radar chart in CocosCreator

<<:  MYSQL uses Union to merge the data of two tables and display them

>>:  Various ways to achieve the hollowing effect of CSS3 mask layer

Recommend

Detailed explanation of the implementation principle of transaction isolation level in MySQL

Preface When it comes to database transactions, a...

NodeJs high memory usage troubleshooting actual combat record

Preface This is an investigation caused by the ex...

Centering the Form in HTML

I once encountered an assignment where I was give...

TypeScript namespace merging explained

Table of contents Merge namespaces with the same ...

Detailed explanation of the new CSS display:box property

1. display:box; Setting this property on an eleme...

How to draw a mind map in a mini program

Table of contents What is a mind map? How to draw...

JavaScript adds prototype method implementation for built-in objects

The order in which objects call methods: If the m...

JavaScript implements circular progress bar effect

This article example shares the specific code of ...

Implementing a distributed lock using MySQL

introduce In a distributed system, distributed lo...

Example of how to start a container with multiple network interfaces using docker

Adding a network interface to the container 1 Run...

Example code for using HTML ul and li tags to display images

Copy the following code to the code area of ​​Drea...

Solution to the problem that MySQL commands cannot be entered in Chinese

Find the problem Recently, when I connected to th...

In-depth explanation of nginx location priority

location expression type ~ indicates to perform a...

Vue implements pull-down to load more

Developers familiar with Element-UI may have had ...

Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment

This article describes how to install mysql5.7.16...