Summary of the minesweeping project implemented in JS

Summary of the minesweeping project implemented in JS

This article shares the summary of the JS minesweeping project for your reference. The specific content is as follows

Project display picture

Project Preparation

Similarly, we first prepare three folders and the index.html file in the root directory

Then there are two pictures (mines and flags)

Then the html structure

html

First, the outermost div of the game content area is named mine

<div id="mine">
</div>

Next are the top four buttons in the game content area. We use four button tags to represent them and wrap them with a div.

And give the primary button an initial selected style

<div class="level">
    <button class="active">Primary</button>
    <button>Intermediate</button>
    <button>Advanced</button>
    <button>Restart</button>
</div>

Next is the game area, which is the minefield.

<div class="gameBox">
</div>

The last one is the prompt area

<div class="info">
    Remaining mines: <span class="mineNum"></span>
    <br>
    <span class="tips">Left click to clear mines, right click to plant a flag, right click again to remove the flag</span>
</div>

Then finally, let's integrate the final code as follows

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Minesweeper</title>
    <link rel="stylesheet" href="CSS/index.css" >
    <link rel="icon" href="favicon.ico" >
</head>

<body>
    <div id="mine">
        <div class="level">
            <button class="active">Primary</button>
            <button>Intermediate</button>
            <button>Advanced</button>
            <button>Restart</button>
        </div>
        <div class="gameBox">
        </div>
        <div class="info">
            Remaining mines: <span class="mineNum"></span>
            <br>
            <span class="tips">Left click to clear mines, right click to plant a flag, right click again to remove the flag</span>
        </div>
    </div>
    <script src="JS/index.js"></script>
</body>

</html>

CSS

First, we center the main content in the outermost area of ​​mine.

#mine {
    margin: 50px auto;
}

After that, add styles to the level div and the button inside it

And, add the default active style

.level {
    text-align: center;
    margin-bottom: 10px;
}

.level button {
    padding: 5px 15px;
    background-color: #02a4ad;
    border: none;
    color: #fff;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.level button.active {
    background-color: #00abff;
}

After that, we redefined the table tag and td tag. The main game area of ​​our minesweeper is implemented through the table tag.

table {
    border-spacing: 1px;
    background-color: #929196;
    margin: 0 auto;
}

td {
    padding: 0;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border: 2px solid;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: bold;

}

Next is the style of the prompt area

.info {
    margin-top: 10px;
    text-align: center;
}

.tips {
    color: red;
    font-size: 16px;
}

Finally, we predefine some styles

For example, the style of our mines and the style of our chess pieces

.mine {
    background: #d9d9d9 url(../images/mine.png) no-repeat center;
    background-size: cover;
}
.flag {
    background: #ccc url(../images/flag.png) no-repeat center;
    background-size: cover;
}

Finally, in the game, some blocks will display numbers, which represent the number of mines around the blocks.

td.zero {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}

td.one {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #0332fe;
}

td.two {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #019f02;
}

td.three {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff2600;
}

td.four {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #93208f;
}

td.five {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff7f29;
}

td.six {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff3fff;
}

td.seven {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #3fffbf;
}

td.eight {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #22ee0f;
}

So to sum up, after integrating the CSS code, our complete CSS code is as follows

#mine {
    margin: 50px auto;

}

.level {
    text-align: center;
    margin-bottom: 10px;
}

.level button {
    padding: 5px 15px;
    background-color: #02a4ad;
    border: none;
    color: #fff;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.level button.active {
    background-color: #00abff;
}

table {
    border-spacing: 1px;
    background-color: #929196;
    margin: 0 auto;
}

td {
    padding: 0;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border: 2px solid;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: bold;

}

.tips {
    color: red;
    font-size: 16px;
}

.mine {
    background: #d9d9d9 url(../images/mine.png) no-repeat center;
    background-size: cover;
}

.flag {
    background: #ccc url(../images/flag.png) no-repeat center;
    background-size: cover;
}

