game susun bintang

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Susun Bintang</title>
    <!-- Link Font Awesome untuk ikon bintang -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: monospace;
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
        .fa-star {
            color: gold;
        }
        .game-container {
            margin-top: 20px;
        }
        input[type="number"] {
            padding: 5px;
            font-size: 16px;
            margin-right: 10px;
        }
        button {
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
        }
        .message {
            font-size: 20px;
            color: green;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h1>Game Susun Bintang</h1>
    <div class="game-container">
        <p id="challengeText">Tantangan: Susun bintang sebanyak <span id="levelStars">1</span> baris</p>
        <div>
            <input type="number" id="rowInput" min="1" max="10" value="1">
            <button onclick="submitPattern()">Submit</button>
        </div>
        <p class="message" id="gameMessage"></p>
    </div>
    <pre id="output"></pre>
    <p>Level: <span id="level">1</span></p>
    <p>Skor: <span id="score">0</span></p>

    <script>
        let currentLevel = 1;
        let score = 0;
        const maxLevel = 5;

        function generatePattern(rows) {
            let output = "";
            for (let i = 1; i <= rows; i++) {
                for (let k = 1; k <= rows - i; k++) {
                    output += "&nbsp;"; // spasi menggunakan &nbsp;
                }
                for (let j = 1; j <= i; j++) {
                    output += '<i class="fas fa-star"></i> ';
                }
                output += "<br>"; // Pindah ke baris berikutnya
            }
            return output;
        }

        function submitPattern() {
            const userRows = document.getElementById("rowInput").value;
            const challengeRows = currentLevel; // Sesuaikan tantangan sesuai level

            if (userRows == challengeRows) {
                document.getElementById("output").innerHTML = generatePattern(userRows);
                score += 10; // Tambahkan poin jika berhasil
                document.getElementById("score").textContent = score;
                document.getElementById("gameMessage").textContent = "Benar! Lanjut ke level berikutnya.";
                currentLevel++;

                if (currentLevel > maxLevel) {
                    document.getElementById("gameMessage").textContent = "Selamat! Anda menyelesaikan semua level!";
                    resetGame();
                } else {
                    updateChallenge();
                }
            } else {
                document.getElementById("gameMessage").textContent = "Salah! Coba lagi.";
            }
        }

        function updateChallenge() {
            document.getElementById("level").textContent = currentLevel;
            document.getElementById("levelStars").textContent = currentLevel;
            document.getElementById("rowInput").value = currentLevel;
        }

        function resetGame() {
            currentLevel = 1;
            score = 0;
            document.getElementById("score").textContent = score;
            document.getElementById("level").textContent = currentLevel;
            updateChallenge();
        }

        // Set tantangan pertama kali
        updateChallenge();
    </script>

</body>
</html>