Color Matching Game

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Master | RGB Guessing Game</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <div class="header-content">
                <h1><i class="fas fa-eye-dropper"></i> Color Master</h1>
                <p class="game-subtitle">Test your RGB intuition</p>
            </div>
        </header>

<main class="game-board">
            <div class="game-info">
                <div class="stats-grid">
                    <div class="stat-card">
                        <span class="stat-label">Score</span>
                        <span class="stat-value" id="score">0</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-label">High Score</span>
                        <span class="stat-value" id="high-score">0</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-label">Time</span>
                        <span class="stat-value" id="timer">30</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-label">Lives</span>
                        <span class="stat-value" id="lives">3</span>
                    </div>
                </div>

<div class="difficulty-tabs">
                    <button class="tab-btn active" data-difficulty="easy">Easy</button>
                    <button class="tab-btn" data-difficulty="medium">Medium</button>
                    <button class="tab-btn" data-difficulty="hard">Hard</button>
                </div>
            </div>

<div class="game-controls">
                <button class="control-btn" id="new-colors">
                    <i class="fas fa-random"></i> New Colors
                </button>
                <button class="control-btn" id="hint-btn">
                    <i class="fas fa-lightbulb"></i> Hint (<span id="hint-count">2</span>)
                </button>
            </div>
        </main>

<footer class="game-footer">
            <p>Created by <i class="fas fa-heart"></i> <a href="https://www.facebook.com/hasanmahamud91" target="_blank">Hasan Mahamud</a></p>
        </footer>
    </div>

