●を○に変えるゲーム
0
以下がリクエストに基づいた実際のプログラムです。
```html
<!DOCTYPE html>
<html>
<head>
<title>●を○に変えるゲーム</title>
<style>
.circle {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
margin: 5px;
}
</style>
</head>
<body>
<h1>●を○に変えるゲーム</h1>
<p id="score">0</p>
<div id="game-area">
<script>
var circles = [];
var score = 0;
var timer;
// 9個の〇を作成
for (var i = 0; i < 9; i++) {
var circle = document.createElement("div");
circle.className = "circle";
circle.onclick = function () {
if (this.style.backgroundColor === "red") {
this.style.backgroundColor = "white";
updateScore();
} else {
this.style.backgroundColor = "red";
}
}
document.getElementById("game-area").appendChild(circle);
circles.push(circle);
}
// 30秒ごとにランダムな〇を●に変える
function startGame() {
clearInterval(timer);
timer = setInterval(function () {
var randomIndex = Math.floor(Math.random() * 9);
if (circles[randomIndex].style.backgroundColor === "red") {
circles[randomIndex].style.backgroundColor = "white";
} else {
circles[randomIndex].style.backgroundColor = "red";
}
}, 1000);
}
// スコアを更新し、〇が全て白になったらゲーム終了
function updateScore() {
score++;
document.getElementById("score").innerText = score;
if (score === 9) {
clearInterval(timer);
alert("おめでとう！全ての〇を●に変えることができました！");
}
}
startGame();
</script>
</div>
</body>
</html>
```
このプログラムは、9個の〇の要素を作成し、クリックすることで〇を●に変えるゲームです。30秒ごとにランダムな〇が●に変わります。全ての〇を●に変えると、ゲームが終了し、おめでとうメッセージが表示されます。
ジョークを取り入れると面白いですね。お好みに応じて以下のようなジョークを追加してください。
```javascript
var jokes = [
"Why don't scientists trust atoms? Because they make up everything!",
"Did you hear about the mathematician who's afraid of negative numbers? He'll stop at nothing to avoid them!",
"Why don't scientists trust atoms? Because they make up everything!",
"Did you hear about the mathematician who's afraid of negative numbers? He'll stop at nothing to avoid them!"
];
var joke = jokes[Math.floor(Math.random() * jokes.length)];
alert(joke);
```