Simple Javascript Game Code

Simple Javascript Game Code

5 min read Jun 20, 2024
Simple Javascript Game Code

A Simple JavaScript Game: Guess the Number

This article will guide you through creating a simple "Guess the Number" game using JavaScript. This game involves the user guessing a randomly generated number within a given range.

Game Logic

  1. Generate a random number: The game will first generate a random number within a specified range (e.g., between 1 and 100).
  2. User input: The user will then input their guess.
  3. Compare: The game will compare the user's guess to the randomly generated number.
  4. Provide feedback: The game will provide feedback to the user, telling them if their guess is too high, too low, or correct.
  5. Repeat: Steps 2-4 will repeat until the user guesses the correct number.

Code Implementation

Here's the JavaScript code for our simple "Guess the Number" game:

function guessTheNumber() {
  // Generate a random number between 1 and 100
  const randomNumber = Math.floor(Math.random() * 100) + 1;
  let guessCount = 0;

  // Function to check the user's guess
  function checkGuess() {
    const userGuess = parseInt(document.getElementById("guessInput").value);
    guessCount++;

    if (userGuess === randomNumber) {
      alert(`Congratulations! You guessed the number in ${guessCount} tries.`);
      return; // Stop the game if the guess is correct
    } else if (userGuess < randomNumber) {
      alert("Too low! Try again.");
    } else {
      alert("Too high! Try again.");
    }
  }

  // Event listener for the "Guess" button
  document.getElementById("guessButton").addEventListener("click", checkGuess);
}

// Call the function to start the game
guessTheNumber(); 

Explanation

  1. guessTheNumber() Function:

    • This function is called when the game starts.
    • It generates the random number using Math.random() and Math.floor().
    • It initializes guessCount to 0.
  2. checkGuess() Function:

    • This function is called when the user clicks the "Guess" button.
    • It gets the user's guess from the input field (guessInput).
    • It increments the guessCount variable.
    • It compares the user's guess to the random number and provides feedback using alert().
  3. Event Listener:

    • An event listener is attached to the "Guess" button (guessButton). When the button is clicked, the checkGuess() function is executed.
  4. Game Initialization:

    • The guessTheNumber() function is called at the end of the script to start the game.

Integrating with HTML

You need to create a simple HTML file to host this game:




  
  Guess the Number


  

Guess the Number

Guess a number between 1 and 100:

This HTML file sets up the basic structure for your game, including a heading, a paragraph explaining the game, an input field for the user to enter their guess, and a button to submit their guess.

Note: Replace "script.js" with the actual filename of your JavaScript file.

Conclusion

This "Guess the Number" game provides a simple example of how to create interactive games using JavaScript. It demonstrates essential concepts like:

  • Generating Random Numbers: Using Math.random() and Math.floor().
  • User Input: Retrieving values from input fields.
  • Event Handling: Handling user actions like button clicks.
  • Conditional Logic: Using if and else statements for decision-making.

This is a foundation for you to explore more complex game mechanics and expand your JavaScript skills. You can add features like multiple rounds, different difficulty levels, visual elements, and more.