Certainly! Let's create a simple color-matching game. Color Matcher

Color Matcher

Target Color

Your Color

Red: 128

Green: 128

Blue: 128

body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; margin: 0; } .game-container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); text-align: center; } h1 { margin-top: 0; color: #333; } .color-display { display: flex; justify-content: space-around; margin-bottom: 20px; } .color-box { width: 150px; height: 100px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); font-weight: bold; border-radius: 4px; } #target-color { background-color: #808080; /* Default */ } #mixed-color { background-color: rgb(128, 128, 128); /* Default */ } .sliders { margin-bottom: 20px; } .slider-group { display: flex; align-items: center; margin-bottom: 10px; } .slider-group label { width: 60px; text-align: left; margin-right: 10px; } .slider-group input[type="range"] { flex-grow: 1; margin-right: 10px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 4px; background-color: #007bff; color: white; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } #result { margin-top: 20px; font-size: 18px; min-height: 1.2em; /* Reserve space */ } #new-round-button { margin-top: 10px; background-color: #28a745; } #new-round-button:hover { background-color: #218838; } const targetColorBox = document.getElementById('target-color'); const mixedColorBox = document.getElementById('mixed-color'); const redSlider = document.getElementById('red-slider'); const greenSlider = document.getElementById('green-slider'); const blueSlider = document.getElementById('blue-slider'); const redValueSpan = document.getElementById('red-value'); const greenValueSpan = document.getElementById('green-value'); const blueValueSpan = document.getElementById('blue-value'); const checkButton = document.getElementById('check-button'); const newRoundButton = document.getElementById('new-round-button'); const resultDiv = document.getElementById('result'); let targetColor = { r: 0, g: 0, b: 0 }; // Function to generate a random color function generateRandomColor() { return { r: Math.floor(Math.random() * 256), g: Math.floor(Math.random() * 256), b: Math.floor(Math.random() * 256) }; } // Function to update the mixed color display based on slider values function updateMixedColor() { const r = redSlider.value; const g = greenSlider.value; const b = blueSlider.value; mixedColorBox.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; redValueSpan.textContent = r; greenValueSpan.textContent = g; blueValueSpan.textContent = b; } // Function to calculate the difference between two colors (Euclidean distance in RGB space) function calculateColorDifference(color1, color2) { const dr = color1.r - color2.r; const dg = color1.g - color2.g; const db = color1.b - color2.b; return Math.sqrt(dr * dr + dg * dg + db * db); } // Function to start a new round function startNewRound() { targetColor = generateRandomColor(); targetColorBox.style.backgroundColor = `rgb(${targetColor.r}, ${targetColor.g}, ${targetColor.b})`; // Reset sliders to a neutral value (e.g., 128) redSlider.value = 128; greenSlider.value = 128; blueSlider.value = 128; updateMixedColor(); // Update mixed color box and value spans resultDiv.textContent = ''; checkButton.style.display = 'inline-block'; newRoundButton.style.display = 'none'; } // Event listeners for sliders redSlider.addEventListener('input', updateMixedColor); greenSlider.addEventListener('input', updateMixedColor); blueSlider.addEventListener('input', updateMixedColor); // Event listener for the check button checkButton.addEventListener('click', () => { const mixedColor = { r: parseInt(redSlider.value), g: parseInt(greenSlider.value), b: parseInt(blueSlider.value) }; const difference = calculateColorDifference(targetColor, mixedColor); // The maximum possible difference is between rgb(0,0,0) and rgb(255,255,255) // sqrt(255^2 + 255^2 + 255^2) = sqrt(3 * 255^2) = 255 * sqrt(3) ≈ 441.67 const maxDifference = Math.sqrt(255 * 255 * 3); // Calculate a score (higher is better, max 100) // Score = 100 * (1 - difference / maxDifference) const score = Math.max(0, Math.round(100 * (1 - difference / maxDifference))); resultDiv.textContent = `Difference: ${difference.toFixed(2)}. Your Score: ${score}/100`; checkButton.style.display = 'none'; newRoundButton.style.display = 'inline-block'; }); // Event listener for the new round button newRoundButton.addEventListener('click', startNewRound); // Start the first round when the page loads startNewRound(); This sets up a simple game where you try to match a target color by adjusting RGB sliders.