Pertemuan 10
HTML5 Canvas dan Game Loop
Memahami update-draw fundamental dengan canvas, ctx.fillRect, ctx.clearRect, dan requestAnimationFrame.
Tujuan Pembelajaran
Menggunakan canvas element dan context.
Menggambar dengan ctx.fillRect dan clearRect.
Membuat game loop dengan requestAnimationFrame.
Canvas Element
<canvas id="gameCanvas" width="800" height="600"></canvas> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d");
ctx.fillRect()
ctx.fillStyle = "#60a5fa"; ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.clearRect()
ctx.clearRect(0, 0, canvas.width, canvas.height);
Canvas perlu dibersihkan sebelum frame baru digambar.
Update dan Draw
update game state
>
clear canvas
>
draw objects
>
next frame
requestAnimationFrame
function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } gameLoop();
Activity
- Buat canvas element.
- Ambil context 2d.
- Buat function update dan draw.
- Jalankan gameLoop dengan requestAnimationFrame.
Mini Quiz
Function browser untuk menjadwalkan frame animasi berikutnya adalah...