Build a Fun Number Guessing Game with HTML JavaScript Beginner Tutorial

by

Dive into this exciting tutorial where we create a simple yet engaging number guessing game using HTML and JavaScript! Perfect for beginners, this step-by-step guide will show you how to program a game where users guess a number between 1 and 10. Learn how to handle user input, generate random numbers, and provide feedback—all with just a few lines of code. Enhance your coding skills and add a fun project to your portfolio. Remember to like, share, and subscribe for more creative coding tutorials!

HTML, JavaScript, Number Guessing Game, Coding for Beginners, Web Development, Interactive Games, JavaScript Tutorial, Beginner Projects, Web Programming, Learn to Code, Frontend Development, Simple JavaScript Game, Coding Fun, Educational Programming, Game Development, HTML5, User Input Handling, Random Number Generation, Coding Challenge, Tech Education, DIY Projects, Coding Tutorials, Software Development

Number Guessing Game

Objective: Create a simple number guessing game where the user has to guess a number between 1 and 10.

Building a Simple Number Guessing Game with HTML and JavaScript

Introduction:

Creating a number guessing game is an excellent way to get started with programming. In this tutorial, we’ll learn how to make a basic game using HTML and JavaScript where the user has to guess a number between 1 and 10. This project covers fundamental concepts like handling user input, working with random numbers, and updating the DOM based on game logic.

HTML Structure:

Our HTML structure is straightforward. We have a paragraph prompting the user to guess a number, an input field for the guess, a button to submit the guess, and another paragraph to display results or hints.

<p>Guess a number between 1 and 10:</p>

<input type="number" id="userGuess">

<button id="guessButton">Guess</button>

<p id="result"></p>

JavaScript Logic:

The JavaScript for our game initializes game elements and manages the game logic. We start the game with a ‘Start Game’ button. When the game starts, the guess input and guess button are displayed. The game generates a random number between 1 and 10, and the user’s guesses are compared against this number. The game provides feedback on whether to guess higher or lower, and congratulates the user upon guessing correctly.

const btn = document.getElementById('guessButton');

const guess = document.getElementById('userGuess');

const output = document.getElementById('result');

const main = document.getElementById('main');

const para = main.querySelector('p');

const btn2 = document.createElement('button');

main.prepend(btn2);

btn2.textContent = 'Start Game';

let answer = 0;

btn2.addEventListener('click', startGame);

btn.style.display = 'none';

guess.style.display = 'none';

para.textContent = 'Hit the Start Button to Start';

function startGame() {

 btn.style.display = 'block';

 btn2.style.display = 'none';

 guess.style.display = 'block';

 para.textContent = 'Guess a Number 1-10';

 answer = Math.floor(Math.random() * 10) + 1;

 output.textContent = '';

}

function endGame() {

 btn.style.display = 'none';

 btn2.style.display = 'block';

 guess.style.display = 'none';

 para.textContent = 'Hit the Start Button to Start';

}

btn.addEventListener('click', () => {

 const userGuess = parseInt(guess.value);

 guess.value = '';

 if (userGuess === answer) {

 output.textContent = 'Congrats you are correct. Play Again';

 endGame();

 } else {

 const result = userGuess < answer ? 'Higher' : 'Lower';

 output.textContent = `Guess Again! ${result}`;

 }

});

Conclusion:

Congratulations! You’ve just built your own number guessing game. This project is not only a fun way to practice coding but also a great way to understand how to interact with the DOM and handle user input in JavaScript. Feel free to enhance the game by adding more sophisticated features like a guess counter, time limits, or varying difficulty levels.

Further Enhancements:

  • Implement a score or attempts counter.
  • Add difficulty levels that change the range of numbers.
  • Style the game with CSS for a better user experience.

Experiment with the code and make the game your own. Happy coding!