The introduction

A while ago, I was bored and didn’t really want to play LOL, so I found mine clearance in my computer. At that time, I was in a magical place, using a windows2000 system interface, but mine clearance was actually in the style of win7. I played a few games, and one of them was very broken.

In this case, it’s a test of luck, but it turns out…

I succeeded in choosing the one with the bomb, from which I learned a truth, that is: success requires 99% effort and 1% luck…

Principle (Idea)

layout

Play a few sentences to make clear the rules of the game, want to do a diy, because before 2048, so the first thought is to use two-dimensional array layout

Add three difficulty buttons

<a class="type" href="#" data-width="9" data-height="9" data-mine="10">simple</a>
<a class="type" href="#" data-width="16" data-height="16" data-mine="40">The intermediate</a>
<a class="type" href="#" data-width="30" data-height="16" data-mine="99">senior</a
Copy the code

Click the corresponding button to obtain the corresponding data attribute through JS, and then dynamically generate the corresponding squares, and then dynamically calculate the width and height of all the small squares. In order to facilitate the operation of each small square in the future, add a unique ID to each small square according to the row.

Box object

attribute

Since minesweeper operates on each grid, I treat each grid as an individual, with attributes and methods, that are equivalent to a small object. Two arrays are defined

// An array representing the identity of the box
var boxArr = [];
// Used to store the number of mines in the surrounding eight cells
var MineArr = [];
Copy the code

From these two arrays, I know whether each cell is a bomb, and how many bombs there are in each of the eight cells around each cell, which is a property of the cell object.

methods

Box objects also have mouse-down and mouse-up methods, so be careful not to add events to each box. If you have 100 boxes, you need to add 100 events, and in fact there are more in advanced boxes, so you can bind events to containers and use bubbles. The same effect can be achieved with only one event bound

container.on('mousedown'.'.box'.function (e) {
  $(e.target)// Get the element whose class is box
}
Copy the code

In some cases, the MineArr box may contain a zero, which means that there are eight bombs around it that do not exist. In this case, you can automatically open the eight boxes around it. MineArr[I][j]==0; MineArr[I][j]==0; MineArr[I][j]==0; MineArr[I][j]==0; MineArr[I][j]==0

Another must-have method in minesweeper is to press the left and right keys together on a dotted grid, which automatically determines the number of mines in the surrounding grid and the value of the grid you clicked on. If you mark the number of mines equal to the number of left and right clicks on the grid, it will automatically click on the remaining boxes for you, which may or may not have mines, depending on whether you mark the right mines.

This is also quite good, right click when pressed will never click around ever marked ray box to add a class with other colors, and then record around eight squares marked by the number of ray, and then move the other class, when right to loosen and judge just record marked by the number of ray and click on the current grid values are equal, And then go to the next step.

Judgment of success and failure

Failure is easy to judge. If you hit a box with boxArr of 1, you will fail.

Success is judged by the number of squares that come out. The successful squares equal to the total squares minus ray’s squares are judged as victory

conclusion

Although it is a relatively simple game, but I still encountered a lot of bugs when doing, but also learned a lot of, here list.

Empty the problem

  • Each time you create a new cell, you empty all the cells you created last time

  • I add click events to the box by bubbling on to the container, and the Container does not disappear, so I have to unbind the events on the Container every time I create a new grid

Right click

Right clicking is a default behavior on a web page, and should be disabled in this game

// Remove the default ContextMenu event, otherwise it will appear at the same time as the default right click event.
document.oncontextmenu = function (e) {
  e.preventDefault();
};
Copy the code

each()

You can’t break each in jquery. Is a break replaced by return false, a return true, or a continue replaced by return

The last

There are some small bugs in my thinking or writing method, I used the corresponding method to solve them. We can look at the source code, because it takes a short time, there may be some problems inside, but also please forgive big bosses, welcome big bosses to correct. Ben is so grateful

Try a little game

If you giants like, no have face for a star

The project address