.info {
    margin-top: 10px;
    text-align: center;
}


td.zero {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}

td.one {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #0332fe;
}

td.two {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #019f02;
}

td.three {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff2600;
}

td.four {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #93208f;
}

td.five {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff7f29;
}

td.six {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff3fff;
}

td.seven {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #3fffbf;
}

td.eight {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #22ee0f;
}

JavaScript

Ideas

This time we are going to program on the prototype chain

First, let's write the constructor of mine

Mine Constructor

function Mine(tr, td, mineNum) {
    this.tr = tr; // tr indicates the number of rowsthis.td = td; // td indicates the number of columnsthis.mineNum = mineNum; // mineNum indicates the number of minesthis.squares = []; // Stores the information of all squares. It is a two-dimensional array, arranged in the order of rows and columns, and access is in row and column modethis.tds = []; // Stores the DOM of all cells
    this.surplusMine = mineNum; // Number of remaining minesthis.allRight = false; // Right-click the marked red flags to see if they are all mines, to determine whether the user has successfully played the gamethis.parent = document.querySelector('.gameBox');
}

Generates random mine placement

We passed three parameters to the constructor, the number of rows, the number of columns, and the number of mines required. Our idea is this: our game is played in a table, and the table has a total of tr * td squares. Then we can create an array of length tr * td, and then assign values ​​to the array, each value corresponding to a square, and finally shuffle the array and take out the first mineNum (the number of mines required). These mineNum squares correspond to the squares of our mines.

Then we write our js code

Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td); // Generate an empty array with a length equal to the total number of cells for (var i = 0; i < square.length; i++) {
        square[i] = i;
    }
    // Array shuffle square.sort(function () {
        return 0.5 - Math.random()
    });
    return square.slice(0, this.mineNum);
};

Create a table

Although we have taken out the position of the mine above, it is not necessary when we create the game area. We can write the logic when creating it. When clicking on the small square, we can judge whether its position is a mine or empty.

Therefore, we first write the js code to create a table

Mine.prototype.createDom = function () {
    var This = this;
    var table = document.createElement('table');
    for (var i = 0; i < this.tr; i++) { // rowvar domTr = document.createElement('tr');
        this.tds[i] = [];
        for (var j = 0; j < this.td; j++) { // Column var domTd = document.createElement('td');
            this.tds[i][j] = domTd; // Add all created tds to the array domTd.pos = [i, j]; // Add the rows and columns corresponding to the grid to the grid, so that the corresponding data can be obtained from the array through this value domTd.onmousedown = function () {
                This.play(event, this); // The big This refers to the instance object and the small this refers to the domTd that was clicked 
            };

            // if (this.squares[i][j].type == 'mine') {
            // domTd.className = 'mine';
            // }
            // if (this.squares[i][j].type == 'number') {
            // domTd.innerHTML = this.squares[i][j].value;
            // }

            domTr.appendChild(domTd);
        }
        table.appendChild(domTr);
    }
    this.parent.innerHTML = ''; // Avoid multiple clicks to create multiple this.parent.appendChild(table);
};

This.play is the judgment after we click on the block, judging whether it is a mine or a space

Before writing the play function, we have some other logic to write

Initialization function

Mine.prototype.init = function () {
    // this.randomNum();
    var rn = this.randomNum(); // The position of the mine in the grid var n = -1; // Used to find the corresponding index grid for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // To get the data of a block in the array, use the row and column format to access it. // To find the blocks around a block, use the coordinate format to access it. // The row and column format is the opposite of the coordinate format, x and y. n++;
            if (rn.indexOf(n) != -1) {
                // If this condition is met, it means that the index currently looped to is found in the mine array, which means that this index corresponds to a mine this.squares[i][j] = {
                    type: 'mine',
                    x: j,
                    y: i
                };

            } else {
                this.squares[i][j] = {
                    type: 'number',
                    x: j,
                    y: i,
                    value: 0
                };
            }
        }
    }

    this.updateNum();
    this.createDom();

    this.parent.oncontextmenu = function () {
        return false;
        // Prevent right click menu event}

    // Number of mines remaining this.mineNumDom = document.querySelector('.mineNum');
    this.mineNumDom.innerHTML = this.surplusMine;
};

