Javascript Game #12: Proyek Game #3 - Si Kura-Kura Lapar (Canvas)

Javascript Game #12:
Proyek Game #3: Si Kura-Kura Lapar (Canvas)

😂 Joke pembuka: "Kenapa kura-kura nggak pernah lapar? Soalnya selalu ada makanan yang jatuh dari langit! (tapi ini game, jadi dia harus ngejar)"

Hai para jagoan coding! Sekarang kita akan bikin game yang lebih keren: Si Kura-Kura Lapar. Kita pakai <canvas> untuk menggambar kura-kura dan makanan yang jatuh. Kamu bisa gerakin kura-kura pakai tombol panah kiri/kanan untuk menangkap makanan. Setiap makanan tertangkap, skor naik. Awas, makanan terus berjatuhan!

🐢 Skor: 0

😂 Joke sambil main: "Kenapa kura-kura suka makan di atas? Karena makanannya selalu jatuh dari langit! Hati-hati jangan sampai kejatuhan!"

PENJELASAN GAME

Wah, keren ya! Kura-kura bisa gerak dan menangkap makanan. Yuk kita bedah kodenya.

1. Canvas dan Context

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

Canvas adalah papan gambar ajaib. ctx adalah alat gambar (seperti kuas) yang bisa menggambar persegi, lingkaran, teks, dll.

2. Variabel Penting

let turtleX = ...; // posisi kura-kura
let foods = []; // array makanan
let leftPressed, rightPressed; // status tombol

Kita simpan posisi kura-kura, daftar makanan (masing-masing punya x, y, ukuran), dan tombol yang sedang ditekan.

3. Gerak Kura-Kura (Keyboard)

window.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') leftPressed = true;
});
function updateTurtle() {
  if (leftPressed) turtleX -= speed;
}

Kita pakai event listener untuk mencatat tombol yang ditekan. Di setiap frame (game loop), kita update posisi kura-kura berdasarkan tombol yang aktif.

4. Makanan Jatuh dan Tabrakan

for (let food of foods) {
  food.y += FOOD_SPEED;
  if (deteksi tabrakan) {
    skor++; hapus makanan;
  }
}

Setiap frame, makanan turun. Kita cek apakah posisi makanan bertumpuk dengan kura-kura (pakai kondisi kotak bertabrakan). Jika iya, hapus makanan dan tambah skor.

5. Game Loop

function gameLoop() {
  updateTurtle();
  updateFoods();
  draw();
  requestAnimationFrame(gameLoop);
}

requestAnimationFrame memanggil fungsi lagi setiap kali layar siap digambar (biasanya 60 kali per detik). Di sinilah semua logika game berjalan.

MISI TAMBAHAN (COBA SENDIRI!)

Setelah game ini jalan, coba kembangkan dengan ide-ide berikut:

1. Tambah nyawa: kalau makanan jatuh ke bawah, nyawa berkurang. Game over kalau nyawa habis.
2. Buat makanan berbeda: makanan emas (skor +2), makanan busuk (skor -1).
3. Tambahkan level: semakin tinggi skor, makanan semakin cepat jatuh.
4. Gambar kura-kura lebih lucu pakai gambar asli (image).
5. Efek suara setiap kali menangkap makanan.

📸 Kembangkan dan tunjukkan ke teman-temanmu!

📝 RANGKUMAN SERU

• Kita belajar menggunakan <canvas> untuk membuat game.
• Animasi dengan requestAnimationFrame.
• Deteksi tabrakan antara dua kotak (kura-kura dan makanan).
• Event keyboard untuk gerakan.
• Sekarang kamu bisa membuat game yang lebih kompleks!

Javascript Game #12 selesai! Besok kita bikin game tangkap bintang jatuh yang lebih seru!

Ada pertanyaan? Tulis di komentar atau tanya kakak/guru.