> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/48-hangman-game.md).

# 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/48-hangman-game.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.