🎮 Cara Bikin Game Counter Dark Mode Pakai HTML, CSS, dan JavaScrip

1. Pembuka: Proyek Mini Seru Buat Kamu yang Lagi Belajar Ngoding

Pernah nggak sih kepikiran bikin mini game sendiri? Nggak usah yang ribet kayak game 3D—cukup yang simpel tapi tetap keren dan bisa dipakai buat belajar ngoding. Nah, di artikel (atau video) ini, aku bakal tunjukin gimana caranya bikin game counter sederhana dengan tampilan dark mode.

Game counter ini fungsinya buat menambah, mengurangi, dan mereset angka. Walaupun simpel, tapi cocok banget buat melatih skill dasar di HTML, CSS, dan JavaScript. Apalagi tampilannya kece banget karena pakai tema gelap!

2. Manfaat Proyek Mini Ini Buat Kamu

Kenapa harus coba bikin project kayak gini?

✅ Melatih logika dasar JavaScript

✅ Belajar bikin tampilan UI yang rapi dengan CSS

✅ Memahami struktur HTML dengan baik

✅ Bisa dikembangkan jadi game atau alat bantu game lainnya

✅ Seru dan cepat selesai!

Cocok banget buat kamu yang baru mulai belajar dan pengen langsung punya hasil nyata.

3. Penjelasan Kode Lengkap dan Bertahap

Sekarang kita masuk ke bagian utamanya—kodenya! Kita bakal bahas satu per satu mulai dari HTML, CSS, dan JavaScript-nya.

🧱 HTML – Struktur Utama Aplikasi

HTML berfungsi sebagai kerangka dasar dari game counter ini.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Game Counter</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>🎮 Game Counter</h1>
    <div id="counter">0</div>
    <div class="buttons">
      <button onclick="decrease()">➖ Kurang</button>
      <button onclick="reset()">🔁 Reset</button>
      <button onclick="increase()">➕ Tambah</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Penjelasan singkat:

Bagian <div id="counter">0</div> adalah tempat angka akan tampil.

Ada tiga tombol: Kurang, Reset, dan Tambah, masing-masing memanggil fungsi JavaScript.

CSS dan JavaScript di-link dari file terpisah.

🎨 CSS – Tampilan Gelap yang Modern

CSS ini akan bikin tampilannya jadi elegan dan gelap.

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

.container {
  text-align: center;
  background-color: #1e1e1e;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

#counter {
  font-size: 64px;
  margin: 20px 0;
  font-weight: bold;
  color: #00ffcc;
}

.buttons button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 14px 24px;
  margin: 8px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s;
}

.buttons button:hover {
  background-color: #555;
}

Penjelasan singkat:

Background gelap bikin tampilan lebih modern dan nyaman di mata.

Warna teks utama pakai aksen biru kehijauan untuk angka.

Button dibuat interaktif dengan hover effect.

🧠 JavaScript – Logika Interaktifnya

Nah, bagian ini yang bikin angka bisa berubah saat tombol diklik.

let count = 0;

function updateDisplay() {
  document.getElementById("counter").textContent = count;
}

function increase() {
  count++;
  updateDisplay();
}

function decrease() {
  count--;
  updateDisplay();
}

function reset() {
  count = 0;
  updateDisplay();
}

Penjelasan singkat:

count adalah variabel utama yang menyimpan angka.

Fungsi increase(), decrease(), dan reset() akan mengubah nilai count dan menampilkannya ulang ke elemen #counter.

🎉 Penutup: Cobain Sendiri, Yuk!

Itu dia cara membuat game counter sederhana dengan HTML, CSS, dan JavaScript. Proyek kayak gini mungkin terlihat kecil, tapi bermanfaat banget buat melatih logika dan gaya penulisan kode yang rapi.

Kamu bisa kembangkan lebih lanjut dengan:

Menambahkan suara klik

Efek animasi saat angka berubah

Bikin versi level atau tantangan skor

Selamat mencoba, dan semoga kamu makin jago ngoding!

CandraAndiP

Cari Blog Ini