Guess the number - A game where you need to guess a number between 1 and X.
Source Code - Demo
Guessed in 3 trys

Table of content

  • Create the Layout
  • Game Logic
  • Final Touches
  • Conclusion

Create the Layout

Let´s start by creating following files:
-index.html
-style.css
-game.js
Let´s start with index.html and create our layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- index.html -->
<html>
<head>
<title>Guess my number...</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="game">
<h1 id="output">Press start to begin!</h1>
<input id="input" type="txt" placeholder="Enter a number!" />
<br />
<input id="start" type="button" class="btn" value="START" />
<div>
</div>
<script src="game.js"></script>
</body>
</html>

It should look something like this:

Not so visually appealing let’s add the styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@import url(https://fonts.googleapis.com/css?family=Lato);
html, body, div,h1,form {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'Lato';
}
h1 {
font-size: 3em;
text-align: center;
color: #FFF;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #3D405B;
text-align: center;
}
#input {
align-self: center;
width: 400px;
}
.btn {
background: #fff;
color: #333;
font-size: 26px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border-style: none;
}
.hidden {
visibility: hidden;
}
#input {
padding: 10px;
border: none;
color: #3D405B;
font-size: 1.5em;
text-align: center;
margin-top: 50px;
}


Much better!

Game Logic

Ok, now with the exciting part. Let´s edit game.js. Here we will define a function Init() where we initialize the game. Here we want to generate a random number between 1 and 10. Also, print out a message to the player.

1
2
3
4
5
6
7
8
9
10
11
//game.js
var number = 0;
var limit = 10;

function Init() {
//generate a random number to guess
number = Math.floor((Math.random() * limit) + 1);

document.getElementById('output').innerHTML = 'I am thinking of a number between 1 and ' + limit + '...';

}

Now we want to run Init() when we press the button. We can use the OnClick property to do that.

1
<input id="start" type="button"  class="btn" value="START" OnClick="Init()">

Finally, we want to check the input and compare it with our number. We will define a function named Game for this purpose.

1
2
3
4
5
function Game(guess) {
if (guess == number) {
document.getElementById('output').innerHTML = 'You guessed it! Hit Start to play again.';
}
}

If the player guesses are wrong. We should give the player some hints. For now, we will tell the player if the number is lower or higher

1
2
3
4
5
6
7
8
9
10
function Game(guess) {
if (guess == number) {

document.getElementById('output').innerHTML = 'You guessed it! Hit Start to play again.';
} else {
//Print hint
var high_or_low = (number > guess) ? 'higher!' : 'lower!';
document.getElementById('output').innerHTML = guess + ' is not the number. It is ' + high_or_low;
}
}

Great! Now we need to detect our input submission. For this, we will create an eventHandler which will detect the Enter key, which will then pass the value to Game().

1
2
3
4
5
6
function eventHandler() {
if (this.event.which === 13) {
Game(document.getElementById('input').value);
document.getElementById('input').value = "";
}
}

Almost there. Let´s append our handle to our input.

1
<input id="input" type="txt" placeholder="Enter a number!" onkeypress="eventHandler()" />

Awesome! You did it! However, there´s a small visual detail, we could add.

Final Touches

We would like to hide the input when the game has not started. Also, we would also like to hide the start button while were game.
One way to do this is to use the visibility property in CSS. For this, I have already created a class named hidden in style.css.

1
2
3
.hidden {
visibility: hidden;
}

We will set our input hidden by default and then make it visible when the player starts the game.

1
<input id="input" class="hidden" type="txt" placeholder="Enter a number!" onkeypress="eventHandler()" />

Now when we press the start, we will assign the hidden class to our button and remove the hidden CSS class from our input.

1
2
3
4
5
6
7
8
9
10
11
function Init() {
//generate a random number to guess
number = Math.floor((Math.random() * limit) + 1);

document.getElementById('output').innerHTML = 'I am thinking of a number between 1 and ' + limit + '...';

//Remove the start button and make the input visible
document.getElementById('start').classList.add("hidden");
document.getElementById('input').classList.remove("hidden");

}

Also, we want to the opposite when the game ends.We will do that at the function Game().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Game(guess) {
if (guess == number) {

document.getElementById('output').innerHTML = 'You guessed it! Hit Start to play again.';
//Show button again and make input hidden
document.getElementById('start').classList.remove("hidden");
document.getElementById('input').classList.add("hidden");

} else {
//Print hint to the number
var high_or_low = (number > guess) ? 'higher!' : 'lower!';
document.getElementById('output').innerHTML = guess + ' is not the number. It is ' + high_or_low;
}
}

Conclusion

Don´t stop here. Play with the code! Try to add more features, for example, add different difficulty modes. Show me your work via Email or use #codingtutorial on Instagram!

Tell me in the comments what would you like to see next. Also, don´t forget to follow me on Instagram, to see exclusive content.