File size: 2,452 Bytes
e762863 e2a6404 12e936c e2a6404 e762863 e2a6404 12e936c e2a6404 12e936c e2a6404 12e936c 1936e7d 12e936c e762863 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Color Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<h1>Guess the Color Game</h1>
<p>Try to guess the background color!</p>
<div class="color-options">
<div class="color-box" id="color1"></div>
<div class="color-box" id="color2"></div>
<div class="color-box" id="color3"></div>
<div class="color-box" id="color4"></div>
</div>
<p id="result"></p>
<button onclick="resetGame()">Play Again</button>
</div>
<script>
const colors = ["red", "blue", "green", "yellow"];
let selectedColor;
function randomizeColors() {
selectedColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = selectedColor;
// Randomize the color options
const shuffledColors = [...colors].sort(() => Math.random() - 0.5);
document.getElementById("color1").style.backgroundColor = shuffledColors[0];
document.getElementById("color2").style.backgroundColor = shuffledColors[1];
document.getElementById("color3").style.backgroundColor = shuffledColors[2];
document.getElementById("color4").style.backgroundColor = shuffledColors[3];
}
function checkGuess(selected) {
const result = document.getElementById("result");
if (selected === selectedColor) {
result.textContent = "Correct! You guessed the color!";
result.style.color = "green";
} else {
result.textContent = "Wrong guess! Try again.";
result.style.color = "red";
}
}
function resetGame() {
document.getElementById("result").textContent = "";
randomizeColors();
}
// Event listeners for color options
document.getElementById("color1").onclick = () => checkGuess(document.getElementById("color1").style.backgroundColor);
document.getElementById("color2").onclick = () => checkGuess(document.getElementById("color2").style.backgroundColor);
document.getElementById("color3").onclick = () => checkGuess(document.getElementById("color3").style.backgroundColor);
document.getElementById("color4").onclick = () => checkGuess(document.getElementById("color4").style.backgroundColor);
// Start game
randomizeColors();
</script>
</body>
</html> |