48 - Hangman Game

Description

Create a Hangman game where players guess a hidden word letter by letter. The game should generate a random word from a word list, show blanks or underscores representing the word's length, allow players to guess individual letters, reveal correctly guessed letters and update the blank spaces, track incorrect guesses, and display a hangman graphic depending on the count.

Algorithm

1. Generate a random word from a word list

2. Display blanks or underscores representing the word's length

3. Allow players to guess individual letters

4. Reveal correctly guessed letters and update the blank spaces

5. Track incorrect guesses and display a hangman graphic depending on the count

Classes

• HangmanGame: The main game component

• Word: The word to be guessed

• Letter: A single letter in the word

• HangmanGraphic: The hangman graphic component

Code

HangmanGame.js

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

const HangmanGame = () => {
  const [word, setWord] = useState(generateRandomWord());
  const [guessedLetters, setGuessedLetters] = useState([]);
  const [incorrectGuesses, setIncorrectGuesses] = useState(0);

  const handleGuess = (letter) => {
    const isCorrect = word.includes(letter);
    if (isCorrect) {
      setGuessedLetters((prevLetters) => [...prevLetters, letter]);
    } else {
      setIncorrectGuesses((prevCount) => prevCount + 1);
    }
  };

  return (
    <div>
      <Word word={word} guessedLetters={guessedLetters} />
      <HangmanGraphic incorrectGuesses={incorrectGuesses} />
      <input type="text" onChange={(e) => handleGuess(e.target.value)} />
    </div>
  );
};

const generateRandomWord = () => {
  const wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
  return wordList[Math.floor(Math.random() * wordList.length)];
};

export default HangmanGame;

Word.js

import React from 'react';

const Word = ({ word, guessedLetters }) => {
  return (
    <div>
      {word.split('').map((letter, index) => (
        <Letter
          key={index}
          letter={letter}
          guessed={guessedLetters.includes(letter)}
        />
      ))}
    </div>
  );
};

export default Word;

Letter.js

import React from 'react';

const Letter = ({ letter, guessed }) => {
  return (
    <div>
      {guessed ? letter : '_'}
    </div>
  );
};

export default Letter;

HangmanGraphic.js

import React from 'react';

const HangmanGraphic = ({ incorrectGuesses }) => {
  const graphics = [
    '', // 0 incorrect guesses
    '', // 1 incorrect guess
    '', // 2 incorrect guesses
    '', // 3 incorrect guesses
    '', // 4 incorrect guesses
    '', // 5 incorrect guesses
    '', // 6 incorrect guesses
  ];
  return <div dangerouslySetInnerHTML={{ __html: graphics[incorrectGuesses] }} />;
};

export default HangmanGraphic;

Explanation

This code creates a Hangman game that generates a random word, displays blanks or underscores representing the word's length, allows players to guess individual letters, reveals correctly guessed letters and updates the blank spaces, tracks incorrect guesses, and displays a hangman graphic depending on the count.

Possible Future Enhancements

• Word list management: Allow users to add or remove words from the word list.

• Difficulty levels: Add different difficulty levels with varying word lengths or complexity.

• Multiplayer: Add support for multiplayer games, where two or more players can guess the word simultaneously.

• Timer: Add a timer to limit the time players have to guess the word.