🌑 Aplikasi Batu Gunting Kertas Mode Gelap dengan Efek Menyala

Batu Gunting Kertas adalah permainan klasik yang seru dan sederhana. Kini, kamu bisa memainkannya langsung di browser melalui aplikasi web ringan yang dibuat dengan HTML, CSS, dan JavaScript. Desainnya elegan dengan mode gelap dan tombol menyala saat disentuh.

🎮 Cara Bermain

Pilih salah satu: Batu, Gunting, atau Kertas.

Komputer akan memilih secara acak.

Hasil pertandingan akan ditampilkan: Menang, Kalah, atau Seri.

🧩 Kode Aplikasi

📄 `index.html`

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Batu Gunting Kertas</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Batu Gunting Kertas</h1>
    <div class="choices">
      <button class="btn" data-choice="batu">
        <img src="rock.png" alt="Batu" />
      </button>
      <button class="btn" data-choice="gunting">
        <img src="scissors.png" alt="Gunting" />
      </button>
      <button class="btn" data-choice="kertas">
        <img src="paper.png" alt="Kertas" />
      </button>
    </div>
    <div class="result">
      <p>Komputer memilih: <span id="computer-choice">-</span></p>
      <p>Hasil: <span id="result-text">Pilih untuk mulai!</span></p>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 `style.css`

body {
  background-color: #0d1117;
  color: #c9d1d9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  padding: 2rem;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #58a6ff;
  text-shadow: 0 0 10px #58a6ff;
}

.choices {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}

.btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #58a6ff;
  background-color: #161b22;
  box-shadow: 0 0 10px #58a6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px #58a6ff, 0 0 40px #58a6ff;
}

.btn img {
  width: 60%;
  height: auto;
  filter: drop-shadow(0 0 5px #58a6ff);
}

.result {
  margin-top: 2rem;
  font-size: 1.2rem;
}

#result-text {
  font-weight: bold;
  color: #ffa657;
  text-shadow: 0 0 10px #ffa657;
}

⚙️ `script.js`

const buttons = document.querySelectorAll(".btn");
const resultText = document.getElementById("result-text");
const computerChoiceText = document.getElementById("computer-choice");

const choices = ["batu", "gunting", "kertas"];

buttons.forEach(button => {
  button.addEventListener("click", () => {
    const playerChoice = button.getAttribute("data-choice");
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    computerChoiceText.textContent = computerChoice;

    let result = "";

    if (playerChoice === computerChoice) {
      result = "Seri!";
    } else if (
      (playerChoice === "batu" && computerChoice === "gunting") ||
      (playerChoice === "gunting" && computerChoice === "kertas") ||
      (playerChoice === "kertas" && computerChoice === "batu")
    ) {
      result = "Kamu Menang! 🎉";
    } else {
      result = "Kamu Kalah 😢";
    }

    resultText.textContent = result;
  });
});

📌 Link Gambar Ikon

Berikut adalah gambar ikon yang digunakan dalam aplikasi:

Pilihan	Link Gambar	Sumber
Batu	Rock PNG	Icons8
Gunting	Scissors PNG	Icons8
Kertas	Paper PNG	Icons8

🚀 Penutup

Aplikasi ini merupakan contoh yang sangat bagus untuk belajar:

Struktur HTML sederhana

Desain visual menarik dengan efek glow

Logika interaktif menggunakan JavaScript

Cocok untuk dijalankan langsung di browser. Kamu juga bisa mengembangkan lebih lanjut dengan menambahkan skor, animasi, atau suara.

CandraAndiP

Cari Blog Ini