Pertemuan 11

Collision Detection dan Collectible Mechanic

Membuat collision detection untuk pickup items atau hit detection dengan AABB.

Player Box

Coin Box

Tujuan Pembelajaran

Memahami AABB collision.

Membuat collectible items yang hilang saat diambil.

Spawn item baru setelah diambil.

AABB Collision

AABB atau Axis-Aligned Bounding Box mengecek apakah dua kotak saling bertabrakan berdasarkan posisi dan ukuran.

              
                function isColliding(a, b) { return a.x
                < b.x + b.width &&
         a.x + a.width >
                  b.x && a.y
                  < b.y + b.height &&
         a.y + a.height >
                    b.y; }

Collectible Pickup

                  
                    if (isColliding(player, coin)) { score += 10; coin.visible = false; }

Spawn Item Baru

                  
                    function spawnCoin() { coin.x = Math.random() * (canvas.width - coin.width); coin.y = Math.random() * (canvas.height - coin.height); coin.visible = true; }

Hit Detection

                  
                    if (isColliding(player, enemy)) { health -= 10; player.x = startX; player.y = startY; }

Activity

Buat object player dan coin dengan x, y, width, height.
Buat function isColliding().
Tambah score saat coin diambil.
Spawn coin baru setelah diambil.

Mini Quiz

AABB digunakan untuk mengecek...

Output Pertemuan

Game dengan working collision dan collectibles.