OOP Minesweeper using JavaScript

• Download source files - 5.66 Kb

Introduction

This is my first attempt at a game as well as my first article here at The Code Project.

I have always wanted to create a game and the first thing that came to my mind that I might be able to make, was the classic game Minesweeper, that has always come along with the Microsoft OS (at least to my knowledge). Since my skills are mainly in the area of web application development, I immediately jumped into creating the game board with HTML and scripted it along with JavaScript. I learned many cool tricks developing this game and I hope that you find some of them useful and interesting as I share them in this article.

Planning

I know that planning is a good idea and all ... but ... I just jumped in head first and tried to make different parts of the game work as they seemed logical to me. After coming back through and cleaning up my code, I can see many future possibilities of expanding the features of the game but for now, it works and can be played as many times as you want.

The game board

The game board itself is represented by a two-dimensional array filled with mineNodes. Each mine node captures its own events (left and right-clicking, along with some useful information in the status bar on mouse-overs) and holds information about itself and its surroundings.

/*/
/// MINE NODE CONSTRUCTOR
/// This creates a default node for the mine game to be used for
/// keeping track of its status, if it is a mine, and how many mines
/// are surrounding it.
/*/
function mineNode() {
    // Properties
    this.strStatus = "unclicked";
    this.boolIsMine = false;
    this.intSurroundingMines = 0;
}

Making it versatile

Originally I just made the game very sloppily (no planning will do that) and it would only do the novice level of the Minesweeper game one time. After thinking about it, and remembering that I did learn how to make object oriented programs back in college, I knew the logic should be basically the same for any size game. So, that's what I did. A bunch of thinking, removing unwanted and ugly code, and one huge recursive function later I developed a mineGame object. This takes in three arguments to define the number of columns, rows, and mines.

/*/
/// MINE GAME CONSTRUCTOR
/// This creates a mine game
/*/
function mineGame(rows, cols, mines) {
    // Properties
    this.boolGameOver = false;
    this.intFlags = 0;
    this.intQuestions = 0;
    this.intRows = parseInt(rows);
    this.intCols = parseInt(cols);
    this.intMines = parseInt(mines);
    this.intRemainingSpaces = this.intRows * this.intCols;
    this.strDivHTML = "";
    this.arrRows = new Array(rows);

    // Methods
    ...
}

Current drawbacks

Unfortunately the game is not completely independent in its design. The game has only been tested with Internet Explorer 6.0 on a WinXP machine. I don't think any version of Netscape will run it properly and have no idea how other OS's will handle the game. It relies on DIVs to place the game board, mines remaining, and the timer on a web page. Images are used to display the different states of a mineNode and they must load for their first use, which can delay the game play. Oh, and what fun is it to play a game if you can't keep track of your high-score (or other people's high-scores too) and try to beat that mark? Alas, the game is not as fast as a compiled game (of course) and will fluctuate in performance depending on your Internet connection (mainly the image issue) and CPU speed. If you are a serious Minesweeper player this maybe a very frustrating version to play.

Bugs

For the most part, the game is rather "bug free". The bug that I have found is that sometimes (mainly in the Intermediate or Advanced games) the game will end in a "You Win" prompt before you have actually cleared all of the remaining squares. My bet is that the counting is messed up somewhere in the hairy recursive function to clear large areas. As of yet I have not had the time to find the error and correct it, however, any comments or suggestions are most appreciated.

The future

Here is what I would like to do with the game in the future:

• Create different style-sheets to apply different themes / looks
• Keep high scores
  • Gotta validate users with some sort of login
  • Use server side scripting (probably ASP.NET / C# ... maybe a web service?) to save high scores
  • Keep track of individual and overall high scores
• Maybe make the game into a HTML Component (HTC)
• Update the high-scores dynamically using XMLDOM (to avoid refreshing the entire page)

Versions

• 1.0 - This was the original version of the JavaScript Minesweeper game that I created using images to display the different states of the mineNodes. You can still play this game here.
• 2.0 - The images have been removed from the game and replaced with style sheets. This helps reduce the load time and will allow for people to easily create a different look for the game. You can play this version here.

Conclusion

It was a ton of fun creating this game. Please feel free to send suggestions for this project. I'd love to hear any feedback people might have ...