CSS

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #a5b4fc;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --background: #f8fafc;
    --surface: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.game-container {
    width: 100%;
    max-width: 800px;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.game-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.game-header .header-content {
    max-width: 600px;
    margin: 0 auto;
}

.game-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.game-header .game-subtitle {
    font-weight: 400;
    opacity: 0.9;
    font-size: 1rem;
}

.game-board {
    padding: 1.5rem;
}

.game-info {
    margin-bottom: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background-color: var(--background);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.difficulty-tabs {
    display: flex;
    background-color: var(--background);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    box-shadow: var(--shadow-sm);
}

.tab-btn {
    flex: 1;
    padding: 0.5rem;
    border: none;
    background: none;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.tab-btn.active {
    background-color: var(--surface);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.tab-btn:not(.active):hover {
    color: var(--text-primary);
}

.game-display {
    margin-bottom: 1.5rem;
}

.rgb-display {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 1.5rem;
    background-color: var(--background);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

.rgb-display span {
    transition: var(--transition);
}

.message-container {
    min-height: 2.5rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    opacity: 0;
    transform: scale(0.95);
    transition: var(--transition);
}

.message.show {
    opacity: 1;
    transform: scale(1);
}

.message.correct {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.message.error {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.message.info {
    background-color: rgba(79, 70, 229, 0.1);
    color: var(--primary-dark);
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.color-option {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
}

.color-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.color-option.selected {
    transform: scale(0.98);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

.color-option.correct {
    animation: pulse 0.5s ease;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success);
}

.color-option.wrong {
    opacity: 0.3;
    pointer-events: none;
}

.game-controls {
    display: flex;
    gap: 0.75rem;
}

.control-btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.control-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.control-btn:active {
    transform: translateY(0);
}

.control-btn:disabled {
    background-color: var(--text-secondary);
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.game-footer {
    text-align: center;
    padding: 1rem;
    background-color: var(--background);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.4s ease;
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .color-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rgb-display {
        font-size: 1.25rem;
        padding: 1rem;
    }
}

@media (max-width: 400px) {
    .game-controls {
        flex-direction: column;
    }
}

JS

class ColorGame {
    constructor() {
        // Game state
        this.score = 0;
        this.highScore = localStorage.getItem('colorGameHighScore') || 0;
        this.lives = 3;
        this.streak = 0;
        this.timeLeft = 30;
        this.timer = null;
        this.difficulty = 'easy';
        this.correctColor = null;
        this.colors = [];
        this.hintsUsed = 0;
        this.gameActive = false;
        
        // DOM elements
        this.elements = {
            score: document.getElementById('score'),
            highScore: document.getElementById('high-score'),
            lives: document.getElementById('lives'),
            timer: document.getElementById('timer'),
            rgbValue: document.getElementById('rgb-value'),
            rValue: document.getElementById('r-value'),
            gValue: document.getElementById('g-value'),
            bValue: document.getElementById('b-value'),
            message: document.getElementById('message'),
            colorOptions: document.getElementById('color-options'),
            newColorsBtn: document.getElementById('new-colors'),
            hintBtn: document.getElementById('hint-btn'),
            hintCount: document.getElementById('hint-count'),
            difficultyBtns: document.querySelectorAll('.tab-btn')
        };
        
        // Initialize
        this.bindEvents();
        this.updateHighScore();
        this.startNewGame();
    }
    
    bindEvents() {
        this.elements.newColorsBtn.addEventListener('click', () => this.startNewGame());
        this.elements.hintBtn.addEventListener('click', () => this.giveHint());
        
        this.elements.difficultyBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                this.difficulty = btn.dataset.difficulty;
                this.elements.difficultyBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                this.startNewGame();
            });
        });
    }
    
    startNewGame() {
        // Reset game state
        this.resetGameState();
        
        // Generate colors
        this.generateColors();
        
        // Start timer
        this.startTimer();
        
        // Render
        this.render();
    }
    
    resetGameState() {
        clearInterval(this.timer);
        this.score = 0;
        this.lives = 3;
        this.streak = 0;
        this.timeLeft = 30;
        this.hintsUsed = 0;
        this.gameActive = true;
        this.updateUI();
    }
    
    generateColors() {
        this.colors = [];
        const count = this.difficulty === 'easy' ? 3 : 
                     this.difficulty === 'medium' ? 6 : 9;
        
        for (let i = 0; i < count; i++) {
            this.colors.push(this.generateRandomColor());
        }
        
        this.correctColor = this.colors[Math.floor(Math.random() * this.colors.length)];
    }
    
    generateRandomColor() {
        return {
            r: Math.floor(Math.random() * 256),
            g: Math.floor(Math.random() * 256),
            b: Math.floor(Math.random() * 256)
        };
    }
    
    startTimer() {
        clearInterval(this.timer);
        this.timer = setInterval(() => {
            this.timeLeft--;
            this.elements.timer.textContent = this.timeLeft;
            
            if (this.timeLeft <= 0) {
                this.endGame(false);
            }
        }, 1000);
    }
    
    render() {
        // Update RGB display
        this.elements.rValue.textContent = this.correctColor.r;
        this.elements.gValue.textContent = this.correctColor.g;
        this.elements.bValue.textContent = this.correctColor.b;
        
        // Render color options
        this.elements.colorOptions.innerHTML = '';
        this.colors.forEach((color, index) => {
            const colorOption = document.createElement('div');
            colorOption.className = 'color-option';
            colorOption.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`;
            colorOption.dataset.index = index;
            
            colorOption.addEventListener('click', () => {
                if (this.gameActive) this.checkAnswer(color, colorOption);
            });
            
            this.elements.colorOptions.appendChild(colorOption);
        });
        
        // Update hint count
        this.elements.hintCount.textContent = 2 - this.hintsUsed;
    }
    
    checkAnswer(selectedColor, clickedElement) {
        if (selectedColor.r === this.correctColor.r &&
            selectedColor.g === this.correctColor.g &&
            selectedColor.b === this.correctColor.b) {
            // Correct answer
            this.handleCorrectAnswer(clickedElement);
        } else {
            // Wrong answer
            this.handleWrongAnswer(clickedElement);
        }
    }
    
    handleCorrectAnswer(clickedElement) {
        this.score += 10 + Math.floor(this.timeLeft / 3);
        this.streak++;
        
        // Add bonus for streak
        if (this.streak >= 3) {
            this.score += this.streak * 5;
        }
        
        // Visual feedback
        clickedElement.classList.add('correct');
        this.showMessage(`Perfect! +${10 + Math.floor(this.timeLeft / 3)} points`, 'correct');
        
        // Highlight all correct options
        this.highlightCorrectColors();
        
        // Disable further clicks
        this.disableColorOptions();
        
        // Update UI
        this.updateUI();
        
        // New round after delay
        setTimeout(() => {
            if (this.gameActive) {
                this.generateColors();
                this.render();
                this.timeLeft = 30;
                this.elements.timer.textContent = this.timeLeft;
            }
        }, 1500);
    }
    
    handleWrongAnswer(clickedElement) {
        this.streak = 0;
        this.lives--;
        this.timeLeft = Math.max(5, this.timeLeft - 5);
        
        // Visual feedback
        clickedElement.classList.add('wrong');
        this.showMessage('Incorrect!', 'error');
        
        // Update UI
        this.updateUI();
        
        if (this.lives <= 0) {
            this.endGame(false);
        }
    }
    
    highlightCorrectColors() {
        const colorOptions = this.elements.colorOptions.querySelectorAll('.color-option');
        colorOptions.forEach(option => {
            const bgColor = option.style.backgroundColor;
            if (bgColor === `rgb(${this.correctColor.r}, ${this.correctColor.g}, ${this.correctColor.b})`) {
                option.classList.add('correct');
            }
        });
    }
    
    disableColorOptions() {
        const colorOptions = this.elements.colorOptions.querySelectorAll('.color-option');
        colorOptions.forEach(option => {
            option.style.pointerEvents = 'none';
        });
    }
    
    giveHint() {
        if (!this.gameActive || this.hintsUsed >= 2) {
            this.showMessage('No hints left!', 'error');
            return;
        }
        
        const wrongOptions = Array.from(this.elements.colorOptions.querySelectorAll('.color-option'))
            .filter(option => {
                const bgColor = option.style.backgroundColor;
                return bgColor !== `rgb(${this.correctColor.r}, ${this.correctColor.g}, ${this.correctColor.b})`;
            });
        
        if (wrongOptions.length > 0) {
            const randomIndex = Math.floor(Math.random() * wrongOptions.length);
            wrongOptions[randomIndex].classList.add('wrong');
            this.hintsUsed++;
            this.elements.hintCount.textContent = 2 - this.hintsUsed;
            this.showMessage(`Hint used! ${2 - this.hintsUsed} remaining`, 'info');
        }
    }
    
    endGame(completed) {
        this.gameActive = false;
        clearInterval(this.timer);
        
        if (completed) {
            this.showMessage(`Game completed! Final score: ${this.score}`, 'correct');
        } else {
            this.showMessage(`Game over! Final score: ${this.score}`, 'error');
        }
        
        this.updateHighScore();
        
        // Disable all options
        this.disableColorOptions();
    }
    
    updateUI() {
        this.elements.score.textContent = this.score;
        this.elements.lives.textContent = this.lives;
        
        // Update high score if needed
        if (this.score > this.highScore) {
            this.highScore = this.score;
            this.updateHighScore();
        }
    }
    
    updateHighScore() {
        this.elements.highScore.textContent = this.highScore;
        localStorage.setItem('colorGameHighScore', this.highScore);
    }
    
    showMessage(text, type) {
        this.elements.message.textContent = text;
        this.elements.message.className = `message show ${type}`;
        
        // Auto-hide message after 3 seconds
        setTimeout(() => {
            this.elements.message.classList.remove('show');
        }, 3000);
    }
}

// Initialize the game when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new ColorGame();
});

Color Matching Game

Recommended

Simple Snake Game

Breakout game

Gradient Color on Hover

HTML

CSS

JS

Recommended

Simple Snake Game

Breakout game

Gradient Color on Hover

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS