Pertemuan 7

Event, Click, Keyboard Input, dan Controls

Menggunakan event untuk menangani input pemain: click, keydown, keyup, arrow keys, dan WASD.

Tujuan Pembelajaran

Menggunakan addEventListener.

Menangani keydown, keyup, dan click.

Membuat movement dan button action.

Button Click untuk Action

              
                const attackButton = document.getElementById("attack"); attackButton.addEventListener("click", () => { enemyHealth -= 10; console.log("Attack!"); });

Keyboard Controls

              
                document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") playerX -= 5; if (event.key === "ArrowRight") playerX += 5; if (event.key === "ArrowUp") playerY -= 5; if (event.key === "ArrowDown") playerY += 5; });

Arrow Keys atau WASD

              
                const keys = {}; document.addEventListener("keydown", (event) => { keys[event.key] = true; }); document.addEventListener("keyup", (event) => { keys[event.key] = false; });

Controls Flow

Input Event

>

Update playerX/Y

>

Render position

Activity

Buat button jump atau attack.
Tambahkan click event.
Tambahkan keyboard controls.
Gerakkan player dengan arrow keys atau WASD.

Mini Quiz

Method JavaScript untuk memasang event listener adalah...

Output Pertemuan

Working game controls.