Greetings, students! I would like to introduce the second project in my JavaScript Project Series. But before we proceed, please take a look at our first project called "Color flipper."
This time, we will be creating a Number Guess Game using HTML, CSS, and JavaScript. If you're not familiar with this game, it's a straightforward guessing game where the player needs to guess a number. The JavaScript code will generate a random number, and if the user's input matches the generated number, the player wins. Let's get started!
Preview
Building the Number Guess Game
The process of constructing the Number Guess Game requires us to initiate our code editor and generate three files named index.html, style.css, and script.js.
Adding Html
To include HTML, we should enter the subsequent code in our index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" >
<title>Guess The Number</title>
<link rel="stylesheet" href ="style.css" >
</head>
<body>
<!-- Main Container -->
<div id = "maincontainer">
<h1>Guess The Number</h1>
<p>Please, select a game mode</p>
<form>
<input type=button class = "mainbutton" value="Easy (0-10)" onclick="select_mode(1)">
<br/>
<input type=button class = "mainbutton" value="Classic (0-100)" onclick="select_mode(2)">
<br/>
<input type=button class = "mainbutton" value="Hard (0-1000)" onclick="select_mode(3)">
<br/>
<br/>
<input type=button class = "mainbutton" value="How to play?" onclick="select_mode(0)">
</form>
</div>
<!-- Game Container -->
<div id = "game">
<div id = "game_top_bar">
<form>
<input type=button id = "exitbutton" value="x" onclick="playagain()">
</form>
</div>
<p id = "caption">A random number was generated. Try to guess it!</p>
<form>
<input type = "number" id = "entry" placeholder = "You can type here..." onkeypress="if (event.keyCode == 13) {return false;}" onfocus="this.value=''">
<input type=button class = "mainbutton" value="Guess" onclick="guess()">
</form>
</div>
<!-- Aftergame container -->
<div id = "aftergame">
<p id = "aftergametext"> You guessed it right! Do you want to play again?</p>
<form>
<input type=button class = "mainbutton" value="Play again!" onclick="playagain()">
</form>
</div>
<!-- How to play container-->
<div id="howtoplay">
<div id = "game_top_bar">
<form>
<input type=button id = "exitbutton" value="x" onclick="playagain()">
</form>
<h2><b>How to play?</b></h2>
<p>First, select a game mode. Currently there are 3 of them.
The difference is only in the number range (for Easy is 0-10, for Classic is 0-100 and for Hard is 0-1000). The fourth, unique mode will be added soon. After selecting a game mode you will see a text entry and a button.
Try to guess a number: simply type your guessing in the text field and press the button.
If you guess it right, you win. Otherwise you'll see a text which says that the number is either smaller or bigger.<p/><h2><b>What to do if I found a bug?</b></h2>
The difference is only in the number range (for Easy is 0-10, for Classic is 0-100 and for Hard is 0-1000). The fourth, unique mode will be added soon. After selecting a game mode you will see a text entry and a button.
Try to guess a number: simply type your guessing in the text field and press the button.
If you guess it right, you win. Otherwise you'll see a text which says that the number is either smaller or bigger.<p/><h2><b>What to do if I found a bug?</b></h2>
<p>Report it using the comments section.</p>
<div id = "profile">
<form>
<input type=button class = "mainbutton" value="Play!" onclick="playagain()">
</form>
</div>
</div>
<scriptsrc ="main.js"></script>
</body>
</html>
Adding CSS
In our style.css, write the following code to give style to our elements.
body {
background-color: #181518;
}
h1, h2 {
font-family: "Arial";
color: #fff;
text-align: center;
}
p {
color: #fff;
text-align: center;
}
.mainbutton
{
width: 100%;
background-color: #4C59FF;
border-style: none;
color: white;
padding: 10px 20px;
border-radius: 10px;
margin-top: 10px;
text-align: center;
}
#maincontainer {
margin: 0 auto;
width: 90%;
padding: 10px;
background-color: #6b8dff;
border-radius: 10px;
}
#game {
margin: 0 auto;
width: 90%;
padding: 10px;
background-color: #6b8dff;
border-radius: 10px;
display: none;
text-align: center;
}
#game_top_bar {
text-align: right;
}
#exitbutton{
text-align: center;
width: 30px;
background-color: #4C59FF;
border-style: none;
color: white;
padding: 10px 10px;
border-radius: 10px;
}
#entry {
display: inline-block;
width: 50%;
background-color: #4C59FF;
border-style: 1px;
color: white;
padding: 10px 20px;
border-radius: 10px;
margin-top: 10px;
text-align: center;
border: none;
}
#aftergame {
margin: 0 auto;
width: 90%;
padding: 10px;
background-color: #6b8dff;
border-radius: 10px;
display: none;
text-align: center;
}
#howtoplay {
margin:
0 auto;
width: 90%;
padding: 10px;
background-color: #6b8dff;
border-radius: 10px;
display: none;
text-align: center;
}
img {
text-align: center;
border-radius: 50px;
}
a {
text-decoration: none;
font-size: 25px;
color: white;
}
#profile {
text-align: center;
}
Adding JavaScript
Now , Its time to add the logic to our project, so, let's get ready to dive in the ocean of javaScript. Write the below given JS code in the main.js file which was created in the starting of the project.
var random_number = 0
var attempts_amount = 0
function close_everything(){
document.getElementById("game").style.display="none";
document.getElementById("maincontainer").style.display="none";
document.getElementById("aftergame").style.display="none";
document.getElementById("howtoplay").style.display="none"
}
function select_mode(button){
attempts_amount = 0
if (button == 0){
close_everything()
document.getElementById("howtoplay").style.display="block"
}
else if (button == 1){
//console.log("Selected Mode: easy")
random_number = Math.round(Math.random()*10)
document.getElementById("caption").innerHTML = "A random number (0-10) was generated. Try to guess it!"
}
if (button == 2){
//console.log("Selected Mode: classic")
random_number = Math.round(Math.random()*100)
document.getElementById("caption").innerHTML = "A random number (0-100) was generated. Try to guess it!"
}
if (button == 3){
//console.log("Selected Mode: hard")
random_number = Math.round(Math.random()*1000)
document.getElementById("caption").innerHTML = "A random number (0-1000) was generated. Try to guess it!"
}
if (button != 0){
close_everything()
document.getElementById("game").style.display="block"
document.getElementById('entry').value = ''
}}
function guess(){
attempts_amount = attempts_amount + 1
input = document.getElementById('entry').value
if (input > random_number){
document.getElementById("caption").innerHTML = "Try a smaller number!"
}else
if (input < random_number){
document.getElementById("caption").innerHTML = "Try a bigger number!"
}
else if (input == random_number){
temp = "<b>You guessed it right!</b> <br/>The number was \"" + random_number + "\".<br/> Attempts: " + attempts_amount + ".<br/>Do you want to play again?"
document.getElementById("aftergametext").innerHTML = temp
close_everything()
document.getElementById("aftergame").style.display="block"
}
}
function playagain(){
close_everything()
document.getElementById("maincontainer").style.display="block"
}
Output:
Conclusion
Finally, We made a number guess game using javascipt, Through this JavaScript project, we have acquired knowledge on utilizing Math.random() and Math.floor() functions for producing random number between some range, in addition to implementing JavaScript DOM Manipulation.
0 Comments