Click here for free DL of the app version that can save data.

No:9221

130

←

Prev Next

→

honey and clover
Developer User4246｜Date and time 23/7/22 16:29:38
Build time 24.843 sec｜Game capacity 2.754KB｜

Script

了解しました。ハチミツとクローバーというゲームを作成します。以下が実装例です。

ハチミツとクローバー

クリックしてハチミツとクローバーを集めよう！

Score: 0

🍯

🍀

もう一度遊ぶ

このプログラムでは、ハチミツをクリックするとスコアが10点、クローバーをクリックするとスコアが5点加算されます。ゲームオーバーになると、スコアをリセットするための「もう一度遊ぶ」ボタンが表示されます。このように、JavaScriptとHTMLを組み合わせて、ハチミツとクローバーというシンプルなゲームを作成しました。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

了解しました。ハチミツとクローバーというゲームを作成します。

以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ハチミツとクローバー</title>
    <style>
        body {
            text-align: center;
        }
        #message {
            font-size: 18px;
            margin-bottom: 20px;
        }
        #score {
            font-size: 24px;
        }
        #honey {
            font-size: 36px;
            cursor: pointer;
        }
        #clover {
            font-size: 36px;
            cursor: pointer;
        }
        #reset {
            display: none;
            margin-top: 20px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>ハチミツとクローバー</h1>
    <div id="message">クリックしてハチミツとクローバーを集めよう！</div>
    <div id="score">Score: 0</div>
    <div id="honey">🍯</div>
    <div id="clover">🍀</div>
    <div id="reset">もう一度遊ぶ</div>
    <script>
        var score = 0;
        var gameOver = false;

document.getElementById("honey").addEventListener("click", function() {
            if (!gameOver) {
                score += 10;
                document.getElementById("score").innerHTML = "Score: " + score;
            }
        });

document.getElementById("clover").addEventListener("click", function() {
            if (!gameOver) {
                score += 5;
                document.getElementById("score").innerHTML = "Score: " + score;
            }
        });

function endGame() {
            gameOver = true;
            document.getElementById("message").innerHTML = "ゲームオーバー！";
            document.getElementById("reset").style.display = "block";
        }

document.getElementById("reset").addEventListener("click", function() {
            score = 0;
            gameOver = false;
            document.getElementById("message").innerHTML = "クリックしてハチミツとクローバーを集めよう！";
            document.getElementById("score").innerHTML = "Score: " + score;
            document.getElementById("reset").style.display = "none";
        });
    </script>
</body>
</html>
```

このプログラムでは、ハチミツをクリックするとスコアが10点、クローバーをクリックするとスコアが5点加算されます。ゲームオーバーになると、スコアをリセットするための「もう一度遊ぶ」ボタンが表示されます。

このように、JavaScriptとHTMLを組み合わせて、ハチミツとクローバーというシンプルなゲームを作成しました。