Game "Jangan Klik!" – Proyek Seru Pakai HTML, CSS, dan JavaScrip

1. Pembuka: Jangan Klik Tapi Malah Diklik 😆

Pernah nggak kamu melihat tombol yang tulisannya “Jangan Klik”? Nah, justru karena dilarang itulah kita malah penasaran buat nekan! Dari ide sederhana itu, kita bikin game lucu bernama "Jangan Klik!" — sebuah game mini berbasis web yang dibuat hanya dengan HTML, CSS, dan JavaScript.

Meski terlihat sepele, game ini punya tampilan gelap modern, warna neon menyala, dan animasi tombol yang bisa meledak kalau kamu terlalu sering klik.

2. Manfaat & Kegunaan Proyek

Game ini cocok banget buat kamu yang:

Baru belajar HTML, CSS, dan JavaScript

Ingin mencoba interaksi tombol dan efek animasi

Butuh proyek lucu untuk dipamerkan ke teman

Mau belajar cara menangani event JavaScript dan efek visual di CSS

Dengan proyek ini, kamu bisa belajar:

✅ Event handling di JavaScript

✅ Animasi CSS seperti shake, pulse, dan explode

✅ Desain UI neon gelap yang menarik

3. Penjelasan Kode Lengkap

💡 A. Kode HTML

File index.html berisi struktur dasar halaman:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Jangan Klik!</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="container">
    <h1>⚠️ Jangan Klik Tombol Ini ⚠️</h1>
    <button id="dangerBtn">JANGAN KLIK!</button>
    <p id="message"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

Penjelasan:

h1 menampilkan judul game

button adalah tombol yang dilarang diklik

p akan menampilkan pesan reaksi setelah tombol ditekan

link dan script digunakan untuk menghubungkan ke file CSS dan JS

🎨 B. Kode CSS

File style.css mengatur tampilan visual game, termasuk animasi dan efek warna neon:

body {
  background-color: #0f0f0f;
  font-family: 'Segoe UI', sans-serif;
  color: #ffffff;
  text-align: center;
  padding-top: 10vh;
  margin: 0;
  overflow: hidden;
}

.container {
  animation: neonGlow 4s infinite alternate;
}

h1 {
  font-size: 2.5rem;
  color: #ff00ff;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  animation: pulseText 2s infinite;
}

#dangerBtn {
  background: black;
  border: 3px solid #ff0000;
  padding: 20px 40px;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  border-radius: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px red;
  animation: flicker 1.5s infinite alternate;
}

#dangerBtn:hover {
  background: #ff0000;
  color: #000;
  box-shadow: 0 0 25px #ff0000, 0 0 40px #ff0000;
  transform: scale(1.1);
}

#dangerBtn.explode {
  animation: explode 0.5s forwards;
}

#dangerBtn.shake {
  animation: shake 0.4s;
}

#message {
  margin-top: 30px;
  font-size: 1.8rem;
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
  animation: pulseText 2s infinite alternate;
}

@keyframes neonGlow {
  from {
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
  }
  to {
    text-shadow: 0 0 20px #00ffff, 0 0 30px #ff00ff;
  }
}

@keyframes flicker {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes pulseText {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); color: #ffcc00; }
  100% { transform: scale(1); }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-2px, 2px) rotate(-1deg); }
  50% { transform: translate(2px, -2px) rotate(1deg); }
  75% { transform: translate(-1px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -1px) rotate(-1deg); }
}

@keyframes explode {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(0); opacity: 0; }
}

Penjelasan:

Efek neon glow untuk teks dan tombol

Tombol punya animasi flicker dan bisa shake saat ditekan

Kalau terlalu banyak diklik, tombol akan meledak/menghilang

⚙️ C. Kode JavaScript

File script.js berisi logika interaksi tombol:

const button = document.getElementById('dangerBtn');
const message = document.getElementById('message');
let clickCount = 0;

button.addEventListener('click', () => {
  clickCount++;

  if (clickCount === 1) {
    message.textContent = 'Aku bilang JANGAN!';
    shakeButton();
  } else if (clickCount === 2) {
    message.textContent = 'Serius, jangan ditekan terus!';
    shakeButton();
  } else if (clickCount === 3) {
    message.textContent = 'Kenapa sih ngeyel? 😤';
    shakeButton();
  } else if (clickCount === 4) {
    message.textContent = 'Udah ya, cukup!';
    shakeButton();
  } else {
    message.innerHTML = '💥 BOOM! Kamu ngeklik terus! 💥';
    button.classList.add('explode');

    setTimeout(() => {
      button.disabled = true;
      button.style.visibility = 'hidden';
    }, 500);
  }
});

function shakeButton() {
  button.classList.add('shake');
  setTimeout(() => {
    button.classList.remove('shake');
  }, 400);
}

Penjelasan:

Setiap klik akan menambah clickCount

Teks di bawah tombol akan berubah sesuai jumlah klik

Setelah klik ke-5, tombol akan meledak dan menghilang

Penutup

Proyek ini adalah contoh kecil betapa menyenangkannya belajar coding!

Kita bisa mulai dari ide simpel seperti tombol dilarang diklik, lalu dikembangkan dengan animasi dan interaksi yang bikin orang tertawa atau terkejut.

Kamu bisa kembangkan lagi game ini, misalnya:

Tambahkan skor atau nyawa

Tambahkan suara efek

Atau bikin level-level lucu lainnya

Selamat ngoding dan selamat jahil! 😁

CandraAndiP

Cari Blog Ini