HTML5 Canvas: Menangani Input Pemain

Sebuah game tanpa input kendali pemain tidak lebih dari sekadar pemutaran video animasi. Agar ia bisa secara resmi divalidasi menjadi game yang interaktif, kita memerlukan izin perintah supaya para pemain dapat ikut menavigasi elemen layar. Mari pelajari cara tak terkalahkan dalam merekam ketukan interaksi tombol Keyboard maupun sasaran Mouse!

1. Cara Profesional Menangani Tombol Keyboard

Satu kesalahan besar paling fatal mayoritas pemula adalah langsung "menempelkan" rumus matematika penambahan jarak gerakan berjalan (contoh iseng misal: player.y -= 5) dicangkok mentah bulat layaknya teks di dalam fungsi interupsi keydown. Efek buruknya? Gerakan tokoh protagonis buatan Anda akan nge-lag tersentak kaku bagai patah-pahat menunda, didera sistem sistem Operasi OS pengetik keyboard komputer.

Teknik kerahasiaan pabrik dari Industri / Produsen Game Standart Dunia adalah dengan merubah pendekatan itu; mendata riwayat catatan jejak "Tuts apa sajakah yang berstatus Sedang-Digenggam oleh Tekanan Jari Pemain SAAT INI?". Data set status tersebut dihimpun sebagai Object di RAM, dan proses pemindahan langkah diserahkan langsung ke Game Loop beruntun setiap detiknya (requestAnimationFrame) biar pergerakan terlihat lumer semulus sutra.

Langkah 1: Siapkan Keranjang Object Status Tombol

const tombolArah = {
  ArrowUp: false,    // Tombol Atas 
  ArrowDown: false,  // Tombol Bawah
  ArrowLeft: false,  // Tombol Kiri
  ArrowRight: false  // Tombol Kanan
};

Langkah 2: Event Listener Sebagai Radar Pendengar

// Kala tuas Keyboard disentuh turun di genggam jari
window.addEventListener('keydown', (e) => {
  if (tombolArah.hasOwnProperty(e.code)) {
    tombolArah[e.code] = true; // Setir gas mesin berstatus MENYALA (true)
  }
});

// Kala beban genggam jari cabut melepaskan kaitan dari tuasnya
window.addEventListener('keyup', (e) => {
  if (tombolArah.hasOwnProperty(e.code)) {
    tombolArah[e.code] = false; // Rem ditarik otomatis/Matikan gas pacu lari (false)
  }
});

Langkah 3: Eksekusi Suntik Masal ke Jantung Game Loop!

Mari gabungkan rumus radar tersebut di mesin "Game Loop Pembaruan Frame" (materi seri kanvas terakhir yang kita pelajari tempo lampau)!

let player = { x: 100, y: 100, size: 30, speed: 5 };

function pembaruanGame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Hukum wajib No.1: Sapu layarnya!

  // UPDATE LOGIKA GERAKAN SUPREME 60 FPS YANG SUPER LICIN :
  // Dicek kondisi radarnya, dan paksakan digeser terus menerus setiap satu hela Frame berjalan!
  if (tombolArah.ArrowUp) player.y -= player.speed;
  if (tombolArah.ArrowDown) player.y += player.speed;
  if (tombolArah.ArrowLeft) player.x -= player.speed;
  if (tombolArah.ArrowRight) player.x += player.speed;

  // Tahap Cetak Render Kotak Karakter Pemain di pos terbaru.
  ctx.fillStyle = 'blue';
  ctx.fillRect(player.x, player.y, player.size, player.size);

  requestAnimationFrame(pembaruanGame);
}

2. Kalkulasi Koordinat Bidikan (Tracking Target Mouse)

Pengejaran koordinat kursor sentuhan ujung Tikus (Mouse) adalah kunci nyawa bagi genre peluru senapan (Shooting crosshairs), bongkar pasang Puzzle layaknya Drag And Drop, maupun elemen strategi menyorot unit (RTS).

Mengingat rumus variabel mentah bawaan browser JavaScript itu e.clientX yang hanya melaporkan perhitungan asal mula sentimeter dari pojok tepian kaca browser, kita DITUNTUT WAJIB mutlak memotong tepian garis bingkai kanvas (Border/Margin) untuk mengail koordinat murni dari arena dalam Canvas.

let kordinatPusatMouse = { x: 0, y: 0 };

// Taruh radar di seluruh body Kanvas perihal pergeseran sekecil apapun
canvas.addEventListener('mousemove', (e) => {
  // Bantuan Penggaris Gaib JavaScript menilik besaran bingkai kanvas
  const ukuranBingkaiGame = canvas.getBoundingClientRect(); 
  
  // Penggabungan titik selisih, tembus menuju arena titik Asli!
  kordinatPusatMouse.x = e.clientX - ukuranBingkaiGame.left;
  kordinatPusatMouse.y = e.clientY - ukuranBingkaiGame.top;
});

// Ingin mekanisme melepaskan peluru ketika Jari nge-KLIK kiri kursor senapannya?
canvas.addEventListener('click', (e) => {
  console.log(`DARR! Pistol meledak mencuat memuntahkan peluru pelacak tepat ke kordinat Sasaran Musuh X: ${kordinatPusatMouse.x}, Y: ${kordinatPusatMouse.y}`);
});

Dan dengan rumus senjata tersebut di tangan, impian merakit gambar logo sasaran Tembak atau siluet objek buatan memanjang (Custom Cursor Image), sekarang otomatis terpacaki mengekor mengikuti di setiap sumbu lari kordinatPusatMouse.x !