getAround() function

// Find the eight grids around a square Mine.prototype.getAround = function (square) {
    var x = square.x,
        y = square.y;
    var result = []; // Return the coordinates of the found grid (two-dimensional array)
    for (var i = x - 1; i <= x + 1; i++) {
        for (var j = y - 1; j <= y + 1; j++) {
            if (i < 0 ||
                j < 0 ||
                i > this.td - 1 ||
                j > this.tr - 1 ||
                // The above expression shows the boundary (i == x && j == y) ||
                // Indicates looping to itself this.squares[j][i].type == 'mine'
                // Indicates looping to (surrounding grids) mines (note that i and j represent coordinates, while squares store rows and columns)
            ) {
                continue;
            }
            // It needs to be returned in the form of rows and columns, because it will be needed to fetch the data in the array result.push([j, i]);
        }
    }
    return result;
}

updateNum() function

// Update all numbers Mine.prototype.updateNum = function () {
    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            // To update the numbers around Lei if (this.squares[i][j].type == 'number') {
                continue;
            }
            var num = this.getAround(this.squares[i][j]); // Get the numbers around each mine for (var k = 0; k < num.length; k++) {
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
};

play function

Mine.prototype.play = function (ev, obj) {
    var This = this;
    if (ev.which == 1 && obj.className != 'flag') { // The following condition is for the user to not click after right clicking // The left button was clicked var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
        // cl stores className

        if (curSquare.type == 'number') {
            // The user clicked a number obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // Clicked on the number zero if (curSquare.value == 0) {
                /* 
                    Recursive thinking: 
                    1. Display itself 2. Search around 1) Display the surroundings (if the values ​​of the surroundings are not zero, then display them here and no need to search any further)
                        2) If the value is zero, a. display itself and b. search around (if the values ​​around are not zero, then display it here and no need to search any further)
                                I. Display itself II. Find the surroundings (if the values ​​of the surroundings are not zero, then display here and no need to search again)
                                    . . . . . .
                 */

                obj.innerHTML = ''; // Displayed as empty function getAllZero(square) {
                    var around = This.getAround(square); // Found N surrounding squares for (var i = 0; i < around.length; i++) {
                        var x = around[i][0]; // rows var y = around[i][1]; // columns This.tds[x][y].className = cl[This.squares[x][y].value];

                        if (This.squares[x][y].value == 0) {
                            // If a grid is found to be zero with a certain grid as the center, then continue to call (recursion)
                            if (!This.tds[x][y].check) {
                                // Add an attribute to the corresponding td. If it has been found, the value will be true, and it will not be found again next time to prevent problems with the function call stack. This.tds[x][y].check = true;
                                getAllZero(This.squares[x][y]);
                            }

                        } else {
                            // If the values ​​of the four sides found with a certain grid as the center are not zero, display the number This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(curSquare);
            }

        } else {
            // The user clicked on the mine this.gameOver(obj);
        }
    }
    if (ev.which == 3) {
        // The user clicked the right button // If the right click is a number, it cannot be clicked if (obj.className && obj.className != 'flag') {
            return;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag'; // Switch calss if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            this.allRight = true;
        } else {
            this.allRight = false;
        }

        if (obj.className == 'flag') {
            this.mineNumDom.innerHTML = --this.surplusMine;
        } else {
            this.mineNumDom.innerHTML = ++this.surplusMine;
        }

        if (this.surplusMine == 0) {
            // The number of remaining mines is 0, indicating that the user has marked all the red flags. At this time, we need to determine whether the game is successful or over if (this.allRight == true) {
                // This condition is true, indicating that the user has marked all the correct alert('Congratulations, you passed the game');
                for (i = 0; i < this.tr; i++) {
                    for (j = 0; j < this.td; j++) {
                        this.tds[i][j].onmousedown = null;
                    }
                }

            } else {
                alert('Game failed');
                this.gameOver();
            }
        }
    }
}

gameOver Function

Mine.prototype.gameOver = function (clickTd) {
    /* 
        1. Show all mines 2. Cancel the click event of all grids 3. Mark the clicked grid red */
    for (i = 0; i < this.tr; i++) {
        for (j = 0; j < this.td; j++) {
            if (this.squares[i][j].type == 'mine') {
                this.tds[i][j].className = 'mine';
            }
            this.tds[i][j].onmousedown = null;
        }
    }
    if (clickTd) {
        clickTd.style.backgroundColor = '#f00';
    }
}

Finally, add some other features

other

// Add button functionality var btns = document.getElementsByTagName('button');
var mine = null; // used to store the generated instance var ln = 0; // used to process the currently selected state var arr = [
    [9, 9, 10],
    [16, 16, 40],
    [28, 28, 99]
]; //Different levels of rows, columns, and mines for (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = function () {
        btns[ln].className = '';
        this.className = 'active';
        mine = new Mine(arr[i][0], arr[i][1], arr[i][2]);
        mine.init();
        ln = i;
    }
}
btns[0].onclick(); // Initialize btns[3].onclick = function () {
    for (var i = 0; i < btns.length - 1; i++) {
        if (btns[i].className == 'active') {
            btns[i].onclick();
        }
    }
}

js integration code

function Mine(tr, td, mineNum) {
    this.tr = tr; // tr indicates the number of rowsthis.td = td; // td indicates the number of columnsthis.mineNum = mineNum; // mineNum indicates the number of minesthis.squares = []; // Stores the information of all squares. It is a two-dimensional array, arranged in the order of rows and columns, and access is in row and column modethis.tds = []; // Stores the DOM of all cells
    this.surplusMine = mineNum; // Number of remaining minesthis.allRight = false; // Right-click the marked red flags to see if they are all mines, to determine whether the user has successfully played the gamethis.parent = document.querySelector('.gameBox');
}

// Generate n non-repeating numbers Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td); // Generate an empty array with a length equal to the total number of cells for (var i = 0; i < square.length; i++) {
        square[i] = i;
    }
    // Array shuffle square.sort(function () {
        return 0.5 - Math.random()
    });
    return square.slice(0, this.mineNum);
};

// Create a table Mine.prototype.createDom = function () {
    var This = this;
    var table = document.createElement('table');
    for (var i = 0; i < this.tr; i++) { // rowvar domTr = document.createElement('tr');
        this.tds[i] = [];
        for (var j = 0; j < this.td; j++) { // Column var domTd = document.createElement('td');
            this.tds[i][j] = domTd; // Add all created tds to the array domTd.pos = [i, j]; // Add the rows and columns corresponding to the grid to the grid, so that the corresponding data can be obtained from the array through this value domTd.onmousedown = function () {
                This.play(event, this); // The big This refers to the instance object and the small this refers to the domTd that was clicked 
            };

            // if (this.squares[i][j].type == 'mine') {
            // domTd.className = 'mine';
            // }
            // if (this.squares[i][j].type == 'number') {
            // domTd.innerHTML = this.squares[i][j].value;
            // }

            domTr.appendChild(domTd);
        }
        table.appendChild(domTr);
    }
    this.parent.innerHTML = ''; // Avoid multiple clicks to create multiple this.parent.appendChild(table);
};

