Jogo de combinação de cores

603 hasan

Abrir no Editor Publique Seu Código

Recomendado

1 April 2025

Ficha de ficha feita com um índice pastel seguro

26 October 2024

Modelo de site de portfólio de desenvolvedor HTML CSS

21 January 2025

Página de destino da agência imobiliária

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

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

Recomendado

Ficha de ficha feita com um índice pastel seguro

Modelo de site de portfólio de desenvolvedor HTML CSS

Página de destino da agência imobiliária

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS