You might have played various games, but were you aware that you can develop games using HTML, CSS, and JavaScript that can be played by both you and the computer or a bot?
Today in this blog post, I will teach you how to create a Game using HTML CSS, and JavaScript. Furthermore, I strongly believe that developing games is an excellent way to enhance your coding skills, as it requires using logic and problem-solving skills.
As you can see outlook at the image of the game that you will learn to create today. In this game, the computer or bot will randomly select a number that you will not know, and you have to guess the number based on the hints provided, with 10 chances to make the correct guess.
Video Tutorial of Number Guessing Game in JS
As you saw in this video tutorial of the number-guessing game. How I built a simple game in HTML CSS and JavaScript. As well as how we can play this game by guessing the exact number with hints.
I would highly recommend you watch the video tutorial of this game. I have tried to make you understand every line of code with comments. If you want to skip you may continue reading the blog.
Steps for Number Guessing Game in JavaScript
To create this Number Guessing Game, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create anÂ
index.html file. The file name must be index and its extension .html - Create aÂ
style.css file. The file name must be style and its extension .css - Create aÂ
script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game in HTML CSS & JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>Guess a number from 1 to 100</header>
<p class="guess"></p>
<div class="input-field">
<input type="number" />
<button>Check</button>
</div>
<p>You have <span class="chances">10</span> chances</p>
</div>
<script src="script.js"></script>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4a98f7;
}
.wrapper {
padding: 30px 40px;
border-radius: 12px;
background: #fff;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper header {
font-size: 18px;
font-weight: 400;
color: #333;
}
.wrapper p {
color: #333;
margin-top: 10px;
}
.wrapper .input-field {
display: flex;
justify-content: center;
gap: 20px;
margin: 25px 0;
}
.input-field input,
.input-field button {
height: 50px;
width: calc(100% / 2 - 20px);
outline: none;
padding: 0 20px;
border-radius: 8px;
font-size: 18px;
}
.input-field input {
text-align: center;
color: #707070;
width: 110px;
border: 1px solid #aaa;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
display: none;
}
.input-field input:disabled {
cursor: not-allowed;
}
.input-field button {
border: none;
background: #4a98f7;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
.input-field button:active {
transform: scale(0.97);
}
Third, paste the following codes into your script.js file.
// Initialize DOM elements
const input = document.querySelector("input"),
guess = document.querySelector(".guess"),
checkButton = document.querySelector("button"),
remainChances = document.querySelector(".chances");
// Set initial focus on the input field
input.focus();
// Function to reset the game
const resetGame = () => {
randomNum = Math.floor(Math.random() * 100); // Generate a new random number
chance = 10; // Reset chances
input.disabled = false; // Enable input field
remainChances.textContent = chance; // Update chances display
guess.textContent = ""; // Clear guess display
guess.style.color = "#333"; // Reset guess text color
input.value = ""; // Clear input field
checkButton.textContent = "Check"; // Reset button text
};
// Generate a random number between 0 and 99
let randomNum = Math.floor(Math.random() * 100);
let chance = 10;
// Add click event listener to the check button
checkButton.addEventListener("click", () => {
if (input.disabled) {
// If the input is disabled, reset the game
resetGame();
return;
}
chance--; // Decrease chance by 1 on each click
let inputValue = input.value; // Get the value from the input field
if (inputValue == randomNum) { // Correct guess
[guess.textContent, input.disabled] = ["Contgrats! You found the number.", true];
[checkButton.textContent, guess.style.color] = ["Replay", "#27ae60"];
} else if (inputValue > randomNum && inputValue < 100) { // Guess is too high
[guess.textContent, remainChances.textContent] = ["Your guess is high", chance];
guess.style.color = "#333";
} else if (inputValue < randomNum && inputValue > 0) { // Guess is too low
[guess.textContent, remainChances.textContent] = ["Your guess is low", chance];
guess.style.color = "#333";
} else { // Invalid input (not in the range 1-99)
[guess.textContent, remainChances.textContent] = ["Your number is invalid", chance];
guess.style.color = "#e74c3c";
}
if (chance == 0) { // No chances left, game over
[checkButton.textContent, input.disabled, inputValue] = ["Replay", true, ""];
[guess.textContent, guess.style.color] = ["You lost the game", "#e74c3c"];
}
});
If you face any difficulties while creating your Number Guessing Game or your code is not working as expected, you can download the source code files for this Number Guessing Game for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
javascript logic is not working, when i am clicking replay, its not woring
The code has been updated. Please try again!