23 - Number Guessing Game

Description

Create a React component where users try to guess a randomly generated number within a set range.

• Generate a random number between a user-defined minimum and maximum.

• Provide an input field for user guesses.

• Offer feedback based on the guess (higher, lower, correct).

• Track the number of attempts and display it for further engagement.

• Optionally, offer a reset button for a new game.

Algorithm

1. Create a React component with state to manage the random number, user guess, feedback, and number of attempts.

2. Generate a random number within the user-defined range during component mount.

3. Implement a function to handle user input and update the guess state.

4. Develop logic to compare the guess with the random number and provide appropriate feedback ("Higher", "Lower", or "Correct").

5. Keep track of the number of attempts and update the state after each guess.

6. Render the game interface with input field, feedback message, attempt count, and a potential reset button.

Code

import React, { useState } from 'react';

const NumberGuessingGame = () => {
  const [minRange, setMinRange] = useState(1); // Minimum guessable number
  const [maxRange, setMaxRange] = useState(100); // Maximum guessable number
  const [randomNumber, setRandomNumber] = useState(null); // Generated random number
  const [userGuess, setUserGuess] = useState(''); // User's input guess
  const [feedback, setFeedback] = useState(''); // Feedback message (higher, lower, correct)
  const [attempts, setAttempts] = useState(0); // Number of attempts

  useEffect(() => {
    setRandomNumber(Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange);
  }, [minRange, maxRange]); // Generate new random number when range changes

  const handleGuess = (e) => {
    setUserGuess(e.target.value);
  };

  const handleSubmit = () => {
    if (isNaN(userGuess)) {
      setFeedback('Please enter a valid number.');
      return;
    }
    const guessNum = parseInt(userGuess);
    setAttempts(attempts + 1);
    if (guessNum === randomNumber) {
      setFeedback('Correct! You guessed it in ' + attempts + ' attempts.');
    } else if (guessNum < randomNumber) {
      setFeedback('Higher! Try again.');
    } else {
      setFeedback('Lower! Try again.');
    }
  };

  const handleReset = () => {
    setRandomNumber(null);
    setUserGuess('');
    setFeedback('');
    setAttempts(0);
  };

  return (
    <div className="number-guessing-game">
      <h1>Guess the Number</h1>
      <p>Guess a number between {minRange} and {maxRange}.</p>
      <input type="number" value={userGuess} onChange={handleGuess} />
      <button onClick={handleSubmit}>Guess</button>
      <p className="feedback">{feedback}</p>
      <p>Attempts: {attempts}</p>
      <button onClick={handleReset} disabled={!randomNumber}>Reset Game</button>
    </div>
  );
};

export default NumberGuessingGame;

Explanation

• This component utilizes useState hooks to manage various game states, including the random number, user guess, feedback, and attempts.

• useEffect hook ensures a new random number is generated upon changes in the range.

• User input is validated and analyzed in the handleSubmit function, providing appropriate feedback based on the guess.

• The handleReset function allows starting a new game with a fresh random number and clearing previous attempts.

• The UI renders the guess input field, feedback message, attempt count, and optional reset button.

Additional Notes

• Implementing difficulty levels that adjust the range and number of attempts.

• Offering hints by revealing digits of the random number after exceeding attempts.

• Integrating leaderboard functionality to store and display users' best scores.

• Animating the feedback messages or the guess input field for engaging interactions.