Bikin Game Klik Cepat dengan HTML, CSS, dan JavaScript — Mode Gelap, Tampilan Keren!





1. Selamat Datang di Proyek Web Seru!

Pernah kepikiran bikin game sendiri cuma pakai HTML, CSS, dan JavaScript? Di artikel ini, kita bakal bareng-bareng bikin game klik cepat dengan tampilan mode gelap yang modern dan animasi tombol yang responsif.

Cocok banget buat kamu yang:

  • Lagi belajar web development
  • Mau bikin proyek kecil tapi keren
  • Suka tantangan: klik sebanyak mungkin dalam 10 detik!

2. Kenapa Proyek Ini Keren?

✨ Mudah dipahami — Nggak perlu framework, cukup HTML, CSS, dan JS standar.

🎮 Interaktif — Ada timer, skor, dan tombol klik yang berubah otomatis.

🌑 Mode Gelap Modern — Tampilan nyaman di mata, cocok buat era dark mode.

🔁 Bisa dimulai ulang — Setelah selesai, tombol berubah jadi "Main Lagi".

3. Yuk, Bahas Kodenya Satu per Satu!

🧱 HTML — Struktur Dasar Game

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Game Klik Cepat</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="container">
    <h1>💥 Game Klik Cepat</h1>
    <p id="timer">Waktu: 10 detik</p>
    <p id="score">Skor: 0</p>
    <button id="clickBtn">Klik Aku!</button>
    <p id="message"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

Penjelasan:

  • Menggunakan elemen <h1>, <p>, dan <button> untuk membuat tampilan sederhana.
  • id="clickBtn" dipakai untuk mendeteksi tombol klik via JavaScript.
  • File CSS dan JS dipisahkan supaya rapi dan mudah dikelola.

🎨 CSS — Tampilan Mode Gelap yang Kece

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #121212;
  color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  text-align: center;
  background-color: #1e1e1e;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  max-width: 400px;
  width: 90%;
}

h1 {
  margin-bottom: 1rem;
  color: #00bcd4;
}

#timer, #score {
  font-size: 1.3rem;
  margin: 0.5rem 0;
}

#clickBtn {
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  background-color: #00bcd4;
  color: #fff;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: transform 0.1s ease;
}

#clickBtn:active {
  transform: scale(0.95);
  background-color: #00a5b5;
}

#message {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #ffeb3b;
}

Penjelasan:

  • Menggunakan warna gelap di latar belakang dan warna mencolok untuk tombol agar menarik.
  • Animasi :active membuat tombol terasa lebih hidup saat diklik.
  • Semua elemen difokuskan ke tengah layar dengan flexbox.

🧠 JavaScript — Logika Game dan Interaksinya

let score = 0;
let timeLeft = 10;
let isPlaying = false;
const clickBtn = document.getElementById("clickBtn");
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");
const message = document.getElementById("message");

clickBtn.addEventListener("click", () => {
  if (!isPlaying) {
    startGame();
    return;
  }

  if (timeLeft > 0) {
    score++;
    scoreDisplay.textContent = `Skor: ${score}`;
  }
});

function startGame() {
  isPlaying = true;
  score = 0;
  timeLeft = 10;
  scoreDisplay.textContent = "Skor: 0";
  timerDisplay.textContent = `Waktu: ${timeLeft} detik`;
  message.textContent = "";
  clickBtn.textContent = "Klik Aku!";

  const countdown = setInterval(() => {
    timeLeft--;
    timerDisplay.textContent = `Waktu: ${timeLeft} detik`;

    if (timeLeft <= 0) {
      clearInterval(countdown);
      isPlaying = false;
      clickBtn.textContent = "Main Lagi 🔁";
      message.textContent = `Waktu habis! Kamu klik sebanyak ${score} kali.`;
    }
  }, 1000);
}

Penjelasan:

  • score dan timeLeft menyimpan nilai klik dan waktu tersisa.
  • Saat waktu habis, tombol akan mati selama 2 detik sebelum bisa diklik lagi.
  • Logika isPlaying dan cooldown mencegah spam klik yang bisa bikin game error.

Penutup

Game ini bisa jadi latihan yang seru dan interaktif buat kamu yang lagi belajar web development. Nggak cuma belajar sintaks, tapi juga memahami logika alur permainan, event handling, dan desain antarmuka.

Mau dikembangkan lebih lanjut? Kamu bisa:

  • Tambah suara efek klik
  • Simpan skor tertinggi
  • Ganti warna tema sendiri

Selamat ngoding dan... klik secepat mungkin! 💥😄

Komentar

Posting Komentar