Project Overview

Color Clash is an interactive and fast-paced cognitive game developed using React.
The objective of the game is to determine whether the displayed color word matches the color in which it is rendered. Players must respond quickly and accurately within a limited time while managing lives, streaks, and power-ups. The game includes multiple difficulty levels, achievements, detailed statistics, and persistent data storage using the browser’s local storage.

Screenshots

Key Features

• Three difficulty levels: Easy, Medium, Hard
• Real-time countdown timer
• Score system with streak-based bonus points
• Life system with shield protection
• Power-ups including Time Freeze, Shield, and Double Points
• Achievement system with unlock conditions
• Persistent high score, statistics, and achievements using localStorage
• Game history tracking
• Responsive UI using Tailwind CSS
• Smooth animations and visual feedback

Functionality

Game Flow

1. User selects a difficulty level from the main menu
2. A color word appears in a random text color
3. Player chooses:
   • MATCH if word and color are the same
   • DIFFERENT if they do not match
4. Correct answers increase score and streak
5. Wrong answers reduce lives unless shield is active
6. Game ends when time runs out or lives reach zero

Scoring System

• Base points depend on difficulty level
• Streak bonuses are added every 3 correct answers
• Double Points power-up multiplies score gain

Power-Ups

• Time Freeze: Stops timer for 5 seconds
• Shield: Blocks one wrong answer for 10 seconds
• Double Points: Doubles score for 10 seconds

Power-ups are earned by unlocking achievements.
Achievements

• First game completion
• High streak milestones
• Score milestones
• Game count milestones
• Accuracy-based achievements

Data Persistence

• High score
• Game history
• Player statistics
• Achievements
• Power-ups

Technology Used

• React.js
• JavaScript (ES6+)
• Tailwind CSS
• Lucide React Icons
• Browser Local Storage

Why This Project Is Useful

• Enhances cognitive skills such as attention, reaction time, and decision-making
• Demonstrates real-world React development practices
• Useful for learning state-driven UI logic and game mechanics
• Ideal for portfolio projects, hackathons, or academic submissions
• Shows implementation of data persistence without a backend

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.