Detailed explanation of CocosCreator Huarongdao digital puzzle

Detailed explanation of CocosCreator Huarongdao digital puzzle

Preface

What is Huarong Road?

Everyone has played this kind of number puzzle game, I believe. It is a typical example of Huarong Road.

Huarongdao is an ancient Chinese folk puzzle game. With its many variations and never-boring features, it is called "three wonders in the world of intellectual games" by foreign intelligence experts along with the Rubik's Cube and Independent Diamond Chess.

Today we will learn about Huarong Road.

text

Today we will mainly use a 3*3 layout. A rookie wrote a simple demo using cocos creator. Let's talk about it step by step.

1. Panel

First, we randomly generate a panel arrangement

2. Huarongdao Solution

Ideas:

Exhaustive method: Everyone knows how to play this game. Slide the sliding squares and arrange the shuffled squares in order from small to large according to the numbers on them to pass the level. Here, the novice uses the exhaustive method to find the optimal solution in every possible situation.

In the exhaustive method, we often see:

  • Breadth-first search: Breadth-first search will first search the first step in all directions, then search the second step in each feasible direction, and so on.
  • Depth-first search: Depth-first search will continue searching in one direction until this path is blocked, and then consider the second direction.

Here we use breadth-first search, we only need to get the optimal solution, that is, the one with the least number of steps.
The specific operation is shown in the figure:

Let’s take the first three steps as an example.

  • We have three ways to proceed in the first step.
  • In the second step, we need to move the blocks again based on the first step, and each move will lead to more possibilities.
  • We need to store every possibility.
  • The next move is based on all the possibilities of the previous step.
  • In the third step, we will find that there will be duplication, so we need to reduce expenditures and deal with the duplicate branches in a timely manner.
  • Although duplicate branches are processed, the number of branches will also increase exponentially. Take the arrangement in the example. As the number of steps increases, the number of branches is shown in the figure

  • Once a branch detects that it has been cleared, the breadth search ends.
  • Finally, we will get a moving process for each step.

After understanding, we can apply it to the demo to test whether it can pass the level.

Click on the automatic arrangement in the demo

3. Code

//Loop through the solution while (true) {
    let steps: Array<any> = [];
    let lastGrad: Array<any> = this.mMapData[this.mMapData.length - 1];
    console.log(lastGrad.length);
    //Traverse all the results in the last gradient and solve the next step for (let i = 0; i < lastGrad.length; i++) {
        let matrix = lastGrad[i]["matrix"];
        let answer = lastGrad[i]["answer"];
        let result: Array<any> = this.move(matrix, answer, steps);
        if (result) {
            console.log("Result:", result);
            resolve(result);
            return;
        }
    }

    if(steps.length<=0){
        console.log("Query result failed, ");
        resolve(null);
        return;
    }
    this.mMapData.push(steps);
}
private move(matrix: Array<number>, answer: Array<any>, steps: Array<any>): Array<any> {
    for (let i = 0; i < matrix.length; i++) {
        if (matrix[i] != -1) { //Not an empty space, check whether it can be moved, and get the movable result //Check whether it can be moved up, down, left, and right,
            let result0: Array<any> = this.moveUp(i, matrix, answer, steps);
            let result1: Array<any> = this.moveDown(i, matrix, answer, steps);
            let result2: Array<any> = this.moveLeft(i, matrix, answer, steps);
            let result3: Array<any> = this.moveRight(i, matrix, answer, steps);

            if (result1) {
                return result1;
            }
            if (result2) {
                return result2;
            }
            if (result0) {
                return result0;
            }
            if (result3) {
                return result3;
            }
        }
    }
    return null;
}
private moveRight(i: number, matrix: Array<number>, answer: Array<any>, steps: Array<any>): Array<any> {
    let line: number = i % this.mLine;
    let row: number = Math.floor(i / this.mLine);
    if (line + 1 >= this.mLine) return null; //Out of bounds let targetIndex: number = row * this.mLine + (line + 1);
    if ( matrix[targetIndex] != -1) return null; //Not movable //Move //Move //Copy the new array for modification let newMatrix: Array<number> = JSON.parse(JSON.stringify(matrix));
    let newAnswer: Array<any> = JSON.parse(JSON.stringify(answer));
    //Exchange positions let temp: number = newMatrix[i];
    newMatrix[i] = newMatrix[targetIndex];
    newMatrix[targetIndex] = temp;
    newAnswer.push({ "index": i, "dic": 3 });

    if (this.checkIsExist(newMatrix)) {
        return null;
    }

    if (this.checkPass(newMatrix)) {
        return newAnswer;
    }
    let step: any = {};
    step["matrix"] = newMatrix;
    step["answer"] = newAnswer;
    steps.push(step);
}
/**
 * Check if it is cleared*/
