Word Chain Game
In this article, we’ll create an engaging and educational Word Chain Game using React 19. The Word Chain Game is a classic vocabulary-building activity in which players take turns entering words that start with the last letter of the previous word. It’s an exciting way to enhance linguistic skills, stimulate creativity, and have fun simultaneously.
This project provides a hands-on opportunity to practice React concepts and introduces you to modern development techniques. We’ll focus on React’s state and event handling to build a dynamic and interactive user experience. By the end of this article, you will have a polished game interface with validation rules, error handling, and a sleek, professional design.
Whether you’re a beginner looking to strengthen your React skills or an experienced developer exploring creative projects, this Word Chain Game is a great way to sharpen your coding abilities and have fun. Let’s get started!
Rules for the Basic Word Chain Game
The Word Chain Game is a straightforward and entertaining vocabulary activity. Below are the rules for this basic version, which does not include a timer or word categories:
Starting the Game:
- The game begins with Player 1 entering any valid word in the input field.
- The entered word becomes the starting point of the word chain.
Building the Word Chain:
- Players take turns to input a word that begins with the last letter of the previous word in the chain.
- For example:
- Player 1: “Apple” → Player 2: “Elephant” → Player 1: “Tiger” → Player 2: “Rabbit”
Word Validation:
- A word is considered valid if it meets the following criteria:
- It contains only alphabetic characters (no digits, symbols, or spaces).
- It starts with the last letter of the previous word.
- It has not been used previously in the game.
Error Handling:
- If a player enters:
- A word with digits or special symbols, an error message appears: “Special symbols and digits are not allowed!”
- A word that doesn’t follow the chain, an error message explains why: e.g., “Word does not start with the last letter of the previous word.”
- A word already used in the game, an error message appears: “Word already used!”
Ending the Game:
- The game ends when:
- A player enters an invalid word.
- A player fails to continue the chain (e.g., no valid word comes to mind).
- The other player is declared the winner.
No Timer, No Categories:
- Players can take their time to think of a word.
- Words can belong to any category, making it open-ended and suitable for all age groups.
Wow! It looks like we are going to do something great. Let’s start coding.
Step 1 : Create a React project using the following commands:
npm create vite@latest word-chain-game --template react
When you run the above command it will ask for a framework, choose React as a framework like :
After that select a variant like JavaScript.
2. Navigate into your project folder:
cd word-chain-game
3. Install the project dependencies:
npm install
Step-2 Creating Component
Create a component called “WordChainGame.jsx” under the “src” folder and write the following code into this component.
import React, { useState } from "react";
import "./WordChainGame.css";
const WordChainGame = () => {
const [words, setWords] = useState([]); //use for list of words
const [currentWord, setCurrentWord] = useState(""); //use for accept current input
const [playerTurn, setPlayerTurn] = useState(1); //use for track the player turns
const [gameOver, setGameOver] = useState(false); //use for track game is over or not
const [error, setError] = useState(""); //use for validation
const handleWordSubmit = () => {
//checks entered character is digit or special symbol
if (!/^[a-zA-Z]+$/.test(currentWord)) {
setError("Special symbols and digits are not allowed!");
return;
}
//checks given word (input word) is already used or not
if (words.includes(currentWord)) {
setError(`Word already used! Player ${playerTurn} loses.`);
setGameOver(true);
return;
}
//checks the given word is starting with previous word last character or not
if (words.length > 0) {
const lastWord = words[words.length - 1];
if (currentWord[0].toLowerCase() !== lastWord[lastWord.length - 1].toLowerCase()) {
setError(
`Word does not start with '${lastWord[lastWord.length - 1]}'. Player ${playerTurn} loses.`
);
setGameOver(true);
return;
}
}
setWords([...words, currentWord]);
setCurrentWord("");
setError("");
setPlayerTurn(playerTurn === 1 ? 2 : 1);
};
return (
<div className="main-container">
<div className="game-container">
<h1 className="game-title">Word Chain Game</h1>
<div className="chain-container">
<strong>Chain of Words:</strong>
<p className="word-chain">
{words.length > 0 ? words.join(" → ") : "No words yet"}
</p>
</div>
{gameOver ? (
<div className="game-over">
<h2>Game Over!</h2>
<p className="error-message">{error}</p>
<button className="restart-btn" onClick={() => window.location.reload()}>
Restart Game
</button>
</div>
) : (
<div className="input-container">
<p className="turn-indicator">Player {playerTurn}'s turn</p>
<input
type="text"
value={currentWord}
onChange={(e) => setCurrentWord(e.target.value)}
placeholder="Enter a word"
className="word-input"
/>
<button className="submit-btn" onClick={handleWordSubmit}>
Submit
</button>
{error && <p className="error-message">{error}</p>}
</div>
)}
</div>
<footer className="footer">
Developed by <strong>Study Trigger</strong>
</footer>
</div>
);
};
export default WordChainGame;
Now the functional part is done, it’s time to give styling.
For styling, create a file called “WordChaineGame.css” and write the following code into it.
body {
margin: 0;
font-family: "Arial", sans-serif;
background: linear-gradient(135deg, #00c6ff, #0072ff);
color: #fff;
text-align: center;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.game-container {
background: linear-gradient(135deg, #ffffff, #f9f9f9);
color: #333;
border-radius: 20px;
padding: 40px;
max-width: 600px;
width: 90%;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.game-container:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.game-title {
font-size: 3rem;
margin-bottom: 25px;
color: #0072ff;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.chain-container {
margin: 20px 0;
}
.word-chain {
font-size: 1.3rem;
color: #555;
font-weight: bold;
background: #f4f4f4;
padding: 12px;
border-radius: 12px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.input-container {
margin-top: 30px;
}
.word-input {
padding: 12px;
border: 2px solid #0072ff;
border-radius: 8px;
font-size: 1.1rem;
width: calc(100% - 28px);
max-width: 350px;
outline: none;
box-shadow: 0 4px 8px rgba(0, 114, 255, 0.2);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.word-input:focus {
border-color: #00c6ff;
box-shadow: 0 4px 12px rgba(0, 198, 255, 0.4);
}
.submit-btn {
margin-top: 15px;
background: linear-gradient(135deg, #0072ff, #00c6ff);
color: #fff;
border: none;
padding: 12px 25px;
font-size: 1.1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.submit-btn:hover {
background: linear-gradient(135deg, #00c6ff, #0072ff);
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.error-message {
color: #d9534f;
font-weight: bold;
margin-top: 10px;
font-size: 1rem;
}
.turn-indicator {
font-size: 1.5rem;
margin-bottom: 15px;
color: #0072ff;
font-weight: bold;
}
.game-over {
margin-top: 30px;
}
.restart-btn {
background: linear-gradient(135deg, #d9534f, #ff6f61);
color: #fff;
border: none;
padding: 12px 25px;
font-size: 1.1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.restart-btn:hover {
background: linear-gradient(135deg, #ff6f61, #d9534f);
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.footer {
margin-top: 20px;
font-size: 1rem;
color: #ffffff;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
3. Import and use the component in App.jsx:
Congratulations! Your game is ready. Now you can run it with npm run dev, and it will look like the screenshot below
In case the user enters an incorrect input or an invalid word, the following screens will appear.
Summary for the Word Chain Game Article
The Word Chain Game is a delightful project that combines fun gameplay with practical coding concepts in React 19. Through this article, we explored how to create a fully functional word game that validates user input, manages turn-based logic, and provides an engaging user interface. By implementing this project, you’ve gained hands-on experience with React’s core features, including state management, event handling, and conditional rendering.
This project is an excellent starting point for developers looking to build interactive applications, and the clean, modular design ensures that it’s easy to extend or customize according to your requirements.
Access the Complete Project on GitHub
The entire source code for this project is available on GitHub. Feel free to download it, explore the implementation, and adapt it as needed for your own purposes. Here’s the link to the GitHub repository:
Word Chain Game on GitHub
Happy coding! If you have any questions or suggestions, feel free to reach out or contribute to the repository.
