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

No:6164

2065

←

Prev Next

→

Mixed drink bar! Press the buttons with the names ..ALL
Developer User3720｜Date and time 23/7/1 18:15:47
Build time 25.352 sec｜Game capacity 2.312KB｜

Script

以下が、指定された要件を満たしたプログラムの例です。

混ぜ混ぜドリンクバー

コップにジュースを注いで遊ぼう！

このプログラムでは、HTML内に必要な要素やボタンが定義されています。ジュースの名前を表示するためのdiv要素（id="cup"）と、ジュースのボタンがそれぞれ定義されています。ボタンがクリックされると、`pourJuice`関数が呼ばれ、ジュースの名前がコップに表示されます。3回以上ボタンを押すとゲームオーバーとなり、アラートが表示されます。ゲームオーバー後に再度遊ぶ場合は、ページをリロードする必要があります。以上が、「混ぜ混ぜドリンクバー」というシンプルなゲームの実装例です。絵文字の使用や、他の要素の追加など、さらに機能を拡張することも可能ですが、基本的な要件は満たしています。

←

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>
</head>
<body>
    <h1>混ぜ混ぜドリンクバー</h1>
    <p>コップにジュースを注いで遊ぼう！</p>
    <div id="cup"></div>
    <div>
        <button onclick="pourJuice('オレンジジュース')">オレンジジュース</button>
        <button onclick="pourJuice('アップルジュース')">アップルジュース</button>
        <button onclick="pourJuice('グレープジュース')">グレープジュース</button>
        <button onclick="pourJuice('メロンジュース')">メロンジュース</button>
        <button onclick="pourJuice('コーラ')">コーラ</button>
    </div>

function pourJuice(juiceName) {
            if(juiceCount >= 3) {
                gameOver();
                return;
            }
            
            const cup = document.getElementById("cup");
            cup.innerHTML += juiceName + " ";
            
            juiceCount++;
        }

function gameOver() {
            alert("ジュースがこぼれてゲームオーバーです！");
            
            // ゲームオーバー後に再度遊ぶ場合は、以下の行をコメントアウトしてください
            location.reload();
        }
    </script>
</body>
</html>
```

以上が、「混ぜ混ぜドリンクバー」というシンプルなゲームの実装例です。絵文字の使用や、他の要素の追加など、さらに機能を拡張することも可能ですが、基本的な要件は満たしています。