React provides an excellent platform for creating interactive and engaging web applications. In this tutorial, you will be guided to build a classic Hangman game using React. Hangman is a word-guessing game that is not only entertaining but also a great way to practice your React skills.
Preview of final output: Let us have a look at how the final output will look like

Prerequisites:
Approach to create Hangman Game:
- Creating a cool Hangman game with React is our focus. We're using React for style, JavaScript for brains, and CSS for a sleek look. We're kicking off quickly with Create React App, setting up components for words, input, and the hangman visuals.
- We're adding a twist with random word choices to keep it exciting. When you guess, it updates live, and we're keeping track of your mistakes. Winning or losing will be based on your guesses and errors. The design will be snazzy for a fun time.
Steps to Create the Hangman Game:
Step 1: Set up a new React project using Create React App.
npx create-react-app hangman-game
cd hangman-game
Folder structure:

The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Create the required files according to the folder structure and write the following code.
CSS
/* App.css */
.App {
text-align: center;
padding: 20px;
}
.hangman-canvas {
display: flex;
justify-content: center;
margin: 20px;
}
.hangman-canvas>div {
width: 20px;
height: 20px;
background-color: #333;
margin: 0 5px;
border-radius: 50%;
}
.word-display {
margin: 20px;
font-size: 24px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.letter {
margin: 0 5px;
font-size: 24px;
display: inline-block;
border-bottom: 2px solid #333;
padding-bottom: 5px;
transition: all 0.3s ease;
}
.letter.guessed {
color: rgb(106, 192, 238);
border-bottom: 2px solid rgb(22, 96, 118);
}
/* App.css */
/* ... (previous code) */
.result-message {
font-size: 24px;
font-weight: bold;
margin: 20px 0;
color: #062e5b;
}
/* ... (remaining code) */
.keyboard {
margin: 20px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.keyboard button {
font-size: 18px;
padding: 10px 15px;
background-color: #7cbafc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.keyboard button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.keyboard button:hover {
background-color: #c2e2ff;
}
p {
font-size: 24px;
font-weight: bold;
color: #002c4f;
margin-top: 20px;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
.bounce {
animation: bounce 1s infinite;
}
CSS
/* HangmanGame.css */
.hangman-container {
text-align: center;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 10 10 10px rgba(0, 0, 0, 0.2);
}
h1 {
color: #333;
}
.word-display {
margin: 20px;
font-size: 24px;
display: flex;
justify-content: center;
}
.letter {
margin: 0 5px;
font-size: 24px;
display: inline-block;
border-bottom: 2px solid #333;
padding-bottom: 5px;
transition: all 0.3s ease;
}
.letter.guessed {
color: rgb(112, 159, 195);
border-bottom: 2px solid green;
}
.keyboard {
margin: 20px;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.keyboard button {
font-size: 18px;
padding: 10px 15px;
background-color: #4c8eaf;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.keyboard button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.keyboard button:hover {
background-color: #95e1fd;
}
.result-message {
font-size: 24px;
font-weight: bold;
margin: 20px 0;
color: #000000;
}
.new-game-button {
font-size: 18px;
padding: 10px 15px;
background-color: #2196f3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.new-game-button:hover {
background-color: #0b7dda;
}
JavaScript
// App.js
import React from 'react';
import './App.css';
import HangmanGame from './HangmanGame';
function App() {
return (
<div className="App">
<HangmanGame />
</div>
);
}
export default App;
JavaScript
// HangmanCanvas.js
import React from 'react';
const HangmanCanvas = ({ mistakes }) => {
const parts = [
'head',
'body',
'left-arm',
'right-arm',
'left-leg',
'right-leg',
];
return (
<div className="hangman-canvas">
{parts.slice(0, mistakes).map((part, index) => (
<div key={index} className={part} />
))}
</div>
);
};
export default HangmanCanvas;
JavaScript
// HangmanGame.js
import React, { useState, useEffect } from "react";
import HangmanCanvas from "./HangmanCanvas";
import "./HangmanGame.css"; // Import the additional CSS file
const words = ["REACT", "JAVASCRIPT", "DEVELOPER", "HANGMAN", "COMPONENT"];
const HangmanGame = () => {
const [word, setWord] = useState("");
const [guessedLetters, setGuessedLetters] = useState([]);
const [mistakes, setMistakes] = useState(0);
useEffect(() => {
resetGame();
}, []);
const chooseRandomWord = () => {
const randomIndex = Math.floor(Math.random() * words.length);
return words[randomIndex].toUpperCase();
};
const handleGuess = (letter) => {
if (!guessedLetters.includes(letter)) {
setGuessedLetters([...guessedLetters, letter]);
if (!word.includes(letter)) {
setMistakes(mistakes + 1);
}
}
};
const isGameWon = () => {
return word
.split("")
.every((letter) => guessedLetters.includes(letter));
};
const isGameLost = () => {
return mistakes >= 6;
};
const resetGame = () => {
setWord(chooseRandomWord());
setGuessedLetters([]);
setMistakes(0);
};
return (
<div className="hangman-container">
<h1>Hangman Game</h1>
<h5>
Hangman is a word-guessing game. Start a new game, guess letters
to reveal the word, and avoid drawing the hangman by making
incorrect guesses. Win by guessing the word before the hangman
is complete. Have fun!
</h5>
<HangmanCanvas mistakes={mistakes} />
<div className="word-display">
{word.split("").map((letter, index) => (
<span key={index} className="letter">
{guessedLetters.includes(letter) ? letter : "_"}
</span>
))}
</div>
<div className="keyboard">
{Array.from(Array(26)).map((_, index) => (
<button
key={index}
onClick={() =>
handleGuess(String.fromCharCode(65 + index))
}
disabled={guessedLetters.includes(
String.fromCharCode(65 + index)
)}
>
{String.fromCharCode(65 + index)}
</button>
))}
</div>
{isGameWon() && <p className="result-message">You won!</p>}
{isGameLost() && (
<p className="result-message">You lost! The word was: {word}</p>
)}
<button className="new-game-button" onClick={resetGame}>
New Game
</button>
</div>
);
};
export default HangmanGame;
To start the application type the following command:
npm start
Output:
Similar Reads
PacMan game using React Let's make a Pacman game using React for a fun and nostalgic web experience. We'll include classic features like the maze, pellets, and ghosts, and learn some cool React stuff along the way. The game will be easy to play with arrow keys, and we'll add extras like keeping score and power pellets. It'
7 min read
Ping Pong Game using React Ping Pong is one of the earliest video games. It's a two-player game in which each player controls the paddle by dragging it from one side of the screen to the other to strike the ball back and forth. In this article, you will see how you can create a simple but exciting game of ping pong using Reac
4 min read
Math Sprint Game using React In this article, we will create a Math Sprint Game Using ReactJS. Math Sprint is a fun and challenging game where players have to solve math problems within a time limit to earn points. This game presents random math questions with four options. Players click the correct answer, and if correct, itâs
5 min read
Word Guess Game using React In this article, we will create an Interactive Word Guess Game using ReactJS. Word Guess game is basically a guessing game, where a hint will be given based on the hint you have to guess the word.This project basically implements functional components and manages the state accordingly. This Game all
6 min read
Typing Game using React React Typing Game is a fun and interactive web application built using React. It tests and improves the user's typing speed and accuracy by presenting sentences for the user to type within a specified time limit. The game provides real-time feedback by highlighting any mistakes made by the user, mak
4 min read
15 Puzzle Game using ReactJS In this article, we will create the 15 Puzzle Game using ReactJS. 15 puzzle game is basically a tile-based game in which there are 16 tiles out of which 1 tile is left empty and the remaining tiles are filled with numbers from 1 to 15 in random order. The user has to arrange all the tiles in numeric
6 min read
Whack a Mole Game using ReactJS In this article, we explore the creation of a digital Whac-A-Mole game using React. This beloved classic challenges players to "whack" moles as they pop up from their holes. Whack-a-mole projectPrerequisites:Basic Knowledge of HTML, CSS, and JavaScript:React.jsNode.js and npmApproachProject Setup: S
3 min read
Tenzies Game using ReactJS In this article, we are going to implement Tenzied Games using React JS. Tenzies is a fast-paced and fun game where players have to race to roll a specific combination with a set of ten dice. As we are building this game with ReactJS, we are using the functional components to build the application,
7 min read
Flappy Bird Game Using React JS The game Flappy Bird has gained popularity with millions of people, from, all over the world playing it. In this game, players take control of a bird that needs to navigate between pipes while flying. The bird cannot get crashed into the pipes or the ground. If the bird does, then the game is over.
5 min read
Create a 2048 Game using React-Native In this article, we are going to implement a 2048 Game using React Native. The 2048 game is a popular sliding puzzle game that involves combining tiles with the same number to reach the tile with the number 2048. Players can move the tiles in four directions: up, down, left, or right.PrerequisiteRea
7 min read