Javascript Game #9: Jurus #7 - Membaca Gerakan Musuh (Event Listener)

Javascript Game #9:
Jurus #7: Membaca Gerakan Musuh (Event Listener)

😂 Joke pembuka: "Event listener itu kayak satpam sekolah. Dia selalu waspada: 'Awas, ada yang klik! Awas, ada keyboard dipencet!'"

Hai para calon game developer! Selama ini kita sudah bisa bikin kotak ajaib (variabel), mesin pintar (fungsi), dan daftar sakti (array). Tapi... game kita masih bisu dan tuli. Dia nggak tahu kalau kamu klik atau tekan keyboard. Sekarang kita akan kasih game kita TELINGA dan KULIT biar bisa merasakan sentuhanmu! Itu namanya EVENT LISTENER.

👂

Telinga

Event listener itu kayak telinga yang selalu mendengar apa yang terjadi. Kalau ada suara (klik/tekan), dia lapor ke otak (JavaScript).

📡

Radar

Seperti radar di game, terus memantau gerakan musuh atau pemain. Begitu ada gerakan, langsung kasih sinyal.

🔔

Bel Sekolah

Kalau bel dipencet, semua orang tahu. Event listener menunggu "bel" (klik/tekan) lalu menjalankan perintah.

CARA PASANG EVENT LISTENER

Kita punya banyak jenis event: click (klik), keydown (tekan keyboard), mousemove (gerak mouse), dll. Cara pakainya: pilih elemen HTML, lalu pasang addEventListener.

// Ambil elemen tombol
let tombol = document.getElementById("myButton");

// Pasang event listener click
tombol.addEventListener("click", function() {
  alert("Tombol diklik! Hebat!");
});

Fungsi di dalam addEventListener itu adalah apa yang terjadi kalau eventnya dipicu.

EVENT CLICK (KLIK)

Paling sering dipakai. Setiap kali kamu klik sesuatu, JavaScript bisa menjalankan perintah.

// Contoh klik pada tombol
<button id="sapaBtn">Sapa Aku</button>

<script>
document.getElementById("sapaBtn").addEventListener("click", function() {
  alert("Halo! Selamat datang di game!");
});
</script>

EVENT KEYBOARD (TEKAN TOMBOL)

Buat game yang pakai keyboard (panah, WASD). Event keydown dan keyup.

document.addEventListener("keydown", function(event) {
  console.log("Kamu menekan tombol: " + event.key);
  if (event.key === "ArrowRight") {
    console.log("➡️ Gerak ke kanan!");
  }
});

😂 Joke: "Event listener keyboard itu kayak guru yang marah kalau kamu main HP di kelas. Dia selalu dengar setiap ketukan!"

⚡ LABORATORIUM EVENT LISTENER ⚡

Coba interaksi di bawah ini! Buka console (F12) juga ya.

Hasil event akan muncul di sini...

Coba juga: Tekan tombol keyboard (panah, spasi, huruf) dan lihat hasilnya di bawah!

Keyboard: belum ada tombol ditekan

CONTOH DALAM GAME: GERAKIN KOTAK DENGAN KEYBOARD

Ini contoh sederhana game di mana kotak bisa digerakkan dengan tombol panah. Coba klik area di bawah, lalu tekan panah kiri/kanan.

Klik di sini dulu, lalu tekan panah kiri/kanan

🤖

😂 Joke: "Kenapa event listener nggak pernah ngantuk? Karena dia selalu on terus!"

EVENT LAINNYA

Masih banyak event seru: mousemove (posisi mouse), contextmenu (klik kanan), resize (ubah ukuran jendela). Bisa dicoba di console.

// Lacak posisi mouse
document.addEventListener("mousemove", function(e) {
  console.log("Mouse di: " + e.clientX + ", " + e.clientY);
});
// Hati-hati, ini bisa spam console!

MISI JAGOAN EVENT

1. Buat file HTML baru: event_ku.html.
2. Buat sebuah tombol dengan tulisan "Klik dong". Pasang event listener click yang mengubah teks tombol menjadi "Udah diklik!"
3. Buat sebuah kotak berwarna (div). Pasang event listener mouseenter dan mouseleave yang mengubah warna kotak (misal merah saat mouse masuk, biru saat keluar).
4. Buat input text, pasang event listener input yang menampilkan teks yang diketik di bawah input secara real-time.
5. (Tantangan) Buat karakter sederhana (emoji) yang bisa digerakkan dengan tombol WASD.

📸 Screenshot hasil karya-mu, tunjukkan ke guru atau orang tua!

📝 RANGKUMAN SERU

• Event listener membuat JavaScript bisa "mendengar" aksi pengguna.
• Pasang dengan addEventListener("nama-event", fungsi).
• Event umum: click, dblclick, mouseenter, mouseleave, keydown, input.
• Fungsi di dalamnya akan dijalankan setiap kali event terjadi.
• Event keyboard bisa membaca tombol yang ditekan lewat event.key.
• Dengan event listener, game kita jadi interaktif dan seru!

Javascript Game #9 selesai! Besok kita mulai bikin game sungguhan: Proyek Game #1: Tebak Angka Ajaib!

Ada pertanyaan? Tulis di komentar atau tanya kakak/guru.