HTML5 Canvas: Game Loop dan Animasi

Menggambar bentuk statis di dalam canvas hanyalah awal mulanya. Untuk membuat sebuah game, bentuk-bentuk itu harus dipaksa bergerak merespons interaksi! Di sinilah Game Loop (Siklus Game) berperan mengambil alih kemudi. Engine daur ulang inilah jantung yang berdetak di setiap game digital mana pun di jagat raya ini.

Sebuah Game Loop melakukan tiga fungsi ini secara berulang terus menerus secara stabil, tipikalnya dipanggil 60 kali per detiknya (60 Frames Per Second / FPS):

1. Bersihkan (Clear) layar kanvas secara massal dari sisa coretan frame gambar di detik sebelumnya.
2. Perbarui (Update) angka koordinat posisi variabel fisika game Anda (Contoh: Nambah nilai X geser ke kanan ujung layar).
3. Cetak Ulang (Draw) menggambar ulang wujud objek-objek tersebut di titik mendarat kordinat barunya.

1. Mengapa Menggunakan Engine requestAnimationFrame?

Di era lampau ketika browser web baru mengenal JS, programmer memodifikasi setInterval atau setTimeout paksa untuk mengkalkulasi waktu gerak animasi. Tapi di standar modern sekarang kita mewajibkan pemakaian window.requestAnimationFrame. Kenapa ini jauh lebih dihormati?

• Fungsi ini sinkronisasinya diawasi sepenuhnya oleh otak Mesin Browser demi menyamakan timing Refresh Rate spek asli monitor perangkat layar pemakainya (Misalnya menembus 120Hz/144Hz) sehingga visual pergerakan animasinya serasa mulus merayap laksana mentega.
• Animasi engine Loop akan otomatis dibekukan / di-pause sejenak ketika pemain berpindah (alt-tab) asik melakukan browsing pada laman window tab browser lain. Ini adalah trik luar biasa menghemat penarikan aliran beban Baterai laptop/RAM HP, serta meringankan panas performa CPU!

2. Sapu Bersih Pigmen Layar Keseluruhan (clearRect)

Canvas itu hakikat dasarnya persis bak papan lukis selembar coretan kertas putih yang dituangi cat berwarna secara permanen (Destructive Drawing). Oleh karenanya bilamana Anda iseng menyuntik posisi koordinat angka X/Y agar gambarnya bergeser letak kedepan secara konstan, benda tersebut malahan pasti akan meninggalkan jejak "ekor" garis warna warna kotor berkepanjangan menyeret bak kuas kuas ngebut terhulus paksa mencoreng kertasnya. Karena itu hukum kanvas; "layar lama harus dihancurkan sebelum melahirkan wujud masa depan!" menggoreskan sintak metode clearRect.

// Menghancurkan jejak keseluruhan pigmen warna layar dari kordinat titik asalnya (0,0) sebanyak luas lebar dan total tingginya 
ctx.clearRect(0, 0, canvas.width, canvas.height);

3. Merakit Game Animasi Pertama: "Bola Pemantul Tembok"

Mari kita gabungkan seluruh konsep ilmu di semua part seri dasar yang lalu untuk menciptakan Animasi Loop abadi! Kali ini ditambahkan bumbu resep deteksi benturan kiri kanan pinggiran layar dari kanvasnya.

const canvas = document.getElementById('myGameCanvas');
const ctx = canvas.getContext('2d');

// 1. Deklarasi Sifat/Karakteristik Fisik Objek 
let ball = {
  x: 50,          // Titik pusat koordinat X
  y: 150,         // Titik pusat koordinat Y  
  radius: 20,     // Lembaran jari-jari lingkaran (Radius Bulat)
  speedX: 5       // Daya lari pacu (Velocity): Menjumlah perpindahan pixel memanjang +5 pixel untuk tiap 1 Frame siklus update loop berjalan!
};

// 2. Fungsi Engine Jantung Loop Game Utama Sang Eksekutor
function gameLoop() {
  
  // Fase A: PENGHAPUSAN MASAL - Reset Kebersihan Kanvas Papan Gambar
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Fase B: EVALUASI LOGIC GERAK (Perbarui pergerakan)
  ball.x += ball.speedX;  // Dorong titik (x) laju bola ditambah beban akselerasi (speedX+5px) terus setiap putarannya
  
  // Deteksi Pantulan Fisika Sederhana: 
  // APABILA ujung kulit terluar kanan lingakaran (titik Pusatx + jarak radius bola) menembus lewat ukuran batas 'lebar canvas', 
  // ATAU ujung terluar cangkang sisi posisi bola kiri (x - beban radius) membentur tembok sumbu mula layar pangkal nol (0).
  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    ball.speedX = -ball.speedX; // Arahkan nilai pantulnya jadi nilai yang berkebalikang(-) berputar hadap belakang! (Contoh awal jalan positif 5 obah mundur jadi minus -5) memantul berlawanan!.
  }
  
  // Fase C: MENGGAMBAR (Printing Ulang objek tersebut)
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  
  // Fase D: Panggil kembali perintah memaksa Engine mengukir di frame pengulangan animasi secara rekap rekrusif berikutnya (sebelum refresh cat ulang repaint selanjutnya layarnya si monitor meledak)  
  requestAnimationFrame(gameLoop);
}

// 3. Pemicu Petir Kehidupan Pertama agar Game Loop Jaga Menyala Sepanjang Masa
gameLoop();

Selesai sudah teorinya! Baris pemanggilan requestAnimationFrame(gameLoop) pada pengujung blok loop kode fungsi lah yang melahirkan daur siklus pengulangan tak berujung batas mutlak (Infinite Loop). Sekali Anda mantap mengerti perihal logikal perulangan fungsi engine Loop ini, Maka dengan ini secara sah selamat, Anda sudah resmi dilantik menjadi sang arsitek Game Developer sejati!