HTML Color Ball Game: Click the Right Color!
<html>
<head>
<title>HTML Color Ball Game</title>
</head>
<body>
<script>
var colors = ['red', 'green', 'blue', 'orange', 'purple', 'yellow'];
var score = 0;
//Generate a random number between 0 and 5
var randomNumber = Math.floor(Math.random() * 6);
var randomColor = colors[randomNumber];
<pre><code>document.write('<h1>Click the ball with ' + randomColor + ' color!</h1>')
function clickBall(color) {
if (color == randomColor) {
score += 10;
alert('Correct! Your score is now: ' + score);
//Generate a new random number between 0 and 5
randomNumber = Math.floor(Math.random() * 6);
//Set the randomColor to the new random number
randomColor = colors[randomNumber];
document.getElementById('message').innerHTML = '<h1>Click the ball with ' + randomColor + ' color!</h1>';
} else {
alert('Wrong! Your score is still: ' + score);
}
}
</code></pre>
</script>
<div>
<div id="message"></div>
<div>
<div onclick="clickBall('red')" style="background-color: red; width: 50px; height: 50px; border-radius:50%; display: inline-block; margin: 10px;"></div>
<div onclick="clickBall('green')" style="background-color: green; width: 50px; height: 50px; border-radius:50%; display: inline-block; margin: 10px;"></div>
<div onclick="clickBall('blue')" style="background-color: blue; width: 50px; height: 50px; border-radius:50%; display: inline-block; margin: 10px;"></div>
<div onclick="clickBall('orange')" style="background-color: orange; width: 50px; height: 50px; border-radius:50%; display: inline-block; margin: 10px;"></div>
<div onclick="clickBall('purple')" style="background-color: purple; width: 50px; height: 50px; border-radius:50%; display: inline-block; margin: 10px;"></div>
<div onclick="clickBall('yellow')" style="background-color: yellow; width: 50px; height: 50px; border-radius:50%; display: inline-block; margin: 10px;"></div>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmsp 著作权归作者所有。请勿转载和采集!