In this tutorial, we will create a simple number guessing game in JavaScript. The game will give users a fun and interactive way to guess a randomly generated number within a specified range of 1 to 20. We’ll guide you through creating the game interface and implementing the game logic.
It’s a very helpful project for improving my skills in HTML, CSS, and JavaScript. So, I’m going with you on how you can use HTML, and CSS to design the complete application. Once we design that then you will use JS to make it dynamically.
Prerequisites:
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. You’ll also need a code editor and a web browser to test your game.
Number Guessing Game in JavaScript
I’ve made the complete tutorial on this topic, and I’ve explained everything from scratch. So, You can learn step-by-step how to use HTML, CSS, and JavaScript to make a Number Guessing Game. Please watch and follow it, I hope you like that.
I hope you’ve learned something new from this tutorial, If you face any problem during the video, I’m going to share with you the source code of the project. You can check it now below.
You May Also Like:
- Multi Step Progress Bar in HTML CSS & JavaScript
- Currency Converter App Using HTML CSS and Javascript
- Creating a Category Filter Using HTML CSS and JavaScript
- How to Make Roll Dice Game in JavaScript
- Note App Using HTML CSS and JavaScript
- Movie App Using HTML CSS and JavaScript
Random Number Guessing Game in JavaScript
I’ve used very basic tactics to design and develop that game, you can add another functionality you can do that. I just share with you how to use three technologies such as HTML, CSS, and JS to make a game.
Step 1: Set Up Your HTML Structure
- Create an HTML file and name it
index.html. - Inside the
<body>tag, create the necessary elements for your game, such as a heading, an input field for guessing, a submit button, a message area to display feedback, and a button to start a new game.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<script defer src="js/script.js"></script>
<title>Guess My Number Game......</title>
</head>
<body>
<div class="container">
<div class="container_wrapper">
<button type="button" class="btn btn_again">Play Again</button>
<p>Between 1 and 20</p>
</div>
<h2>Guess My Number Game</h2>
<p class="hide_num">?</p>
<p class="message">Start Guesing..............</p>
<div class="number_data">
<form>
<input
type="number"
placeholder="Enter Your Lucky Number!"
class="input_number"
/>
<button type="button" class="btn btn_check">Check Now!</button>
</form>
<div class="content">
<p>Score: <span class="score">20</span></p>
<p>high Score: <span class="high_score">20</span></p>
</div>
</div>
</div>
</body>
</html>
First of All, you need to make a project and create an index.html file, once you made the file you need to use above mentioned HTML-based codes.
Once you do that, you need to use CSS to design the application, you need to create another file CSS file inside that you need use below mentioned codes that help you to design the application.
Step 2: Style Your Game with CSS
- Create a CSS file and name it
styles.css. - Style the elements you created in Step 1 to make your game visually appealing. You can use CSS to adjust fonts, colors, and layout.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #0f2734;
font-family: "Poppins", sans-serif;
}
.container {
max-width: 850px;
width: 100%;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
padding: 2rem;
color: 000;
border-radius: 5px;
background-color: #ddd;
transition: all 0.6s ease-in;
}
.container_wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .btn {
border: none;
padding: 0.5rem 1.5rem;
cursor: pointer;
outline: none;
font-size: 0.9rem;
background-color: #cb3050;
border-radius: 4px;
color: #fff;
font-family: inherit;
}
.container .btn:focus {
transform: scale(0.98);
outline: none;
}
.container h2 {
text-align: center;
font-size: 3rem;
margin: 1rem 0;
}
.hide_num {
text-align: center;
font-size: 3rem;
background-color: #cb3050;
border-radius: 4px;
width: 25%;
margin: 0 auto;
color: #fff;
}
.message {
text-align: center;
font-size: 1.3rem;
margin: 1rem 0;
}
.number_data {
display: flex;
justify-content: space-between;
align-items: center;
margin: 3rem 0;
}
.number_data input {
outline: none;
border: none;
border-radius: 3px;
padding: 0.5rem 0.8rem;
font-size: 1.2rem;
border: 1px solid #ddd;
}
.number_data button {
margin-top: 0.5rem;
display: block;
}
.content {
font-size: 1.2rem;
}
So, you’ve successfully designed the game using HTML & CSS, but you need to JS perform the operations such as button clicks, display scores, match and random numbers so on. So, let’s look at the JS codes below.
Step 3: Implement the Game Logic with JavaScript
- Create a JavaScript file and name it
script.js. - Write JavaScript code to perform the following tasks:
- Generate a random number within a specified range (e.g., 1 to 100).
- Handle user input when they submit a guess.
- Provide feedback to the user based on their guess (e.g., “Too high,” “Too low,” or “Congratulations! You guessed it!”).
- Keep track of the number of attempts.
- Allow the user to start a new game.
"use strict";
const containerEl = document.querySelector(".container");
const btnPlayEl = document.querySelector(".btn_again");
const btnChckEl = document.querySelector(".btn_check");
const hideNumEl = document.querySelector(".hide_num");
const msgEl = document.querySelector(".message");
const inputNumEl = document.querySelector(".input_number");
const highScoreEl = document.querySelector(".high_score");
const scoreEl = document.querySelector(".score");
// generate random number from 1 to 20;
let secretNum = Math.trunc(Math.random() * 20 + 1);
let score = 20;
let highScore = 0;
console.log(secretNum);
// event to check the hide num
btnChckEl.addEventListener("click", () => {
const guess = Number(inputNumEl.value);
// check empty input
if (guess) {
// not match hide number
if (guess != secretNum) {
if (score > 1) {
score--;
scoreEl.textContent = score;
msgEl.textContent = guess > secretNum ? " Too High " : "Too Low";
scoreEl.textContent = score;
} else {
displayMessage("You've Lossed the Game");
containerEl.style.backgroundColor = "#fff";
scoreEl.textContent = 0;
}
} else {
// Success
hideNumEl.textContent = secretNum;
hideNumEl.style.width = "50%";
hideNumEl.style.transition = "all 0.5s ease-in";
containerEl.style.backgroundColor = "#e0d8d3";
highScoreEl.textContent = score;
displayMessage("Congtratulation You've Won the Game :)");
}
} else {
displayMessage("Please Enter the Number :(");
}
});
// display message
const displayMessage = function (message) {
msgEl.textContent = message;
};
// reset the game
btnPlayEl.addEventListener("click", () => {
score = 20;
secretNum = Math.floor(Math.random() * 20) + 1;
scoreEl.textContent = score;
hideNumEl.textContent = "?";
hideNumEl.style.width = "25%";
hideNumEl.style.transition = "all 0.5s ease-in";
inputNumEl.value = "";
containerEl.style.backgroundColor = "#ddd";
displayMessage("Start Guesing..............");
});
Conclusion: Congratulations! You’ve successfully created a number guessing game using HTML, CSS, and JavaScript. This project is a great way to practice your web development skills and create a fun and interactive experience for users. Feel free to customize and expand upon this game to make it even more engaging and challenging.
