Tebak Angka Tersembunyi

by LuckyEagle56
291 lines6.6 KB
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tebak Angka Tersembunyi</title>

<style>
    * {
        box-sizing: border-box;
        font-family: Arial, sans-serif;
    }

    body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, #141e30, #243b55);
        color: white;
        padding: 20px;
    }

    .game {
        width: 100%;
        max-width: 600px;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(12px);
        border-radius: 25px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 20px 50px rgba(0,0,0,.4);
    }

    h1 {
        margin-top: 0;
        color: #ffd700;
    }

    .info {
        font-size: 18px;
        margin: 15px 0;
    }

    .numbers {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-top: 25px;
    }

    .number {
        height: 70px;
        border: none;
        border-radius: 15px;
        background: linear-gradient(145deg, #3498db, #21618c);
        color: white;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 6px 0 #154360;
        transition: .15s;
    }

    .number:hover {
        transform: translateY(-3px);
        background: linear-gradient(145deg, #5dade2, #2874a6);
    }

    .number:active {
        transform: translateY(5px);
        box-shadow: 0 1px 0 #154360;
    }

    .number.revealed {
        background: linear-gradient(145deg, #2ecc71, #1e8449);
        box-shadow: 0 6px 0 #145a32;
    }

    .number.wrong {
        background: linear-gradient(145deg, #e74c3c, #922b21);
        box-shadow: 0 6px 0 #641e16;
    }

    #result {
        min-height: 60px;
        margin-top: 25px;
        font-size: 22px;
        font-weight: bold;
    }

    .score {
        color: #00ffcc;
        font-size: 20px;
    }

    .restart {
        margin-top: 15px;
        padding: 14px 25px;
        border: none;
        border-radius: 12px;
        background: #f1c40f;
        color: #222;
        font-size: 17px;
        font-weight: bold;
        cursor: pointer;
    }

    .restart:hover {
        background: #f7dc6f;
    }

    @media(max-width:500px) {
        .numbers {
            grid-template-columns: repeat(4, 1fr);
        }

        .number {
            height: 60px;
        }
    }
</style>
</head>

<body>

<div class="game">
    <h1>🎯 Tebak Angka Tersembunyi</h1>

    <div class="info">
        Pilih salah satu angka.<br>
        Ada <b>1 angka rahasia</b> yang tersembunyi!
    </div>

    <div class="score">
        Skor: <span id="score">0</span>
    </div>

    <div id="result">
        🔊 Silakan pilih angka...
    </div>

    <div class="numbers" id="numbers"></div>

    <button class="restart" onclick="newGame()">
        🔄 Game Baru
    </button>
</div>

<script>
    let secretNumber;
    let score = 0;
    let gameOver = false;

    // Membuat suara menggunakan Web Audio API
    function playSound(type) {
        const AudioContext =
            window.AudioContext || window.webkitAudioContext;

        if (!AudioContext) return;

        const audio = new AudioContext();
        const oscillator = audio.createOscillator();
        const gain = audio.createGain();

        oscillator.connect(gain);
        gain.connect(audio.destination);

        if (type === "win") {
            oscillator.frequency.setValueAtTime(500, audio.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(
                1000,
                audio.currentTime + 0.3
            );
        } else if (type === "lose") {
            oscillator.frequency.setValueAtTime(300, audio.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(
                100,
                audio.currentTime + 0.4
            );
        } else {
            oscillator.frequency.setValueAtTime(600, audio.currentTime);
        }

        gain.gain.setValueAtTime(0.2, audio.currentTime);
        gain.gain.exponentialRampToValueAtTime(
            0.01,
            audio.currentTime + 0.5
        );

        oscillator.start();
        oscillator.stop(audio.currentTime + 0.5);
    }

    // Suara ucapan
    function speak(text) {
        if ("speechSynthesis" in window) {
            speechSynthesis.cancel();

            const suara = new SpeechSynthesisUtterance(text);
            suara.lang = "id-ID";
            suara.rate = 1;
            suara.pitch = 1.1;

            speechSynthesis.speak(suara);
        }
    }

    function newGame() {
        gameOver = false;

        // Angka rahasia 1 - 20
        secretNumber =
            Math.floor(Math.random() * 20) + 1;

        const container =
            document.getElementById("numbers");

        container.innerHTML = "";

        document.getElementById("result").innerHTML =
            "🔊 Pilih angka yang kamu curigai!";

        // Membuat 20 angka
        for (let i = 1; i <= 20; i++) {
            const button = document.createElement("button");

            button.className = "number";
            button.textContent = i;

            button.onclick = function () {
                checkNumber(i, button);
            };

            container.appendChild(button);
        }
    }

    function checkNumber(number, button) {
        if (gameOver) return;

        if (number === secretNumber) {
            gameOver = true;

            score += 10;

            document.getElementById("score").textContent =
                score;

            button.classList.add("revealed");

            document.getElementById("result").innerHTML =
                "🎉 BENAR! Angka tersembunyinya adalah " +
                secretNumber + "!";

            playSound("win");

            speak(
                "Hebat! Benar! Angka tersembunyinya adalah " +
                secretNumber
            );

            // Tampilkan angka rahasia
            document.querySelectorAll(".number")
                .forEach(btn => {
                    if (parseInt(btn.textContent) === secretNumber) {
                        btn.classList.add("revealed");
                    }
                });

        } else {
            button.classList.add("wrong");
            button.disabled = true;

            document.getElementById("result").innerHTML =
                "❌ Salah! Coba angka lainnya.";

            playSound("lose");

            speak("Salah. Coba lagi.");
        }
    }

    // Mulai game
    newGame();
</script>

</body>
</html>
Game Source: Tebak Angka Tersembunyi

Creator: LuckyEagle56
Libraries: none
Complexity: complex (291 lines, 6.6 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: tebak-angka-tersembunyi-luckyeagle56" to link back to the original. Then publish at arcadelab.ai/publish.