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

No:6172

2561

←

Prev Next

→

Mixed drink bar! Press the buttons with the names ..ALL
Developer User3720｜Date and time 23/7/1 18:24:53
Build time 37.689 sec｜Game capacity 3.546KB｜

Script

以下は、上記の要件に基づいた混ぜ混ぜドリンクバーのゲームの実装例です。

混ぜ混ぜドリンクバー

この実装では、5つのジュースのボタンを押すと、それぞれのボタンに対応した色のコップにジュースが注がれます。ジュースを3回以上注いだり、ボタンを一回も押さずに完成ボタンを押すとゲームオーバーとなります。ボタンを一回以上押して完成ボタンを押すとゲームクリアとなります。ゲームオーバーまたはゲームクリア時にはアラートが表示され、ゲームがリセットされます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

以下は、上記の要件に基づいた混ぜ混ぜドリンクバーのゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #container {
            display: flex;
        }

button {
            font-size: 20px;
            padding: 10px 20px;
            margin: 10px;
        }

#cup {
            width: 200px;
            height: 200px;
            background-color: beige;
            margin: 30px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h1>混ぜ混ぜドリンクバー</h1>
    <div id="container">
        <div>
            <button id="orangeBtn" onclick="pourJuice('orange')">オレンジ</button>
            <button id="appleBtn" onclick="pourJuice('apple')">りんご</button>
            <button id="grapeBtn" onclick="pourJuice('grape')">ぶどう</button>
            <button id="melonBtn" onclick="pourJuice('melon')">メロン</button>
            <button id="peachBtn" onclick="pourJuice('peach')">もも</button>
            <br>
            <button onclick="checkResult()">完成</button>
        </div>
        <div id="cup"></div>
    </div>
    
    <script>
        let juices = {
            orange: { color: "#FFA500", count: 0 },
            apple: { color: "#FF0000", count: 0 },
            grape: { color: "#800080", count: 0 },
            melon: { color: "#00FF00", count: 0 },
            peach: { color: "#FFC0CB", count: 0 }
        };
        let totalPourCount = 0;

function pourJuice(juiceName) {
            if (totalPourCount >= 3) {
                gameOver();
                return;
            }

juices[juiceName].count++;
            totalPourCount++;
            document.getElementById("cup").style.backgroundColor = juices[juiceName].color;
        }

function checkResult() {
            let isGameOver = true;
            for (let juice in juices) {
                if (juices[juice].count > 0) {
                    isGameOver = false;
                    break;
                }
            }

if (isGameOver) {
                gameOver();
            } else if (totalPourCount === 0) {
                gameOver();
            } else {
                gameClear();
            }
        }

function gameOver() {
            alert("ゲームオーバー！");
            resetGame();
        }

function gameClear() {
            alert("ゲームクリア！");
            resetGame();
        }