Color Matching Game

2,151 0 Games hasan Follow

Remix Open In Editor Fullscreen Discuss 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;
    }
}

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();
});

Comments 0

…

Color Matching Game

Recommended

Comments 0