HTML5 Canvas: Fisika Tingkat Lanjut dan Hitbox Kolisi

Menggambar karakter yang bisa melompat dan jatuh karena gravitasi memang mengagumkan, tapi game takkan hidup sampai ada "interaksi fisik". Saat kaki Jagoan menendang bola, bola harus meroket mental! Saat bola jatuh ke aspal lapangan, ia tak boleh langsung berhenti kaku—ia seharusnya memantul (bouncing), lalu pelan-pelan menggelinding mereda karena tergesek rumput lapangan.

Di modul ini, kita akan membongkar tuntas rahasia Hitbox (Deteksi Layar Sentuh Tabrakan) dan Fisika Objek Mati yang cukup kompleks namun dijelaskan secara sederhana!

1. Jantung Tabrakan 2D: AABB Collision

Pada Game Engine 2D manapun, kita nyaris TIDAK PERNAH menghitung tabrakan gambar pixel-per-pixel karena itu akan menyiksa prosesor (terlalu berat). Sebagai gantinya, bayangkan semua gambar karakter dikurung oleh kotak tak terlihat (Transparan) yang kita sebut Hitbox / Bounding Box.

Algoritma matematika sejuta umat yang sering dipakai untuk membaca apakah dua Hitbox sedang saling tindih menyentuh disebut AABB (Axis-Aligned Bounding Box). Rumusnya sangat sederhana, mengecek 4 batas batas ruang:

// Fungsi rahasia mengembalikan nilai Bekerja(TRUE) jika Kotak 1 & 2 bersentuhan !
function bacaTabrakanAABB(karakter, objekBola) {
  // Algoritmanya mengecek apakah TIDAK MUNGKIN mereka bertabrakan terlebih dahulu
  return (
    karakter.x < objekBola.x + objekBola.width &&   // Batas Kiri Pemain nabrak Kanan Bola
    karakter.x + karakter.width > objekBola.x &&   // Batas Kanan Pemain nabrak Kiri Bola
    karakter.y < objekBola.y + objekBola.height &&  // Batas Atas Pemain nabrak Bawah Bola
    karakter.y + karakter.height > objekBola.y     // Batas Bawah Pemain menembus Atas Bola
  );
}

Apabila KEEMPAT syarat logika di atas terpenuhi semuanya dalam satu frame, dijamin pasti kedua objek itu sedang bertubrukan hebat (Collision)!

2. Fisika Lanjutan: Benda Mati (Bola)

Apabila Anda meracik Game Olahraga atau Action, peluru pelontar / bolanya harus terasa berbobot nyata dan mematuhi fisika bumi sejati. Sebuah bola cerdas butuh dua DNA Fisika baru:

1. Daya Pegas Pantul (Bounce / Restitution): Saat menabrak aspal keras, alih-alih setop mendadak nilannya (dy=0), ia malah memutar arah berbalik angkasa secara negatif (-dy). Hanya saja tiap memantul kekuatannya diskon / dipotong energi jatuhnya sehingga kelamaan hilang dan mati.
2. Gaya Gesek (Friction / Drag): Tarikan kasar dari pasir lapangan rumput yang menyiksa laju kecepatan dx. Makin menggelinding pelan memelan, lalu berhentih total.

class BolaFisika {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 50;  // Patokan Lebar Kotak Hitbox Bola
    this.height = 50; // Tinggi Kotak Bola
    
    // Status Momentum Otot Gerakan
    this.dx = 0; // Tarikan maju-mundur Horizontal
    this.dy = 0; // Daya jatuh/terbang Vertikal
    this.gravity = 0.5; // Berat Bola standar ideal
    
    // DUA RESEP RAHASIA FISIKA BUMI:
    this.bounce = -0.7; // Tiap nabrak bumi, berbalik angkasa TAPI kehilangan 30% kekencangannya!
    this.friction = 0.98; // Tiap frame berlari, kecepatan dx-nya dipangkas aus disikon 2% terhalang rumput!
  }

  update(groundLevel) {
    // 1. Seret bola oleh Gravitasi per frame
    this.dy += this.gravity;
    
    // 2. Potong tenaga Lari Horizontal dgn Paksaan Daya Gesek Rumput
    this.dx *= this.friction; 

    // Jika tenaganya sudah teramat sangat pelan (mendekati cacat), matikan total kemudi rodanya!
    if (Math.abs(this.dx) < 0.1) this.dx = 0;

    // 3. Aplikasikan penambahan titik kordinat riil bola ini berlayar
    this.x += this.dx;
    this.y += this.dy;

    // 4. LOGIKA PANTULAN (Kolisi menghujam lantai bawah Bumi!)
    if (this.y + this.height >= groundLevel) {
      this.y = groundLevel - this.height; // Tahan di tepi aspal daratan, cegah bolanya nyungsep tembus bumi
      
      // Cuma kasi izin mental jika masih meluncur berkecepatan tinggi!
      // (Bila sudah lemah pantulannya dibawah 1 px, berhentikan bolanya istirahat menapas di tanah)
      if (this.dy > 1) {
        this.dy *= this.bounce; // Balikkan arah tenaga dy ke angkasa (- minus) lalu diskon energi 30% pakai bounce! 
      } else {
        this.dy = 0; // Biarkan si Bola Istirahat sempurna pulas di rerumputan!
      }
    }
  }
}

3. Moment of Impact! (Transfer Energi Tendangan Lurus)

Bagaimana merekatkan gabungan Karakter Utama penendang tersebut dengan Logika Kolisi Bola pintar ini? Mudah saja! Di dalam rotasi Game Loop, kita gunakan Matematika sensor Hitbox AABB diatas guna membaca adegan jika Pemain Anda secara kulit menyentuh Hitbox Bola!

Dan Bila bersentuhan, DAN Si Pemain rupanya kebetulan sedang menekan Tombol "KICK / TENDANG", Kita suntikkan paksa aliran energi Daya Ledak tinggi ke Nadi dx maupun dy peluru Bola tersebut seolah roket terbang!

// Di rongga terdalam RequestAnimationFrame / Game Loop Anda...

// 1. Eksekusi Logika Luruh Entitas Dulu!
player.update();
bola.update(canvas.height - 90); // 90 adalah patokan tebal lantai

// 2. Radar Deteksi Tabrakan Fisik Dinyalakan (AABB System)
if (bacaTabrakanAABB(player, bola)) {
  
  // Oh, ternyata Hitbox bersentuhan, Apakah sang Pemain tepat bertepatan menyalakan status TEBASAN ANIMASI TENDANG(KICK)?
  if (player.state === "Kick") {
    
    // BOOOM!!! Transfer Energi rahang luar biasa kedalam Jasad Si Bola
    // Tembak mental ke Angkasa jauh ke atas (- Minus Besar)!
    bola.dy = -15; 
    
    // Tembakan arah bola berdasarkan kubu si Pemain!
    if (player.position === "left") {
      bola.dx = 20; // Jika dia dari markas Kiri, Dorong ledakan Kecepatan bola X melancip jauh ke arah Kanan Markas Musuh!
    } else {
      bola.dx = -20; // Jika dia dari Kanan, dorong Tembakan Rudal ke wilayah Kiri Positif!
    }
  } else {
    // Apabila si pemain sekonyong-konyongnya jalan menabrak biasa gawang Bola secara damai?
    // Boleh digradasi sedikit seolah "Menggiring (Dribble) Bola"
    bola.dx = player.dx * 1.2; // Tambahan daya gesek dikit ke bola dari speed pelan kaki!
  }
}

Melengkapi ketiga sistem tersebut, Tokoh dan Objek properti Game Anda tak lagi hampa saling menembus raba raga sebagai gumpalan bayang hantu! Anda berhasil mengakali penyematan Hukum Kolisi Gravitasi Game Engine Fisika (Physics System Simulator) kelas wahid langsung di dalam barisan Canvas Web Platform buatan mandiri murni anda tersebut!