private checkPass(matrix: Array<number>): boolean {
    if (matrix[this.mRow * this.mLine - 1] != -1) return false;
    for (let i = 0; i < this.mRow * this.mLine - 1; i++) {
        if (matrix[i] != i + 1) {
            return false;
        }
    }
    console.log(matrix)
    return true;
}
/**
 * Check if it is repeated */
private checkIsExist(matrix): boolean {
    if (this.mMapMatrixS[JSON.stringify(matrix)]) {
        return true;
    }
    this.mMapMatrixS[JSON.stringify(matrix)] = "1";
    return false;
}

4. Note

The demo shows a 3 * 3 arrangement, which can be run using a browser, but 4 * 4 or 5 * 5 cannot be run because there are too many branches. Later, I will use Python scripts to implement 4 * 4, 5 * 5 or more arrangements, and finally export JSON level information.

The above is a detailed explanation of the CocosCreator Huarongdao digital puzzle. For more information about CocosCreator Huarongdao, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • CocosCreator Getting Started Tutorial: Network Communication
  • Cocos2d-x 3.x Getting Started Tutorial (Part 2): Node Class
  • Cocos2d-x 3.x Getting Started Tutorial (I): Basic Concepts
  • Cocos2d-x Getting Started Tutorial (Detailed Examples and Explanations)
  • Detailed explanation of making shooting games with CocosCreator
  • How to draw a cool radar chart in CocosCreator
  • Detailed explanation of CocosCreator MVC architecture
  • Detailed explanation of CocosCreator message distribution mechanism
  • How to create WeChat games with CocosCreator
  • Detailed explanation of how CocosCreator system events are generated and triggered
  • How to use a game controller in CocosCreator
  • CocosCreator Getting Started Tutorial: Making Your First Game with TS

<<:  Detailed installation tutorial of Mysql5.7.19 under Centos7

>>:  How to solve the problem of command failure caused by overwriting the original PATH and prompting command not found

Recommend

Linux Disk Quota Management Graphical Example

Disk quota is the storage limit of a specified di...

A brief discussion on MySQL user permission table

MySQL will automatically create a database named ...

Vue interpretation of responsive principle source code analysis

Table of contents initialization initState() init...

Implementation of React virtual list

Table of contents 1. Background 2. What is a virt...

js implements array flattening

Table of contents How to flatten an array 1. Usin...

The table tbody in HTML can slide up and down and left and right

When the table header is fixed, it needs to be di...

Detailed explanation of how to use eslint in vue

Table of contents 1. Description 2. Download rela...

How to use .htaccess to prohibit a certain IP from accessing the website

Preface For cost considerations, most webmasters ...

Basic statements of MySQL data definition language DDL

MySQL DDL statements What is DDL, DML. DDL is dat...

Introduction to the use of MySQL official performance testing tool mysqlslap

Table of contents Introduction Instructions Actua...

Install mysql5.7.17 using RPM under Linux

The installation method of MySQL5.7 rpm under Lin...

Summary of basic knowledge points of Linux group

1. Basic Introduction of Linux Group In Linux, ev...

Compatibility with the inline-block property

<br />A year ago, there were no articles abo...

Webpack file packaging error exception

Before webpack packaging, we must ensure that the...