Mine.prototype.init = function () {
    // this.randomNum();
    var rn = this.randomNum(); // The position of the mine in the grid var n = -1; // Used to find the corresponding index grid for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // To get the data of a block in the array, use the row and column format to access it. // To find the blocks around a block, use the coordinate format to access it. // The row and column format is the opposite of the coordinate format, x and y. n++;
            if (rn.indexOf(n) != -1) {
                // If this condition is met, it means that the index currently looped to is found in the mine array, which means that this index corresponds to a mine this.squares[i][j] = {
                    type: 'mine',
                    x: j,
                    y: i
                };

            } else {
                this.squares[i][j] = {
                    type: 'number',
                    x: j,
                    y: i,
                    value: 0
                };
            }
        }
    }

    this.updateNum();
    this.createDom();

    this.parent.oncontextmenu = function () {
        return false;
        // Prevent right click menu event}

    // Number of mines remaining this.mineNumDom = document.querySelector('.mineNum');
    this.mineNumDom.innerHTML = this.surplusMine;
};


// Find the eight grids around a square Mine.prototype.getAround = function (square) {
    var x = square.x,
        y = square.y;
    var result = []; // Return the coordinates of the found grid (two-dimensional array)
    for (var i = x - 1; i <= x + 1; i++) {
        for (var j = y - 1; j <= y + 1; j++) {
            if (i < 0 ||
                j < 0 ||
                i > this.td - 1 ||
                j > this.tr - 1 ||
                // The above expression shows the boundary (i == x && j == y) ||
                // Indicates looping to itself this.squares[j][i].type == 'mine'
                // Indicates looping to (surrounding grids) mines (note that i and j represent coordinates, while squares store rows and columns)
            ) {
                continue;
            }
            // It needs to be returned in the form of rows and columns, because it will be needed to fetch the data in the array result.push([j, i]);
        }
    }
    return result;
}

// Update all numbers Mine.prototype.updateNum = function () {
    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            // To update the numbers around Lei if (this.squares[i][j].type == 'number') {
                continue;
            }
            var num = this.getAround(this.squares[i][j]); // Get the numbers around each mine for (var k = 0; k < num.length; k++) {
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
};

Mine.prototype.play = function (ev, obj) {
    var This = this;
    if (ev.which == 1 && obj.className != 'flag') { // The following condition is for the user to not click after right clicking // The left button was clicked var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
        // cl stores className

        if (curSquare.type == 'number') {
            // The user clicked a number obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // Clicked on the number zero if (curSquare.value == 0) {
                /* 
                    Recursive thinking: 
                    1. Display itself 2. Search around 1) Display the surroundings (if the values ​​of the surroundings are not zero, then display them here and no need to search any further)
                        2) If the value is zero, a. display itself and b. search around (if the values ​​around are not zero, then display it here and no need to search any further)
                                I. Display itself II. Find the surroundings (if the values ​​of the surroundings are not zero, then display here and no need to search again)
                                    . . . . . .
                 */

                obj.innerHTML = ''; // Displayed as empty function getAllZero(square) {
                    var around = This.getAround(square); // Found N surrounding squares for (var i = 0; i < around.length; i++) {
                        var x = around[i][0]; // rows var y = around[i][1]; // columns This.tds[x][y].className = cl[This.squares[x][y].value];

                        if (This.squares[x][y].value == 0) {
                            // If a grid is found to be zero with a certain grid as the center, then continue to call (recursion)
                            if (!This.tds[x][y].check) {
                                // Add an attribute to the corresponding td. If it has been found, the value will be true, and it will not be found again next time to prevent problems with the function call stack. This.tds[x][y].check = true;
                                getAllZero(This.squares[x][y]);
                            }

                        } else {
                            // If the values ​​of the four sides found with a certain grid as the center are not zero, display the number This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(curSquare);
            }

        } else {
            // The user clicked on the mine this.gameOver(obj);
        }
    }
    if (ev.which == 3) {
        // The user clicked the right button // If the right click is a number, it cannot be clicked if (obj.className && obj.className != 'flag') {
            return;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag'; // Switch calss if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            this.allRight = true;
        } else {
            this.allRight = false;
        }

        if (obj.className == 'flag') {
            this.mineNumDom.innerHTML = --this.surplusMine;
        } else {
            this.mineNumDom.innerHTML = ++this.surplusMine;
        }

        if (this.surplusMine == 0) {
            // The number of remaining mines is 0, indicating that the user has marked all the red flags. At this time, we need to determine whether the game is successful or over if (this.allRight == true) {
                // This condition is true, indicating that the user has marked all the correct alert('Congratulations, you passed the game');
                for (i = 0; i < this.tr; i++) {
                    for (j = 0; j < this.td; j++) {
                        this.tds[i][j].onmousedown = null;
                    }
                }

            } else {
                alert('Game failed');
                this.gameOver();
            }
        }
    }
}

