23 - Number Guessing Game

Description

Create a React application that generates a random number between a user-defined minimum and maximum, provides an input field for user guesses, offers feedback based on the guess (higher, lower, correct), and tracks the number of attempts and displays it for further engagement.

Algorithm

1. Create a state variable to store the random number, user guesses, and number of attempts.

2. Define a function to generate a random number between the user-defined minimum and maximum.

3. Define a function to handle user input (guesses).

4. Define a function to provide feedback based on the guess (higher, lower, correct).

5. Define a function to update the number of attempts.

6. Render the input field, feedback message, and number of attempts.

Classes

• NumberGuessingGame: A component that represents the number guessing game.

• GuessInput: A component that represents the user input field.

Code

NumberGuessingGame.js

import React, { useState } from 'react';
import GuessInput from './GuessInput';

function NumberGuessingGame() {
  const [randomNumber, setRandomNumber] = useState(generateRandomNumber(min, max));
  const [userGuess, setUserGuess] = useState('');
  const [attempts, setAttempts] = useState(0);
  const [feedback, setFeedback] = useState('');

  const handleGuess = (guess) => {
    const userGuess = parseInt(guess);
    const feedback = getFeedback(userGuess, randomNumber);
    setUserGuess(userGuess);
    setFeedback(feedback);
    updateAttempts();
  };

  const updateAttempts = () => {
    setAttempts(attempts + 1);
  };

  const getFeedback = (guess, randomNumber) => {
    if (guess === randomNumber) {
      return 'Correct!';
    } else if (guess > randomNumber) {
      return 'Higher!';
    } else {
      return 'Lower!';
    }
  };

  const generateRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  return (
    <div>
      <h2>Number Guessing Game</h2>
      <GuessInput onGuess={handleGuess} />
      <p>Feedback: {feedback}</p>
      <p>Attempts: {attempts}</p>
    </div>
  );
}

export default NumberGuessingGame;

GuessInput.js

import React from 'react';

function GuessInput({ onGuess }) {
  const [guess, setGuess] = useState('');

  const handleInput = (event) => {
    const guess = event.target.value;
    setGuess(guess);
    onGuess(guess);
  };

  return (
    <input
      type="number"
      value={guess}
      onChange={handleInput}
    />
  );
}

export default GuessInput;

Explanation

The NumberGuessingGame component renders the input field, feedback message, and number of attempts. The GuessInput component represents the user input field. The handleGuess function handles user input (guesses). The getFeedback function provides feedback based on the guess (higher, lower, correct). The updateAttempts function updates the number of attempts. The generateRandomNumber function generates a random number between the user-defined minimum and maximum.

Possible Future Enhancements

• Add more features to the game (e.g., multiple levels, bonus rounds).

• Improve the user interface and user experience.

• Add support for multiple players.

• Display the correct answer after the game is over.

• Allow users to save and load their progress.