I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

Game address: Digital Huarong Road development language: Vue3 “a diu diu TS” code address: Gitee digital Huarong Road

💥 preface

I believe that many friends have played physical digital huarong road when they were young. In the era before mobile phones, such small games can be played all day long without feeling bored, just like the following:

To catch up with this who is the number one player activity, and the small game is relatively easy, so make an online version. For your leisure time entertainment and review the classic, gameplay instructions have been written in the game interface, so I will not repeat here.

🔧 Analysis of the

Although the game is simple, there is a little bit of knowledge involved in writing the code. Here is the analysis of the specific knowledge involved, if there is help remember to help me like oh! 😄

🧩 🧩 🧩Disrupted array

When the game is initialized, it is necessary to create an out-of-order multi-dimensional array. The scheme I use is to generate an ordered array of 0-N, and then generate multi-dimensional array after shuffling. In this process involves a knowledge point: shuffling the array

To ensure that each element is equally likely to appear in each position, I use the Fisher-Yates shuffle algorithm here. “There are several shuffle algorithms 😅” :

Generate a random number in the range 0 to length -1 and swap it with the first element so that the first element is scrambled. Then swap with the first element so that the second element is scrambled. Repeat the above operation to scramble the entire array

const upsetOrderlyArrFun = (data: OrderArrTypr) = > {
    // Fisher-Yates shuffling algorithm
    for (let i = 0; i < data.length; ++i) {
            const j = Math.floor(Math.random() * (data.length - i)) + i;
            [data[i], data[j]] = [data[j], data[i]];
    }
    return data;
};
Copy the code

Tipes: This is question 384 of li Kou, if you are interested, you can go to check it out

⚙ ️ ⚙ ️ ⚙ ️Boundary judgment and movement

In the game, we want to achieve the realization of clicking on an element, if it is adjacent to the blank grid, it will be switched with the blank grid, if not, it will not move. First, determine whether the element is on the boundary. If you determine the direction on the boundary, you can omit the direction of the boundary. This also does not count knowledge point, still may write trouble 😂

/** * Determines whether to move *@param X the x-coordinate of the current element *@param Y the y-coordinate of the current element *@param Data Board data */
const isMoveFun = (x: number, y: number, data: OrderArrTypr[]) = > {
    let moveObj = {
            top: false.right: false.bottom: false.left: false};// get the boundary condition
    const borderObj = isBorderFun(x, y, latitude.value);
    // Indicates that it is not on the upper boundary
    if(! borderObj.top) {if (data[y - 1][x] == board.value) {
                    moveObj.top = true;
                    returnmoveObj; }}// Indicates that there is no lower boundary, to determine whether to move down
    if(! borderObj.bottom) {if (data[y + 1][x] == board.value) {
                    moveObj.bottom = true;
                    returnmoveObj; }}// Indicates that it is not on the left edge
    if(! borderObj.left) {if (data[y][x - 1] == board.value) {
                    moveObj.left = true;
                    returnmoveObj; }}// Indicates that it is not on the right edge
    if(! borderObj.right) {if (data[y][x + 1] == board.value) {
                    moveObj.right = true;
                    returnmoveObj; }}// Cannot be moved
    return moveObj;
};
Copy the code

📖 📖 📖Results the judgment

The last is to judge whether to complete the game, which involves a multi-dimensional array contrast. But in this game, there is no need to compare, as long as each array in the multidimensional array is an ordered increment array:

/** * Determine whether the game is complete */
const judgeSuccessFun = (n: number, data: OrderArrTypr[]) = > {
    let index = 0;
    while (index < n) {
            for (let i = 0; i < n; i++) {
                    let nowIndex = data[index][i] - n * index;
                    if(nowIndex ! = i +1) {
                            return false;
                    }
            }
            index = index + 1;
    }
    return true;
};
Copy the code

For multi-dimensional arrays, you can also look at efficient sudoku and similar algorithm problems.

📑 summary

Using the code to implement huarong Road this game is very easy, so there is nothing to say. If you have any bugs or suggestions, let me know in the comments section. To tell the truth, although I wrote this small game, but I also don’t know how to play, only hu point 1, ha ha, there are good at big guy can share a wave of achievements oh!

“Remember to help me praise oh” finally, I wish you study progress, successful career! 🎆 🎆 🎆

Tipes: The previous content “Vue series” of Watch, Watch effect does not completely refer to north! The Vue series interviewer asked what NextTick was looking for. Why did “Vue series” use Teleport to encapsulate a popbox component? Why did “Vue series” use Proxy instead of Object.defineProperty?