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

Implementation of postcss-pxtorem mobile adaptation

Execute the command to install the plugin postcss...

Detailed Example of CSS3 box-shadow Property

CSS3 -- Adding shadows (using box shadows) CSS3 -...

Creation, constraints and deletion of foreign keys in MySQL

Preface After MySQL version 3.23.44, InnoDB engin...

How to use HTML+CSS to create TG-vision homepage

This time we use HTML+CSS layout to make a prelim...

MySQL 8.0.13 installation and configuration tutorial under CentOS7.3

1. Basic Environment 1. Operating system: CentOS ...

Summary of common docker commands

Docker installation 1. Requirements: Linux kernel...

CentOS 7.2 builds nginx web server to deploy uniapp project

Panther started as a rookie, and I am still a roo...

Using zabbix to monitor the ogg process (Linux platform)

The ogg process of a database produced some time ...

js to achieve 3D carousel effect

This article shares the specific code for impleme...

Method of building redis cluster based on docker

Download the redis image docker pull yyyyttttwwww...

CSS achieves the effect of aligning multiple elements at both ends in a box

The arrangement layout of aligning the two ends o...

Native js to realize bouncing ball

On a whim, I wrote a case study of a small ball b...

JavaScript custom calendar effect

This article shares the specific code of JavaScri...

How to upgrade MySQL 5.6 to 5.7 under Windows

Written in front There are two ways to upgrade My...