One from the drafts I created in Jan 2014
What would you do if you have a lot of time but no IDE? Create a Javascript game 🙂
I recently had an obsession with Minesweeper and I was amazed by how simple the game can actually be. So I opened a notepad and started out writing my own code for minesweeper.
Here is a link to the working game. View source to see what’s happening. All the logic is in the linked game.js file.
I will go about explaining how the logic behind the game was generated (More for my pleasure of explaining than anybody’s interest in reading).
The HTML
This is so simple I don’t even need to put it here. But I’ll do it anyway…
<div id="gameContainerOuter">
<div id="gameContainer">
<table id="mineField" cellspacing="0" cellpadding="0" border="0">
<!-- Auto generated cells -->
</table>
</div>
<div id="instructionsContainer">
<div id="instructionsContent">
Play the game like the regular minesweeper <br />
Settings/New Game options are to the right <br />
Access by clicking the [+] area <br />
</div>
</div>
<div id="settingsContainer">
<div id="settingsHandle">
<span>[+]</span>
</div>
<div id="settingsContent">
<a id="newGame" href="#" style="margin:15px; padding:5px; border:1px solid #000000; background-color:666666">Start new game</a><br />
<br />
<input type="radio" name="gameLevel" id="levelEasy" /> <label>Easy (10x10 with 10 mines)</label><br />
<input type="radio" name="gameLevel" id="levelMedium" /> <label>Medium (15x15 with 25 mines)</label><br />
<input type="radio" name="gameLevel" id="levelHard" /> <label>Hard (25x25 with 50 mines)</label>
</div>
</div>
<div style="display: block; clear: both;"></div>
</div>
Populating the cells
Populating the cells is more of a JQuery game. Brushed up a bit on traversals and got the following code working:
function placeMines(row, col)
{
var minesPlaced = 0;
for (var i=0; i<size; i++)
{
field[i] = new Array();
for (var j=0; j<size; j++)
{
field[i][j] = false;
}
}
while (minesPlaced < mines)
{
var randomRow = Math.floor(Math.random() * (size));
var randomCol = Math.floor(Math.random() * (size));
// alert("Mine " + minesPlaced + " @ " + randomRow + ", " + randomCol);
if (randomRow != row && randomCol != col && field[randomRow][randomCol] == false)
{
field[randomRow][randomCol] = true;
minesPlaced ++;
}
}
}
Finally it’s just about adding a few handlers and getting the whole code working. This turned out to be rather simple in the end
