It is difficult to become an effective web developer. One way to make it easier is to leverage the technology available to you, like your browser’s developer tools.
Learning how to use your browser’s developer tools is very important. You will find these tools very helpful when working through my JavaScript tutorials. They can be used for experimenting, debugging issues, and generally seeing what’s going on behind the scenes. In this post I’m going to show you some of the most useful things you can do with them.
I’ll be using Google Chrome, but any browser will have similar tools available. In Chrome, you can open up your browser’s developer tools using several different methods. The quickest method is probably using the keyboard shortcut, Ctrl + Shift + I. Since you’re presumably reading this post in your web browser, go ahead and do that right now.
Once you have the developer tools opened up you’ll notice a toolbar at the top. There are many tabs, and all have their uses. The ones I use most often are the Elements, Console, and Sources tabs.
There are also two little icons in the top left. One let’s you jump to any HTML element on the page, and the other let’s you see what the page would look like on a mobile device. I find those little buttons helpful too.
Here is a screenshot pointing all this out.
Elements
The Elements tab will let you make changes in real time to the HTML and CSS. This is handy because it let’s you try out changes before adding them to your HTML or CSS file. It speeds up development and allows you to iterate faster.
Just make sure you don’t get carried away. It’s possible to make a whole bunch of changes in here, but they will get reset if you refresh the page. Make sure you add your changes to the code itself if you want to keep them permanently.
Console
The Console tab lets you execute arbitrary JavaScript code in the console. This is helpful for testing things out and inspecting the contents of variables in real time.
For example, we can see below what is contained inside the answers array in the code I wrote for the ear trainer tutorial. Just type the name of the variable you want to inspect in the console and press enter.
In my opinion, the most useful thing about this tab is that you can put break points in your JavaScript code. Break points allow you to pause the execution in the middle of your running program and step through it line by line. You can also inspect the contents of different JavaScript variables that are in scope.
This is very helpful when debugging problems with your code. You can see here how I’ve set a break point at the line where we evaluate if an answer is correct. I’ve also evaluated the variables in the console so I can see if they match.
Mobile Friendly
Finally, by clicking the mobile device icon we can see a preview of what my crossword puzzle generator post looks like on a mobile device. You can choose from different device types and orientations. Testing on real devices is always the best, but this is a handy feature to make sure the page generally looks good.
You should take the time to explore more of these buttons and tabs on your own, as there is a lot of really cool and useful functionality for you to discover.
The best way to get good at using your browser’s developer tools is good old fashioned practice. Keep that in mind as a silver lining the next time you’re frustrated by a bug in your JavaScript code.
As always, thanks for reading. Follow me on Twitter if you’d like to keep up with what I’m up to.
You can also subscribe to my blog if you’d like some tips on writing functions and to have my blog posts show up in your inbox.
In my last tutorial I described the snake game I built using JavaScript, and before that I built a version of minesweeper. For this week’s post I decided to show you guys how to build hangman with JavaScript. I’m sure there are plenty of coding choices I’ve made that can be criticized, but hopefully I’ve still accomplished my goals. Namely, to have fun making little games and teach people a little bit about JavaScript and programming.
I already know what you’re thinking. How did I afford such an outstanding artist? Believe it or not, I actually created that condemned bandit artwork all on my own. Like most professional programmers, I can wear multiple hats.
I loved playing hangman when I was growing up as a kid. It’s one of those rare games that teaches you important concepts without you even realizing it. In order to become good at hangman, you have to become proficient with language. Another thing I loved as a kid (and still do) was watching movies. So naturally, I decided to combine these two passions and create “Movie Hangman”.
Unlike my previous game tutorials, I decided to build hangman with mobile users foremost in mind. To accomplish this I used something called CSS media queries. We use these to apply different CSS rules for different screen sizes. Be sure to check it out in the CSS file if you’re interested, as the bulk of this post covers the JavaScript game logic.
Alright, let’s start learning how to build hangman with JavaScript.
Rules of Hangman
A word or phrase is chosen for the player to guess.
Initially, the player can only see how many letters and words make up the full word or phrase.
The player begins by guessing letters. Each correct guess reveals every location where the letter exists in the word or phrase. Each incorrect guess results in another piece of the man getting added to the gallows.
If he thinks he knows it, the player is also allowed to guess the entire word or phrase.
The player wins if he successfully guess the word or phrase. He loses if he completes the picture of the condemned man, resulting in his grim demise.
Game Object
JavaScript code for creating our hangman game object.
The Game function is responsible for creating our game object. This object will be responsible for holding the data about the current state of the game and the methods for acting upon that data. The game object will have 7 internal variables for handling state: word, guessedLetters, maskedWord, incorrectGuesses, possibleGuesses, won, and lost.
The word variable stores the word that the player is trying to guess. We assign it a random movie from our list of movies when we initialize the game object.
Word.
The guessedLetters variable is an array. We use it to store letters as the player guesses them.
The maskedWord variable is the word or phrase as it is displayed to the player. It starts out as a bunch of underscores with spaces separating the words, and it slowly gets filled in as the player makes more correct guesses. We initialize it via a for-loop.
Masked word.
The incorrectGuesses variable is a counter for storing the number of times the player has guessed incorrectly. Too many wrong guesses and the player will lose the game. Naturally, this counter starts at zero.
The possibleGuesses variable is a string containing all of the letters in the alphabet. Letters are removed as they are guessed. These are displayed to the player so he doesn’t have to remember what he has already guessed.
Possible guesses.
The won and lost variables keep track of whether the player has won or lost the game. These are displayed to the player when the game is over.
getMaskedWord: A simple getter for the maskedWord variable.
guess: We call this function whenever a player guesses a letter. After capitalizing the letter for consistency we make sure it hasn’t already been guessed. Then we add it to the the array of guessed letters and remove it from our list of possible guesses. If the word contains the guessed letter we determine what the indexes of those matches are. Then, we reveal those letters in the masked word that is displayed to the player. If the word does not contain the guessed letter we call the private handleIncorrectGuess function to increment the number of incorrect guesses and check for a loss.
getPossibleGuesses: The possibleGuesses variable returned as an array using the spread syntax.
getIncorrectGuesses: A simple getter for the incorrectGuesses variable.
guessWord: We call this function whenever the player wants to take a guess at the entire word or phrase.
isWon: A simple getter for the won variable.
isLost: A simple getter for the lost variable.
Private Methods of the Game Object
guessAllLetters: This function loops through all of the letters in the word and calls guess on them. Its purpose is to display the movie title after the player guesses it correctly, or alternatively when the player has lost the game.
handleIncorrectGuess: This function takes care of a few things whenever a player guesses wrongly. It updates the number of incorrect guesses and checks for a loss. If a loss has a occurred, it calls guessAllLetters.
There is one more function worth talking about in this section called replace. It doesn’t really belong in our game object because it has utility outside of that context. We are gonna keep it on its own in case we ever decide to use it later.
JavaScript function for replacing a character in a string at the specified index.
The function takes a string, an index, and a replacement string as parameters. It substitutes the replacement string for the character at the specified index. We use it to replace underscores with characters in our masked word.
That wraps up our discussion about the game object. Let’s move on and talk about how we handle player input.
Handling Player Input
JavaScript code for handling player input.
Our goal is to make this game a fun experience on a desktop computer as well as a mobile phone. In order to do that we need to offer a few different ways to play.
One way to play involves using the keyboard to enter letters. This works great on a full-fledged hardware setup, but not so great on a mobile phone. For mobile users we ought to offer a way to use the touchscreen to make guesses.
Guessing a letter
Both of these input methods resolve down to the same basic action: sending a letter to our game object as a guess. This is a pretty good indicator that we should have a common function for handling this logic.
We will call this function guessLetter. It resides inside the listenForInput function which will be used for setting up our input handling logic. When called, and as long as the game is still going on, this function calls guess on our game object and then calls render to update the screen. We’ll talk more about the render function momentarily.
For both the keyboard and touchscreen input we attach event listeners to the document body.
Handling Touchscreen Input
When the player touches a letter (or clicks on it with his mouse), the handleClick function is called. This function checks the class list of the HTML element that was clicked. If the class list contains the “guess” class, that letter is passed to the guessLetter function.
Handling Keyboard Input
Handling keyboard input is a bit more complicated because there are more features to implement and more validation is necessary. The function that takes care of all this is called handleKeyPress.
The first thing we do is calculate some values that will help us take appropriate action. One of the first things we do is determine if the key that was pressed is a letter. Then, we grab HTML elements representing the guess word button, the new game button, and the guess box. We also check to see if the guess box is already populated with a win/loss message.
Finally, we take action. If the cursor is not in the guess box and player pressed a letter, we make a guess. If the game is over and the player pressed enter, we start a new game. And if the player pressed enter, the game is still going on, and there is content inside the guess box, we take a guess at the full movie title.
Guessing the Word
JavaScript code for making a guess at the full word in our hangman game.
The player can take a guess at the full word by clicking the guess word button. He can also do so by pressing enter, as we saw in the previous section. When this occurs, the guessWord function is called.
This function first checks if the game is still going on. If it is, the guessWord function of the game object is called, and then render is called to update the screen.
Rendering the Graphics
JavaScript code for rendering updates to the screen.
Let’s discuss how to update the screen after changes are made to the game object. This is handled by the render function, and it is called after every guess that the player makes.
Overall it’s a pretty simple function. We set the innerHTML of the different elements that correspond to the data in our game object. We also set the image by using a neat little naming convention hack.
The trickiest part of this function is how we render the possible remaining guesses to the screen. We have to clear out the div and then loop through the possible guesses variable, appending the appropriate span as we go along.
Starting a New Game of Hangman
JavaScript code for starting a new game of hangman.
Okay, we’re almost done building hangman. Soon you’ll have all of the pieces needed for learning how to build hangman with JavaScript. The last thing to cover is kicking off a new game!
When the page loads, we call the Game function to create a new game object. Then we call render to display the game data to the screen, and call listenForInput to, well, start listening for input from the player.
We also have a function called newGame. If you observe the HTML, you’ll see that this function is attached to the new game button. Instead of going to the trouble of resetting our game object and event listeners, we use a neat little trick to go back to the most recent URL in the browser history. This should redirect the player to the URL of the hangman game, and reinitialize all of the JavaScript.
Conclusion
Congrats on learning how to build hangman with JavaScript! Hopefully it makes sense after breaking it up into modules like this. If you have questions or see ways to improve the code, I’d love to hear from you in the comments!
For your next steps, you could try adding some more features, like different, selectable word categories or supporting characters besides just letters.
Let me know in the comments what other simple games like this you would like to see, and don’t forget to drop me your email so you don’t miss the next one that comes out. You will also receive my free checklist for writing great functions.
In my last post I showed you guys the minesweeper game I built using JavaScript, and before that I built tic tac toe. For this week’s post I decided to show you guys how to build snake with JavaScript.
Now, the DOM was not originally designed for quickly updating graphics. There are better mediums to work in, but I wanted build something using basic web technologies. Still, I wanted it to be a little more dynamic than the games featured in my last tutorials. The snake game seemed to strike that balance well.
I also wanted to incorporate some of the feedback I received on my last post. I tried to use more of the modern features that JavaScript provides us, and I left jQuery behind.
With that out of the way, let’s get started. If you want to learn how to build snake with JavaScript, the first step is understanding how the game works. Let’s jump right in and talk about the rules.
Rules of the Game
The board is grid of cells through which the snake can traverse.
The player controls the head of the snake. It can only move in four directions: left, right, up, or down.
The snake is always moving, and the body follows the path set by the head.
Running into a wall or the tail of the snake causes the player to lose the game.
The goal of the game is to eat as much food as possible.
The snake grows by one in length whenever it eats a piece of food. Then, the game places a new piece of food in a random cell of the board.
Enums
JavaScript doesn’t really have the concept of an enum built in, but we can make our own version that will suffice. We are going to create two of them. They will prove themselves useful throughout the rest of our programming task.
Cell Type
JavaScript code for creating our cell type enum.
The first enum to discuss is the CELL_TYPE. This an object containing three possible values: EMPTY, FOOD, and SNAKE. These are the only three values that can be assigned to a cell of the game board.
We declare it using the const keyword, which means we can’t assign the CELL_TYPE variable a different value. We also freeze the object to further lock it down. Our aim here is to create an immutable object. If the purpose of an object is to provide constant values we might as well try to prevent somebody else from changing it. This implementation gets us pretty far down that road while still being readable.
Direction
JavaScript code for creating our direction enum.
The second enum to discuss is the DIRECTION. This an object containing five possible values: NONE, LEFT, RIGHT, UP, and DOWN. These represent the directions in which the snake can be traveling. Its structure is very similar to the CELL_TYPE enum.
Objects
Our game consists of four main objects: the cell, the board, the snake, and the game. We have many cell objects that make up our board, but we only have one board, snake, and game object. Let’s discuss the functions we will use to create these objects.
Cell
JavaScript code representing a cell on our grid.
We call the Cell function to create a very simple object representing one cell of our game board. The board consists of a grid of cells, and each cell has a few properties:
row: An integer representing which row on the board the cell belongs to.
column: An integer representing which column on the board the cell belongs to.
cellType: The value associated with the cell. This could be one of three values: EMPTY, SNAKE, or FOOD. These values come from the CELL_TYPE enum we discussed earlier.
Board
JavaScript code representing the game board.
Okay now let’s talk about the board. The Board function is a blueprint for creating our board object. The board object we create should contain all of the logic for representing and modifying our game board.
The function takes two parameters: rowCount and columnCount. We use these two parameters to specify the size of the game board. We initialize our lone internal variable using these parameters, and end up with a two dimensional array named cells. Then we loop through our cells variable and create a cell object for each slot in the array. When starting out, each cell should be EMPTY.
That takes care of the board initialization. Now let’s talk about the methods and data that we publicly expose.
Public Methods of the Board
cells: Our two dimensional array of cells. We just talked about how to initialize the cells variable, and now we need to allow other parts of our program to access it.
render: This method handles the graphics of our game. It updates the HTML document on every iteration of the game loop. Each cell has the appropriate CSS class added or removed based on its cell type.
placeFood: This method randomly places food on the board. It leverages a private function we created, called getAvailableCells. This private function grabs a list of currently empty cells. Then, we place food in a randomly chosen one. We call placeFood as soon as the snake has enjoyed a nice warm meal.
getColumnCount: A simple method that returns the number of columns. You may be wondering why we don’t just expose the variable itself, like we did with our cells array. The reason is because we pass this number by value, not reference. When we return the cells object, we are passing by value as well, but the value happens to be a reference to the object. For further details about this topic, see this post and this other post.
getRowCount: A simple method that returns the number of rows.
Now let’s talk about our snake object.
Snake
JavaScript code representing the snake object.
The Snake function is a blueprint for creating our snake object. The snake object we create should contain all of the logic for representing and modifying our snake.
We pass three arguments to our Snake function: cell, startingLength, and board. The cell is the starting Cell of the head of the snake, the startingLength is the initial size of the snake, and the board is the game board object that we have created by calling the Board function.
We use these three arguments to initialize two internal variables of our snake object: its head cell and its snakeParts array. We simply assign the head variable to the cell that we passed in, and then set its cell type to SNAKE.
For the snakeParts, we first push the head of the snake onto the array. Then, using a for loop, we grab the cell from the next row of the board, set its cell type to SNAKE, and push it onto the array. We do this until the length of our snake matches the startingLength. This results in a vertical snake whose head is closest to the top of the game board. Of course, we are free to change this to suit our preferences.
Before moving on to talk about the publicly exposed methods of our snake, I’d like to point something out explicitly. We have designed the board and snake objects to share the same cell objects. This is an important detail to grasp if you want to understand how these objects work together.
Public Methods of the Snake
grow: This method simply pushes the internal head variable onto the internal snakeParts array. We call it after the snake eats a piece of delicious food.
move: This method is the snake’s most complicated one. First, it removes the tail of our snake and sets its cell type to EMPTY. Next, it sets the head of the snake to the cell being moved into, and sets that cell’s type to SNAKE. Finally, it loops through all of the snakeParts and sets the cell type to SNAKE for each. This last step handles the situation where the snake is moving right after growing in size. We call the move method once per iteration of our game loop.
checkCrash: This method checks if our snake has crashed into a wall or itself. If the cell is undefined then we know the snake has stepped out of the bounds of the game board and crashed. If the cell is not undefined then we check if the snake has collided with itself.
getHead: A simple getter for our head variable.
Now let’s talk about our game object.
Game
JavaScript code representing the snake game.
The Game function is a blueprint for creating our game object, and the game object we create should contain all of the logic for handling the interactions between the snake and the game board. We pass the snake and board objects to the Game function as arguments.
While the publicly exposed methods of our game object are quite complex, the initialization of the object is very simple. We have four internal variables: directions, direction, gameOver, and score.
The directions array starts out empty. We use it to queue up directions that the player has pressed. The queue helps us avoid frustrating behavior when a player inputs multiple directions before the game is able to update. We do not want to punish the player for quick fingers! Using a single variable to store the direction would result in a pretty annoying control scheme.
We set the initial direction of the snake to NONE. This makes the snake motionless at the start of a new game. The directions array will be used to feed in new values to this variable.
We initialize the gameOver variable to false. We don’t want to end the game before it has begun.
Finally, we initialize the score variable to zero. We will increase the score as the snake eats food.
Public Methods of the Game
update: This method puts all of the pieces together. We call it once per iteration of the game loop, and it contains the bulk of the logic needed for the snake and the board to work together. After checking to make sure the game is still going on, this method calls the private getNextCell function. This function figures out which direction the snake is headed, removes that direction from the queue, and returns the cell that the snake is about to enter. Then, the method checks if the snake has crashed. If the snake has crashed, we end the game and display the final score. Otherwise, the snake moves to the next cell. If there was food there, the snake eats it and grows and we place another piece of food on the board.
addDirection: This method takes a direction as an argument and pushes it onto the directions queue.
getLastDirection: This method returns the value of the last direction in the directions queue.
exceededMaxDirections: We set the maximum number of directions allowed in the queue to three. This prevents the player from spamming the arrow keys a huge number of times and building up a list of directions that are no longer relevant.
Snake Game Initialization
So far we have covered the building blocks necessary for putting together a game of snake with JavaScript. However, we still have a few more pieces to talk about that revolve around initializing a new game. These pieces include initializing the HTML, initializing the input handler, and starting a new game.
One thing to keep in mind while reading this code is that we want to be able create a fresh game state with ease. Modifying our objects directly seems cumbersome and error prone if we make more changes later. Instead, we are going to throw away our old objects and create new ones.
Initializing the HTML
JavaScript code for adding a class and ids to the cells of our snake game board.
The purpose of this function is to initialize the HTML elements that represent our snake game board. We start by grabbing all of the elements containing the “cell” CSS class. This should get us all of the cells. Then, we loop through each one of them.
Each cell has its id set to a value that represents its row and column number. Also, we remove the CSS classes from each cell and then add the “cell” class back. This ensures that we remove any classes that were added by the previous run of the game.
Initializing the Input Handler
JavaScript code for handling user input.
The purpose of the listenForInput function is to handle the keyboard input provided by the player. For our game, the controls are the arrow keys. This function takes the game object as an argument.
The bulk of the logic takes place inside the changeDirection function. This function is responsible for determining when to add a direction to the directions queue of the game object. We add an event listener to our document that executes the changeDirection function on every keydown event. We clear and reset it each time we call the listenForInput function.
The first time changeDirection is triggered we add the UP direction to the queue. This helps us ensure that the player will not die on the first move. On subsequent calls to the function we listen for arrow key presses.
When the snake is moving vertically we do not allow the player to add vertical directions, and when the snake is moving horizontally we do not allow the player to add horizontal directions. This prevents the player from building up a queue of redundant directions or killing the snake inadvertently. We also prevent adding directions to the queue if it is already full. The movingHorizontally and movingVertically helper functions handle these checks, and make use of the publicly exposed methods of the game object to do so.
Starting A New Game
JavaScript code for starting a new game of Snake.
Alright we are getting close now. Just a few more steps and you will have all of the pieces for learning how to build snake with JavaScript! Let’s talk about how to start a new game using all of the building blocks we have constructed thus far.
We have a function called newGame that we call to start a new game. Inside this function we need to set up some constants for the row and column count of our board, as well as for the starting length of our snake. We will use the constants to initialize our game objects.
Once we have our constants, the first thing we do is initialize our board by calling the Board function and passing in our row and column counts as arguments. Then, we use those counts to calculate a good starting position for the head of our snake. We could hard-code this value, but I chose to programmatically place the snake’s head in the center of the board. We pass in this center cell, the board, and the starting length value to the Snake function to create our snake object. Finally, we use the board and snake objects to create our game object using the Game function.
Next, we call initializeCells to assign ids and CSS classes to our HTML cells (represented by div tags). Then we placeFood on the board and call render to show it to the player. After that we call listenForInput to start handling the player’s keyboard input. Finally, we start our game loop. On every iteration we update the board and then render the results on the screen.
The last bit of code attaches a click handler to a button in our pop up modal. We use this click handler for starting another game once the last one has ended. It hides the modal, stops the game loop, and calls the newGame function. We call the newGame function as the first thing we do, and then again every time the player clicks the play again button in the modal.
Conclusion
Congrats on learning how to build snake with JavaScript! That was a lot of code, but hopefully it makes sense after breaking it up into modules like this. If you have questions or see ways to improve the code, I’d love to hear from you in the comments!
I hope you guys enjoyed learning about how to build snake with JavaScript. Let me know what other simple games like this you would like to see, and don’t forget to drop me your email so you don’t miss the next one that comes out.
In my last post I showed you guys a tic tac toe game I built using JavaScript, and before that I built a matching game. For this week’s post I decided to ramp up the complexity a bit. You guys are going to learn how to build minesweeper with JavaScript. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work. If you want to learn more about it, the documentation for it is very good.
Click here to play minesweeper! You will want to play it on your desktop computer because of the control scheme.
If you want to learn how to build minesweeper with JavaScript, the first step is understanding how the game works. Let’s jump right in and talk about the rules.
Rules of the Game
The minesweeper board is a 10 x 10 square. We could make it other sizes, like the classic Windows version, but for demonstration purposes we will stick to the smaller, “beginner” version of the game.
The board has a predetermined number of randomly placed mines. The player cannot see them.
Cells can exist in one of two states: opened or closed. Clicking on a cell opens it. If a mine was lurking there, the game ends in failure. If there is no mine in the cell, but there are mines in one or more of its neighboring cells, then the opened cell shows the neighboring mine count. When none of the cell’s neighbors are mined, each one of those cells is opened automatically.
Right clicking on a cell marks it with a flag. The flag indicates that the player knows there is a mine lurking there.
Holding down the ctrl button while clicking on an opened cell has some slightly complicated rules. If the number of flags surrounding the cell match its neighbor mine count, and each flagged cell actually contains a mine, then all closed, unflagged neighboring cells are opened automatically. However, if even one of these flags was placed on the wrong cell, the game ends in failure.
The player wins the game if he/she opens all cells without mines.
Data Structures
Cell
JavaScript code representing a minesweeper cell.
Each cell is an object that has several properties:
id: A string containing the row and column. This unique identifier makes it easier to find cells quickly when needed. If you pay close attention you will notice that there are some shortcuts I take related to the ids. I can get away with these shortcuts because of the small board size, but these techniques will not scale to larger boards. See if you can spot them. If you do, point them out in the comments!
row: An integer representing the horizontal position of the cell within the board.
column: An integer representing the vertical position of the cell within the board.
opened: This is a boolean property indicating whether the cell has been opened.
flagged: Another boolean property indicating whether a flag has been placed on the cell.
mined: Yet another boolean property indicating whether the cell has been mined.
neighborMineCount: An integer indicating the number of neighboring cells containing a mine.
Board
JavaScript code representing our game board.
Much like in the snake game I made, our board is a collection of cells. We could represent our board data in many different ways. I chose to represent it as an object with key value pairs. As we saw earlier, each cell has an id. The board is just a mapping between these unique keys and their corresponding cells.
After creating the board we have to do two more tasks: randomly assign the mines and calculate the neighboring mine counts. We’ll talk more about these algorithms in the next section.
Algorithms
Randomly Assign Mines
JavaScript code for randomly assigning mines to cells.
One of the first things we have to do before a game of minesweeper can be played is assign mines to cells. For this, I created a function that takes the board and the desired mine count as parameters.
One of the first things we have to do before a game of minesweeper can be played is assign mines to cells. For this, I created a function that takes the board and the desired mine count as parameters.
For every mine we place, we must generate a random row and column. Furthermore, the same row and column combination should never appear more than once. Otherwise we would end up with less than our desired number of mines. We must repeat the random number generation if a duplicate appears.
As each random cell coordinate is generated we set the mined property to true of the corresponding cell in our board.
I created a helper function in order to help with the task of generating random numbers within our desired range. See below:
Helper function for generating random integers.
Calculate Neighbor Mine Count
JavaScript code for calculating the neighboring mine count of each cell.
Now let’s look at what it takes to calculate the neighboring mine count of each cell in our board.
You’ll notice that we start by looping through each row and column on the board, a very common pattern. This will allow us to execute the same code on each of our cells.
We first check if each cell is mined. If it is, there is no need to check the neighboring mine count. After all, if the player clicks on it he/she will lose the game!
If the cell is not mined then we need to see how many mines are surrounding it. The first thing we do is call our getNeighbors helper function, which returns a list of ids of the neighboring cells. Then we loop through this list, add up the number of mines, and update the cell’s neighborMineCount property appropriately.
Won’t you be my neighbor?
Let’s take a closer look at that getNeighbors function, as it will be used several more times throughout the code. I mentioned earlier that some of my design choices won’t scale to larger board sizes. Now would be a good time to try and spot them.
JavaScript code for getting all of the neighboring ids of a minesweeper cell.
The function takes a cell id as a parameter. Then we immediately split it into two pieces so that we have variables for the row and the column. We use the parseInt function, which is built into the JavaScript language, to turn these variables into integers. Now we can perform math operations on them.
Next, we use the row and column to calculate potential ids of each neighboring cell and push them onto a list. Our list should have eight ids in it before cleaning it up to handle special scenarios.
A minesweeper cell and its neighbors.
While this is fine for the general case, there are some special cases we have to worry about. Namely, cells along the borders of our game board. These cells will have less than eight neighbors.
In order to take care of this, we loop through our list of neighbor ids and remove any id that is greater than 2 in length. All invalid neighbors will either be -1 or 10, so this little check solves the problem nicely.
We also have to decrement our index variable whenever we remove an id from our list in order to keep it in sync.
Is it mined?
Okay, we have one last function to talk about in this section: isMined.
JavaScript function that checks if a cell is mined.
The isMined function is pretty simple. It just checks if the cell is mined or not. The function returns a 1 if it is mined, and a 0 if it is not mined. This feature allows us to sum up the function’s return values as we call it repeatedly in the loop.
That wraps up the algorithms for getting our minesweeper game board set up. Let’s move on to the actual game play.
Opening A Cell
JavaScript code that executes when a minesweeper cell is opened.
Alright let’s dive right into this bad boy. We execute this function whenever a player clicks on a cell. It does a lot of work, and it also uses something called recursion. If you are unfamiliar with the concept, see the definition below:
Recursion: See recursion.
Ah, computer science jokes. They always go over so well at bars and coffee shops. You really ought to try them out on that cutie you’ve been crushing on.
Anyways, a recursive function is just a function that calls itself. Sounds like a stack overflow waiting to happen, right? That’s why you need a base case that returns a value without making any subsequent recursive calls. Our function will eventually stop calling itself because there will be no more cells that need to be opened.
Recursion is rarely the right choice in a real world project, but it is a useful tool to have in your toolbox. We could have written this code without recursion, but I thought you all might want to see an example of it in action.
Handle Click Explained
The handleClick function takes a cell id as a parameter. We need to handle the case where the player pressed the ctrl button while clicking on the cell, but we will talk about that in a later section.
Assuming the game isn’t over and we are handling a basic left click event, there are a few checks we need to make. We want to ignore the click if the player already opened or flagged the cell. It would be frustrating for the player if an inaccurate click on an already flagged cell ended the game.
If neither of those are true then we will proceed. If a mine is present in the cell we need to initiate the game over logic and display the exploded mine in red. Otherwise, we will open the cell.
If the opened cell has mines surrounding it we will display the neighboring mine count to the player in the appropriate font color. If there are no mines surrounding the cell, then it is time for our recursion to kick in. After setting the background color of the cell to a slightly darker shade of gray, we call handleClick on each unopened neighboring cell without a flag.
Helper Functions
Let’s take a look at the helper functions we are using inside the handleClick function. We’ve already talked about getNeighbors, so we’ll skip that one. Let’s start with the loss function.
JavaScript code that gets called whenever the player has lost the game.
When a loss occurs, we set the variable that tracks this and then display a message letting the player know that the game is over. We also loop through each cell and display the mine locations. Then we stop the clock.
Second, we have the getNumberColor function. This function is responsible for giving us the color corresponding to the neighboring mine count.
JavaScript code that gets passed a number and returns a color.
I tried to match up the colors just like the classic Windows version of minesweeper does it. Maybe I should have used a switch statement here, but I already took the screen shot, and it’s not really a big deal. Let’s move on to what the code looks like for putting a flag on a cell.
Flagging A Cell
JavaScript code for putting a flag on a minesweeper cell.
Right clicking on a cell will place a flag on it. If the player right clicks on an empty cell and we have more mines that need to be flagged we will display the red flag on the cell, update its flagged property to true, and decrement the number of mines remaining. We do the opposite if the cell already had a flag. Finally, we update the GUI to display the number of mines remaining.
Opening Neighboring Cells
JavaScript code for handling ctrl + left click
We have covered the actions of opening cells and marking them with flags, so let’s talk about the last action a player can take: opening an already opened cell’s neighboring cells. The handleCtrlClick function contains the logic for this. This player can perform this action by holding ctrl and left clicking on an opened cell that contains neighboring mines.
The first thing we do after checking those conditions is build up a list of the neighboring flagged cells. If the number of flagged cells matches the actual number of surrounding mines then we can proceed. Otherwise, we do nothing and exit the function.
If we were able to proceed, the next thing we do is check if any of the flagged cells did not contain a mine. If this is true, we know that the player predicted the mine locations incorrectly, and clicking on all of the non-flagged, neighboring cells will end in a loss. We will need to set the local lost variable and call the loss function. We talked about the loss function earlier in the article.
If the player did not lose, then we will need to open up the non-flagged neighboring cells. We simply need to loop through them and call the handleClick function on each. However, we must first set the ctrlIsPressed variable to false to prevent falling into the handleCtrlClick function by mistake.
Starting A New Game
We are almost done analyzing all of the JavaScript necessary to build minesweeper! All that we have left to cover are the initialization steps necessary for starting a new game.
JavaScript code for initializing minesweeper
The first thing we do is initialize a few variables. We need some constants for storing the html codes for the flag and mine icons. We also need some constants for storing the board size, the number of mines, the timer value, and the number of mines remaining.
Additionally, we need a variable for storing if the player is pushing the ctrl button. We utilize jQuery to add the event handlers to the document, and these handlers are responsible for setting the ctrlIsPressed variable.
Finally, we call the newGame function and also bind this function to the new game button.
Helper Functions
JavaScript code for starting a new game of minesweeper.
Th newGame function is responsible for resetting our variables so that our game is in a ready-to-play state. This includes resetting the values that are displayed to the player, calling initializeCells, and creating a new random board. It also includes resetting the clock, which gets updated every second.
Let’s wrap things up by looking at initializeCells.
JavaScript code for attaching click handlers to cells and checking for the victory condition.
The main purpose of this function is to add additional properties to our html game cells. Each cell needs the appropriate id added so that we can access it easily from the game logic. Every cell also needs a background image applied for stylistic reasons.
We also need to attach a click handler to every cell so that we can detect left and right clicks.
The function that handles left clicks calls handleClick, passing in the appropriate id. Then it checks to see if every cell without a mine has been opened. If this is true then the player has won the game and we can congratulate him/her appropriately.
The function that handles right clicks calls handleRightClick, passing in the appropriate id. Then it simply returns false. This causes the context menu not to pop up, which is the default behavior of a right click on a web page. You wouldn’t want to do this sort of thing for a standard business CRUD application, but for minesweeper it is appropriate.
Conclusion
Congrats on learning how to build minesweeper with JavaScript! That was a lot of code, but hopefully it makes sense after breaking it up into modules like this. We could definitely make more improvements to this program’s reusability, extensibility, and readability. We also did not cover the HTML or CSS in detail. If you have questions or see ways to improve the code, I’d love to hear from you in the comments!
I hope you guys enjoyed learning about how to build minesweeper with JavaScript. Let me know what other simple games like this you would like to see, and don’t forget to drop me your email so you don’t miss the next one that comes out.
Update (7/13/2019): This post became more popular than I thought it would, which is awesome! I’ve received a lot of great feedback from readers about areas that could be improved. I work daily in a code base that until recently was stuck in Internet Explorer quirks mode. Many of my daily habits there transferred to my work on minesweeper, resulting in some code that doesn’t take advantage of the bleeding edge of JavaScript technology. At some point I would like to do another post where I refactor the code. I plan to remove jQuery entirely and use the ES6 syntax instead of the ES5 syntax where appropriate. But you don’t have to wait for me! See if you can make these changes yourself! And let me know how it goes in the comments.
Update (10/13/2020): I finally got around to making some improvements! Check out part 2 of this project. I removed jQuery entirely and added a feature to prevent immediate losses due to bad luck on the first click. I hope you enjoy it!
The smell of blood fills the air. At Camp Client, the battle rages on. The Empire of Users have been relentless in their assault against the Browser Alliance. While the Chrome and Firefox Battalions have been handling the swarm with commendable bravery, the Internet Explorer Battalion is suffering heavy casualties. Leadership is sorely lacking. As pressure from the Users mounts, the regiment desperately needs instruction and supplies from Server Headquarters so that a swift response can be made.
Unfortunately, the geography of the surrounding countryside impedes communication efforts. Server Headquarters is not far away, but it is situated on the other side of the deep, dark Internet Chasm. The only way across is a narrow, rickety collection of rope and wood called the HTTP Bridge. This bridge is unstable, goes through a wall of fire, and is really only useful for sending messages and a handful of supplies back and forth. But it is an extremely important and strategic link. Without it, communication would be lost as would any hope of victory.
A young squire is sent with a request in hand across the bridge to bring word of the camp’s needs to Server Headquarters. The journey is not for the faint of heart, but when you’re a grunt you have no choice but to be courageous. After making the perilous journey across the chasm he presents the request to Officer Web Server.
Officer Web Server has the noble task of accepting requests as they come across the bridge and delivering them to the right people. However, he is a little socially awkward, and most of the time he gets his charismatic best friend, Officer Application Server, to do the heavy lifting.
Officer Application Server rubs shoulders with all of the Java Generals, and knows which ones he should pass on the requests to. Sometimes this dynamic duo has trouble finding the correct general, but that is usually only because the request was lacking in information. The communication protocol has been well established, so you can hardly blame them for throwing out bad requests from careless soldiers. When these two are given a message that is not malformed they are a shining example of discipline and reliability. Luckily for the Browser Alliance, the message they receive from the young squire is crystal clear. They deliver the message to the correct Java General with great haste.
Now the Java Generals did not rise to their station in life by accident. They are smart, capable planners with deeply strategic minds. They are intelligent, but also wise. Few of these generals make any decisions without first consulting the Great Oracle™. Only then will they decide what to provide their men back at Camp Client. After ending their session with the wise old master they know what they must do. Unfortunately, details are not their strong suit and they tend to be a little verbose. If they were the ones who had to communicate the message and package up the supplies the war would surely be lost.
Fortunately, this is what Officer Template Engine was born to do. He knows what the Java General wants to say and communicates this information articulately. He drafts the final response and gathers the supplies that get delivered back to Officer Web Server and sent with another poor young squire across the HTTP Bridge.
Camp Client is overjoyed upon receiving the response. Much needed supplies of HTML, CSS, JavaScript, and memes have been brought to the front lines. The soldiers survey the bounty that lies before them. “Just wait until those Users see this”, one combat veteran remarks with satisfaction. The other soldiers nod in agreement. They will live to fight another day. Many soldiers have been lost in this great war, and many more will be cut down before it is over. Though their names may change, the legend of their bravery will never fade away. This same story will be played out again and again as long as good men stand against the forces of darkness.
