# 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

```javascript
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

```javascript
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

```javascript
import React from 'react';

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

export default Letter;
```

HangmanGraphic.js

```javascript
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.