// Game failure function Mine.prototype.gameOver = function (clickTd) {
    /* 
        1. Show all mines 2. Cancel the click event of all grids 3. Mark the clicked grid red */
    for (i = 0; i < this.tr; i++) {
        for (j = 0; j < this.td; j++) {
            if (this.squares[i][j].type == 'mine') {
                this.tds[i][j].className = 'mine';
            }
            this.tds[i][j].onmousedown = null;
        }
    }
    if (clickTd) {
        clickTd.style.backgroundColor = '#f00';
    }
}

// var mine = new Mine(28, 28, 99);
// mine.init();

// Add button functionality var btns = document.getElementsByTagName('button');
var mine = null; // used to store the generated instance var ln = 0; // used to process the currently selected state var arr = [
    [9, 9, 10],
    [16, 16, 40],
    [28, 28, 99]
]; //Different levels of rows, columns, and mines for (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = function () {
        btns[ln].className = '';
        this.className = 'active';
        mine = new Mine(arr[i][0], arr[i][1], arr[i][2]);
        mine.init();
        ln = i;
    }
}
btns[0].onclick(); // Initialize btns[3].onclick = function () {
    for (var i = 0; i < btns.length - 1; i++) {
        if (btns[i].className == 'active') {
            btns[i].onclick();
        }
    }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Share your own minesweeper game made with JS
  • The js version of Minesweeper implements the code principle well
  • Example code for implementing the minesweeper applet in js
  • Using pure javascript to implement the classic minesweeper game
  • javascript minesweeper game
  • HTML+JavaScript to implement the minesweeper game
  • JavaScript makes Windows classic minesweeper game
  • JavaScript version of the classic game Minesweeper game complete example [with demo source code download]
  • js+canvas implements a simple minesweeper game
  • js to implement simple minesweeping

<<:  mysql 5.7.23 winx64 decompression version installation tutorial

>>:  How to configure CDN scheduling using Nginx_geo module

Recommend

The correct way to use MySQL indexes and detailed explanation of index principles

1. Introduction Why do we need indexes? In genera...

Some points on using standard HTML codes in web page creation

<br />The most common mistake made by many w...

JavaScript implements circular carousel

This article shares the specific code of JavaScri...

CSS3 text animation effects

Effect html <div class="sp-container"...

How to generate a unique server-id in MySQL

Preface We all know that MySQL uses server-id to ...

A detailed introduction to deploying RabbitMQ environment with docker

Prerequisites: Docker is already installed 1. Fin...

Why does MySQL paging become slower and slower when using limit?

Table of contents 1. Test experiment 2. Performan...

js implements mouse switching pictures (without timer)

This article example shares the specific code of ...

Summary of DTD usage in HTML

DTD is a set of grammatical rules for markup. It i...

How to implement the observer pattern in JavaScript

Table of contents Overview Application scenarios ...

Detailed explanation of the observer mode starting from the component value transfer of Vue

Table of contents Observer Pattern Vue pass value...

Sample code for testing technology application based on Docker+Selenium Grid

Introduction to Selenium Grid Although some new f...

Detailed process of installing the docker plugin in IntelliJ IDEA (2018 version)

Table of contents 1. Development Environment 2. I...

In-depth analysis of MySQL database transactions and locks

Table of contents 1. Basic Concepts ACID 3.AutoCo...

Tips for efficient use of CSS style sheets: Take full advantage of the power of style sheets

With the continuous development of the Internet ec...