🌟 Game Kombinasi Tombol Keyboard – Bikinan Sendiri Pakai HTML, CSS, dan JavaScript

 




1. Pembuka: Mainan Sederhana Buat Cek Tombol!

Pernah penasaran kombinasi tombol apa aja yang kamu tekan di keyboard? Misalnya waktu kamu main game, atau belajar shortcut di laptop? Nah, di video kali ini, aku bikin game sederhana yang bisa mendeteksi kombinasi tombol keyboard secara real-time.

Kita bakal buatnya pakai HTML, CSS, dan JavaScript, dan pastinya tampilannya pakai mode gelap biar makin estetik dan enak dilihat.

2. Apa Manfaat Game Ini?

Game kecil ini bisa kamu pakai untuk:

  • Belajar cara kerja event keyboard di JavaScript.
  • Mengetes apakah kombinasi tombol tertentu terdeteksi atau tidak.
  • Menjadi alat bantu latihan shortcut keyboard.
  • Dan tentu saja, seru-seruan sambil belajar coding!

3. Penjelasan Kode Secara Bertahap

Langsung aja kita bahas satu-satu kodenya ya!

🧱 Kode HTML (Struktur Dasar)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Kombinasi Tombol Keyboard</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Kombinasi Tombol Keyboard</h1>
    <div id="output" class="output">Tekan tombol keyboard...</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Penjelasan:

  • <link rel="stylesheet" href="style.css" /> menyambungkan file CSS eksternal.
  • <script src="script.js"></script> menyambungkan file JavaScript eksternal.
  • <div id="output"> adalah tempat hasil kombinasi tombol akan ditampilkan.

🎨 Kode CSS (Tampilan Mode Gelap)

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

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

.output {
  margin-top: 20px;
  font-size: 1.5rem;
  word-wrap: break-word;
  background-color: #2a2a2a;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #333;
}

Penjelasan:

  • Menggunakan warna gelap di body dan container untuk mode malam yang nyaman di mata.
  • Efek box-shadow di container membuat tampilannya lebih modern.
  • output punya padding dan border agar hasil tombol yang ditekan terlihat jelas.

⚙️ Kode JavaScript (Logika Kombinasi Tombol)

const output = document.getElementById("output");
const pressedKeys = new Set();

function updateOutput() {
  output.textContent = [...pressedKeys].join(" + ") || "Tekan tombol keyboard...";
}

document.addEventListener("keydown", (e) => {
  pressedKeys.add(e.key);
  updateOutput();
});

document.addEventListener("keyup", (e) => {
  pressedKeys.delete(e.key);
  updateOutput();
});

Penjelasan:

  • Kita pakai Set() agar tidak ada duplikat tombol yang tersimpan.
  • Saat tombol ditekan (keydown), kita masukkan ke dalam Set.
  • Saat dilepas (keyup), kita keluarkan dari Set.
  • updateOutput() akan memperbarui teks sesuai tombol yang aktif.

Penutup

Game ini bisa jadi bahan belajar yang asik untuk kamu yang baru mulai ngoding dengan JavaScript. Gak cuma berguna, tampilannya juga cakep banget dengan mode gelap!

Kalau kamu suka project seperti ini, jangan lupa subscribe, like, dan cek kode lengkapnya nanti ya!

Komentar

Posting Komentar