Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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 += " "; // spasi menggunakan
- }
- 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement