Building a Simple “Guess the Number” Game using JavaScript.

3 min readAug 22, 2023

Are you new to programming or looking for a fun way to practice your coding skills? Creating a simple JavaScript game is a fantastic way to learn while having an enjoyable experience. In this blog post, we’ll guide you through the process of building a basic “Guess the Number” game using HTML and JavaScript.

Step 1: Setting Up the HTML Structure

To start, create an HTML file named index.html. Inside this file, structure your game's user interface:

<!DOCTYPE html>
<html>
<head>
    <title>Guess the Number Game</title> <!-- Title of the web page -->
</head>
<body>
    <h1>Guess the Number Game</h1> <!-- Main heading of the game -->
    <p>Submit your daring guess, a number between 1 and 100:</p> <!-- Prompt for the player -->
    <input type="number" id="guessInput"> <!-- Input field for the player's guess -->
    <button onclick="checkGuess()">Cast Your Guess</button> <!-- Button to submit the guess -->
    <p id="result"></p> <!-- Element to display the game result or feedback -->
    <script src="script.js"></script> <!-- Link to the JavaScript logic file -->
</body>
</html>

Step 2: Implementing the JavaScript Logic

In a separate JavaScript file named script.js, add the game's logic:

// Generate a random number between 1 and 100
const targetNumber = Math.floor(Math.random() * 100) + 1; // Generates a random number and assigns it to targetNumber
let numberOfGuesses = 0; // Initializes the guess counter

function checkGuess() {
    const guess = parseInt(document.getElementById("guessInput").value); // Retrieves the player's guess from the input field
    numberOfGuesses++; // Increments the guess counter

    if (guess === targetNumber) { // If the guess matches the target number
        displayResult(`Congratulations! You guessed the number ${targetNumber} in ${numberOfGuesses} guesses.`);
    } else if (guess < targetNumber) { // If the guess is lower than the target number
        displayResult("Try a higher number.");
    } else { // If the guess is higher than the target number
        displayResult("Try a lower number.");
    }
}

function displayResult(message) {
    const resultElement = document.getElementById("result"); // Retrieves the element to display the result
    resultElement.textContent = message; // Updates the content of the result element with the provided message
}

Step 3: Connecting HTML and JavaScript

By including the JavaScript file in your HTML, you establish the connection between the user interface and the game logic:

<!-- Within the <head> section of index.html -->
<script src="script.js"></script>

Step 4: Playing the Game

Open your index.html file in a web browser, and you'll find the game interface. Enter your guesses and click the "Submit Guess" button. The game will provide feedback on whether your guess was too high, too low, or correct.

In order to move on, enter a number in the input area before clicking the submit button. You can enter numbers until you correctly predict the value. I know this is not an excellent interface, but you can change it using “CSS.”

Taking It Further

This basic “Guess the Number” game is just the beginning. You can enhance it by adding features like a restart button, a scorecard of previous guesses, or even visual animations. As you become more comfortable with JavaScript, you’ll be able to create more complex and engaging games.

Remember, practice is key to mastering programming. Building small projects like this game is a fantastic way to solidify your understanding and have fun along the way. Enjoy coding and happy gaming!