Level 8
Pertemuan 9

Coordinate dan Movement di Canvas

Memahami X-Y coordinate, playerX, playerY, moveSpeed, dan bounds checking.

Tujuan Pembelajaran

Memahami canvas coordinate system.
Membuat playerX, playerY, dan moveSpeed.
Membuat movement logic dengan bounds checking.

Canvas Coordinate System

(0,0)
top-left
>
x ke kanan
>
y ke bawah

Player Position 

              
                let playerX = 100; let playerY = 120; let moveSpeed = 5; ctx.fillRect(playerX, playerY, 40, 40);

Movement Logic 

              
                if (keys.ArrowLeft) playerX -= moveSpeed; if (keys.ArrowRight) playerX += moveSpeed; if (keys.ArrowUp) playerY -= moveSpeed; if (keys.ArrowDown) playerY += moveSpeed;

Bounds Checking 

              
                playerX = Math.max(0, playerX); playerY = Math.max(0, playerY); playerX = Math.min(canvas.width - 40, playerX); playerY = Math.min(canvas.height - 40, playerY);

Activity

  1. Buat canvas coordinate demo.
  2. Buat playerX, playerY, moveSpeed.
  3. Gerakkan player dengan keyboard.
  4. Tambahkan bounds checking agar player tidak keluar canvas.

Mini Quiz

Pada canvas, coordinate (0,0) berada di...

Output Pertemuan

Movement system dengan coordinate tracking.