Minesweeper with HTML5 & JQuery

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.