Javascript Game #11: Proyek Game #2 - Klik Koin Sebanyak-banyaknya!

Javascript Game #11:
Proyek Game #2: Klik Koin Sebanyak-banyaknya!

😂 Joke pembuka: "Kenapa koin suka diklik? Karena dia pengen jadi currency (mata uang) di hatimu!" - Programmer Galau 2024

Setelah berhasil bikin game tebak angka, sekarang kita bikin game yang lebih cepat dan seru! Game ini sederhana: dalam waktu 30 detik, kamu harus klik koin sebanyak mungkin. Setiap kali koin diklik, dia pindah ke posisi acak dan skormu bertambah 1. Siap-siap jari pegel!

✨ KLIK KOIN SEBANYAK MUNGKIN! ✨

💰 0

⏱️ 30 detik

🪙

😂 Joke sambil main: "Koin ini larinya cepet banget! Kayak adikmu kalau disuruh mandi."

PENJELASAN GAME

Yuk kita lihat kode di balik game ini! Tenang, nggak serumit kelihatannya.

1. Variabel Utama

let score = 0;
let timeLeft = 30;
let timerInterval = null;
let gameActive = false;

Kita punya skor, waktu tersisa, timerInterval untuk menyimpan ID timer (biar bisa dihentikan), dan gameActive untuk tahu apakah game sedang berjalan.

2. Posisi Acak

function getRandomPosition() {
  const areaWidth = gameArea.clientWidth;
  const areaHeight = gameArea.clientHeight;
  const coinSize = 80;
  const maxX = areaWidth - coinSize;
  const maxY = areaHeight - coinSize;
  const x = Math.floor(Math.random() * maxX);
  const y = Math.floor(Math.random() * maxY);
  return { x, y };
}

Fungsi ini menghitung ukuran area game dan ukuran koin, lalu memberikan posisi acak yang memastikan koin tidak keluar dari batas.

3. Memindahkan Koin

function moveCoin() {
  const pos = getRandomPosition();
  coin.style.left = pos.x + 'px';
  coin.style.top = pos.y + 'px';
}

Setelah dapat posisi baru, kita ubah properti CSS left dan top koin.

4. Event Klik Koin

coin.addEventListener('click', function(e) {
  if (!gameActive) return;
  score++;
  updateScore();
  moveCoin();
});

Setiap koin diklik, skor naik, tampilan diperbarui, dan koin pindah.

5. Timer

timerInterval = setInterval(() => {
  timeLeft--;
  updateTimer();
  if (timeLeft <= 0) {
    clearInterval(timerInterval);
    gameActive = false;
    alert('Waktu habis!');
  }
}, 1000);

Interval berjalan setiap 1 detik, mengurangi waktu, memperbarui tampilan, dan menghentikan game jika waktu habis.

6. Tombol Reset

resetBtn.addEventListener('click', function() {
  clearInterval(timerInterval);
  startGame();
});

Tombol reset membersihkan timer lama dan memulai game baru dengan startGame().

MISI TAMBAHAN (COBA SENDIRI!)

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

1. Tambahkan efek suara setiap kali koin diklik (pakai new Audio).
2. Buat koin ganda yang muncul dua koin sekaligus (pakai array).
3. Tambahkan musuh (kotak hitam) yang jika diklik malah mengurangi skor.
4. Buat target skor misal 50 poin, kalau tercapai tampilkan pesan menang.
5. Simpan skor tertinggi dengan localStorage.

📸 Kembangkan dan tunjukkan ke teman-temanmu!

📝 RANGKUMAN SERU

• Kita belajar membuat game klik koin dengan timer.
• Menggunakan setInterval untuk timer, Math.random untuk posisi acak.
• Event klik pada elemen yang bergerak.
• Game ini bisa dikembangkan lebih seru lagi!

Javascript Game #11 selesai! Besok kita bikin game kura-kura lapar yang bisa digerakin!

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