Juego de combinación de colores

1,823 hasan

Abrir en el editor Publica tu código

Recomendado

28 September 2025

Ejemplo de animación de carga CSS

13 November 2024

Efecto de marco de fotos CSS 3D para imágenes

20 April 2026

Estructura HTML del catálogo de moda

HTML

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