This is just the place where we will transform into a minesweeper field. The rest is ALL javascript+css. Lets finish with the css also, so it won’t bother us later. I have created the game ahead and used just some minor CSS style to go around. If you want you can enhance it with background images of fields, flags and mines, but tipically I used just 3 colors: lightblue for a discovered field, red for a mine field and orange for a flag field. So, here’s the code:

In case you don’t know, the CSS is inserted in the <head> part of the page, but it works fine in the <body> also. As for the css,
it is pretty straight forward and I don’t think It must be explained any further. Now starts the fun part: the javascript. We will start off
by adding the attribute: onload=”setupMinesweeper(‘m’);” to the <body> tag. What this says is that when the document has finished
loading run the setupMinesweeper(‘m’) function. This is the function we are going to make now and the argument is the id tag of the field we
want to place it in as string, in our case ‘m’. Having done that move to your <script> tag and ’till the end of the episode we will
work only there. We start off by making the setupMinesweeper function that initially creates the fields:

I have also added some global variables that we will need later on:mWidth – the number of columnsmHeight – the number of rowsmNumber – the number of minesmStatus – the current game status. Initially it is set to 1 for playingmFlags – the number of flags which we add the number of mines. Initially it is equal but it decreases as you place flags…DUUUHmFields - the number of discovered fields.mArr - in this array we store the position of the minesmClues – and here we store the clues and their positionmPinned – an array where we will store the position of the flags placed by the playermColors – an array of colors. We will attribute each of these colors to a specific number (blue for 1, green for 2, etc.)I
have reassigned these variables their default values again in the
setupMinesweeper() function because we will need to reset these when we
want to restart the game so it is best to do it from now.In case
you did not know, in javascript if you attribute a variable the value
[] it is the same thing as giving it the value array(). For example:
var a = array() is the samething as var a = []. I also left a space
between mNumber and mStatus to split the variables any user can modify
(number of mines, width and height of a field)o the ones that must be global and that are modified only by the script itself

Now
take a look at the function up there. This function is equivalent to
the function of filling a matrix with values. So what our function does
is for every row (mHeight)it creates a mWidth number of fields
resulting in a mHeight x mWidth number of fields. In the same time it
turns the mArr[] and mClues arryas into matrices.For each field we
attribute an unique id that will allow us to find the position of that
field with the help of its id. Basically the id of a field is composed
out of:the letter m + its position on the Y axis + the letter x + its position on the X axis.

I have also added to more attributes that are quite self explanatory.
When a user CLICKS once on a field it will attempt to place a flag on
it, when he DOUBLECLICKS the field willreveal what is “underneath” it: a mine or a hint.

There is also a field added under the field matrix where we tell a user how
many flags he has left to place and then we insert all this html code
into the container we gave asan argument for our function, in our case ‘m’.

Moving on, we need to place the mines on the field and their corresponding
hints. I have done this also in the setupMinesweeper() function for
ease of access, after all,adding the mines is part of the setup process. So, here is the enhanced function:

Ok,
as you might have noticed i have added 2 more for-s. The first one adds
mines on the field… in fact it adds mines on the mArr[][] matrix but it
is the same thing. The processis fairly simple. It selects
a random number between 1 and mWidth and another random number between
1 and mHeight. These are the idR and idC (stands for: “the ID of the
Row” and“the ID of the Column”). After that it goes into a while
that states the following: “while at the coordinates of the random set
of numbers you have chosen randomly is a mine ORyou have chosen to
place a mine on the top left corner field, choose another set of random
numbers and try again until”. So basically it searches for a field
that does nothave a mine and that is different from the top left
corner field (that field is never a mine because the guys from
microsoft considered that you MUST have 1 field from whereto start the game) and gives it the value 1 which means that it is a mine.

Here we have the flag function, a checkWin() function and a small helpful
boolean function that searches to see if an item has a specific class.
Why we need this? Because at the next step when we start revealing
fields we will mark each field by giving it a class specific to the
type of field it is. So, there are a couple of if-s there:-the first one checks to see if we are still playing (if we lost or won it is just stupid to be able to place flags)-the second one checks to see if the field is NOT discovered.-the
third if checks to see whether the field is a flag field or not and if
we have any more flags to place. if it is not a flag and we still have
flags then it adds it the “flag” class and decrements the flags left
variable, otherwise if it is a flag it unflags it and increments the
mFlags var.-the forth and final one check
to see if we still have flags to place. if we don’t (mFlags==0) then it
summons the checkWin() function. What this does it compare the mine
matrix with the flag matrix. if they overlap perfectly then we won.

Although they might seem scary, there is not that much to explain here.

The
showField() function basically adds the proper attribute and value to
the field being checked. At the end, if the total number of visible
fields plus the total number of mines is equal to the total number of
fields it calls a win() function.It also adds the specific color to
each specific number. I just took those colors from my minesweeper,
they are pretty general so nothing unusual there.

The rollback()
function is a recursive function. A recursive function is that which
calls itself. Its arguments are the X and Y coordinates of the field to
be checked.So, first it checks if the arguments entered are in the
game matrix. If it is, and if is not a mine and it is not discovered
yet it counts the mines around it. If the numberof the mind around
the field is 0 it shows it and checks all calls the rollback function
again on each of the fields surrounding it(8 calls).

And the
revealField() function. This is the one who tells the other functions
what to do. It initially check to see if we are still playing. If we
are it gets the coordinatesof the field that was doubleclicked. It
gets its matrix coordinates by removing the first caracter of its ID
which is always ‘m’ and spliting it by the value ‘x’. What is on theleft is its position on the Y axis and what is on the right is its position on the X axis.

It then check to see if it is a mine. If it is, we have lost. If not, it
checks the sum of all the mines around it. If it is 0 it calls the
rollback() function I told you aboutearlier, if not then it just reveals the field.

Finally we end this tutorial up by writing our final lines of code, the win() and lose() functions: