One of the hardest things to learn in programming is not the syntax you need to learn, but how to apply it to solve real world problems. You need to start thinking like a programmer — this generally involves looking at descriptions of what your program needs to do, working out what code features are needed to achieve those things, and how to make them work together.
This requires a mixture of hard work, experience with the programming syntax, and practice — plus a bit of creativity. The more you code, the better you’ll get at it. We can’t promise that you’ll develop “programmer brain” in five minutes, but we will give you plenty of opportunity to practice thinking like a programmer throughout the course.
With that in mind, let’s look at the example we’ll be building up in this article, and review the general process of dissecting it into tangible tasks.
In this article we’ll show you how to build up the simple game you can see here : Click
Have a go at playing it — familiarize yourself with the game before you move on.
Let’s imagine your boss has given you the following brief for creating this game:
I want you to create a simple guess the number type game. It should choose a random number between 1 and 100, then challenge the player to guess the number in 10 turns. After each turn the player should be told if they are right or wrong, and if they are wrong, whether the guess was too low or too high. It should also tell the player what numbers they previously guessed. The game will end once the player guesses correctly, or once they run out of turns. When the game ends, the player should be given an option to start playing again.
Upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible:
Let’s now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.
To begin this tutorial, we’d like you to make a local copy of the number-guessing-game-start.html file (see it live here). Open it in both your text editor and your web browser. At the moment you’ll see a simple heading, paragraph of instructions and form for entering a guess, but the form won’t currently do anything.
The place where we’ll be adding all our code is inside the <script> element at the bottom of the HTML:
<script> // Your JavaScript goes here </script>
Let’s get started. First of all, add the following lines inside your <script> element:
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
This section of the code sets up the variables and constants we need to store the data our program will use. Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword let (or var) followed by a name for your variable. Constants are used to store values that are immutable or can’t be changed and are created with the keyword const. In this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the HTML elements referenced stay the same.
You can assign a value to your variable or constant with an equals sign (=) followed by the value you want to give it.
In our example:
randomNumber — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.<div> element, which is itself used to select all three later on for resetting, when we restart the game):
<div class="resultParas"> <p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p> </div>
<label for="guessField">Enter a guess: </label> <input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit">
Next, add the following below your previous JavaScript:
function checkGuess() {
alert('I am a placeholder');
}
Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we’ll concentrate on one simple type. Here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. After that we put two curly braces ({ }). Inside the curly braces goes all the code that we want to run whenever we call the function.
When we want to run the code, we type the name of the function followed by the parentheses.
Let’s try that now. Save your code and refresh the page in your browser. Then go into the developer tools JavaScript console, and enter the following line:
checkGuess();After pressing Return/Enter, you should see an alert come up that says “I am a placeholder“; we have defined a function in our code that creates an alert whenever we call it.
JavaScript operators allow us to perform tests, do math, join strings together, and other such things.
If you haven’t already done so, save your code, refresh the page in your browser, and open the developer tools JavaScript console. Then we can try typing in the examples shown below — type in each one from the “Example” columns exactly as shown, pressing Return/Enter after each one, and see what results they return.
First let’s look at arithmetic operators, for example:
| Operator | Name | Example |
|---|---|---|
+ |
Addition | 6 + 9 |
- |
Subtraction | 20 - 15 |
* |
Multiplication | 3 * 7 |
/ |
Division | 10 / 5 |
You can also use the + operator to join text strings together (in programming, this is called concatenation). Try entering the following lines, one at a time:
let name = 'Bingo'; name; let hello = ' says hello!'; hello; let greeting = name + hello; greeting;
There are also some shortcut operators available, called augmented assignment operators. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:
name += ' says hello!';This is equivalent to
name = name + ' says hello!';When we are running true/false tests (for example inside conditionals — see below) we use comparison operators. For example:
| Operator | Name | Example |
|---|---|---|
=== |
Strict equality (is it exactly the same?) |
|
!== |
Non-equality (is it not the same?) |
|
< |
Less than |
|
> |
Greater than |
|
Returning to our checkGuess() function, I think it’s safe to say that we don’t want it to just spit out a placeholder message. We want it to check whether a player’s guess is correct or not, and respond appropriately.
At this point, replace your current checkGuess() function with this version instead:
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = 'Previous guesses: ';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = 'Congratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
} else {
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = 'Last guess was too low!';
} else if(userGuess > randomNumber) {
lowOrHi.textContent = 'Last guess was too high!';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
This is a lot of code — phew! Let’s go through each section and explain what it does.
userGuess and sets its value to the current value entered inside the text field. We also run this value through the built-in Number() constructor, just to make sure the value is definitely a number.if, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns true, we run the code inside the curly braces. If not, we don’t, and move on to the next bit of code. In this case the test is testing whether the guessCount variable is equal to 1 (i.e. whether this is the player’s first go or not):
guessCount === 1
If it is, we make the guesses paragraph’s text content equal to “Previous guesses: “. If not, we don’t.
userGuess value onto the end of the guesses paragraph, plus a blank space so there will be a space between each guess shown.if(){ } checks whether the user’s guess is equal to the randomNumber set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called setGameOver(), which we’ll discuss later.else if(){ } structure. This one checks whether this turn is the user’s last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.else { }) contains code that is only run if neither of the other two tests returns true (i.e. the player didn’t guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.guessCount variable so the player uses up their turn (++ is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.At this point we have a nicely implemented checkGuess() function, but it won’t do anything because we haven’t called it yet. Ideally we want to call it when the “Submit guess” button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.
Add the following line below your checkGuess() function:
guessSubmit.addEventListener('click', checkGuess);
Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function). Note that we don’t need to specify the parentheses when writing it inside addEventListener().
Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we’ve not yet defined the setGameOver() function that is supposed to be run once the game is over. Let’s add our missing code now and complete the example functionality.
Let’s add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.append(resetButton);
resetButton.addEventListener('click', resetGame);
}
true. This is necessary, because if we didn’t, the user could submit more guesses after the game is over, which would mess things up.<button> element, set its text label to “Start new game”, and add it to the bottom of our existing HTML.resetGame() is run.Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:
guessCount back down to 1.<div class="resultParas"></div>, then loop through each one, setting their textContent to '' (an empty string).lastResult paragraph.At this point you should have a fully working (simple) game — congratulations!
All we have left to do now in this article is talk about a few other important code features that you’ve already seen, although you may have not realized it.
One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.
To start with, go to your browser developer tools JavaScript console again, and enter the following:
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):
i with any name you like too, but i is used as a convention because it’s short and easy to remember.i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.i++, which means “add 1 to i”. The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using console.log().Now let’s look at the loop in our number guessing game — the following can be found inside the resetGame() function:
const resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = '';
}
This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the querySelectorAll() method, then it loops through each one, removing the text content of each.
Let’s add one more final improvement before we get to this discussion. Add the following line just below the let resetButton; line near the top of your JavaScript, then save your file:
guessField.focus();
This line uses the focus() method to automatically put the text cursor into the <input> text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It’s only a small addition, but it improves usability — giving the user a good visual clue as to what they’ve got to do to play the game.
Let’s analyze what’s going on here in a bit more detail. In JavaScript, most of the items you will manipulate in your code are objects. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won’t be covering it here. For now, we’ll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.
In this particular case, we first created a guessField constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:
const guessField = document.querySelector('.guessField');
To get this reference, we used the querySelector() method of the document object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.
Because guessField now contains a reference to an <input> element, it now has access to a number of properties (basically variables stored inside objects, some of which can’t have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:
guessField.focus();
Variables that don’t contain references to form elements won’t have focus() available to them. For example, the guesses constant contains a reference to a <p> element, and the guessCount variable contains a number.
Let’s play with some browser objects a bit.
guessField into the console and the console shows you that the variable contains an <input> element. You’ll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!guessField.value = 'Hello';
The value property represents the current value entered into the text field. You’ll see that by entering this command, we’ve changed the text in the text field!
guesses into the console and pressing return. The console shows you that the variable contains a <p> element.guesses.value
The browser returns undefined, because paragraphs don’t have the value property.
textContent property instead. Try this:
guesses.textContent = 'Where is my paragraph?';
guesses.style.backgroundColor = 'yellow'; guesses.style.fontSize = '200%'; guesses.style.padding = '10px'; guesses.style.boxShadow = '3px 3px 6px black';
Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
So that’s it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can’t get the example to work, check it against the source code.