Javascript Game #8: Jurus #6 - Si Pengulang Tanpa Bos (Perulangan / Loop)

Javascript Game #8:
Jurus #6: Si Pengulang Tanpa Bos (Perulangan / Loop)

😂 Joke pembuka: "Loop itu kayak lagu favorit kamu: diputar terus, diulang terus, tapi nggak bosen! Kecuali kalau lupa kasih henti -> jadinya error!"

Hai para jagoan coding! Coba bayangkan kamu disuruh nulis nama kamu 100 kali di papan tulis. Pasti capek dan bosen kan? Nah, komputer itu beda! Dia suka ngulang perintah tanpa pernah mengeluh. Itu namanya LOOP (perulangan).

🖨️

Mesin Fotokopi

Masukkan kertas, tekan tombol, keluar banyak salinan. Loop juga gitu: perintah sekali, diulang otomatis.

🚂

Kereta Api

Kereta berjalan di rel melingkar, terus sampai diperintahkan berhenti. Loop juga berputar sampai kondisi berhenti tercapai.

⏰

Jam Alarm

Setiap 24 jam bunyi lagi. Loop dalam game bisa jalan terus tiap detik buat gerakin musuh.

JENIS LOOP YANG PALING SERING DIPAKAI: FOR

Loop for punya 3 bagian penting: mulai, kondisi, langkah.

for (let i = 0; i < 5; i++) { ... }

• let i = 0 : mulai dari 0 (pertama)
• i < 5 : ulang selama i kurang dari 5 (kondisi)
• i++ : setiap selesai satu putaran, i naik 1 (langkah)
• Jadi: i = 0, 1, 2, 3, 4 → total 5 kali

// Contoh for loop: mencetak angka 1 sampai 5
for (let angka = 1; angka <= 5; angka++) {
  console.log("Angka: " + angka);
}
// Hasil di console: 1,2,3,4,5

LOOP MENELUSURI ARRAY

Loop sangat jago buat ngeliatin semua isi array satu per satu.

let buah = ["apel", "mangga", "jeruk", "pisang"];

for (let i = 0; i < buah.length; i++) {
  console.log("Buah ke-" + i + " adalah " + buah[i]);
}
// Hasil: semua buah muncul

😂 Joke: "Loop dan array itu kayak sahabat sejati. Loop selalu setia ngelilingin array dari awal sampai akhir."

WHILE LOOP (SAUDARANYA FOR)

Ada juga loop while. Dia hanya punya kondisi, dan akan terus berulang selama kondisi masih benar. Tapi hati-hati jangan lupa kasih perubahan di dalam, bisa-bisa loop selamanya (error).

let hitung = 1;
while (hitung <= 5) {
  console.log("Hitung: " + hitung);
  hitung++; // JANGAN LUPA!
}

⚡ LABORATORIUM LOOP GILA ⚡

Klik tombol di bawah dan lihat hasil loop di kotak output. Buka console juga ya (F12).

Hasil loop akan muncul di sini...

CONTOH LOOP DI GAME

Di game, loop dipakai buat:

• Menampilkan semua musuh di layar (loop array musuh).
• Menggerakkan semua peluru (loop array peluru, update posisi).
• Menambah skor setiap detik selama game berjalan.

// Contoh: menampilkan musuh dari array
let musuh = ["👾 Alien", "🐉 Naga", "👻 Hantu"];
for (let i = 0; i < musuh.length; i++) {
  console.log("Musuh muncul: " + musuh[i]);
}

// Contoh: hitung mundur sebelum game mulai
for (let detik = 3; detik > 0; detik--) {
  console.log(detik + "...");
}
console.log("MULAI!");

😂 Joke loop forever: "Anak kecil: Bu, aku mau cerita. Ibu: Iya. Anak kecil: Ada loop, for(;;) { cerita(); } Ibu: AARRGGHH!!"

HATI-HATI INFINITE LOOP (LOOP SELAMANYA)!

Kalau kondisi loop selalu benar dan nggak ada yang mengubah, loop akan jalan terus sampai browser hang. Contoh:

// while (true) { console.log("Aku loop terus..."); }
// JANGAN DIJALANKAN! Nanti browser lemot.

Pastikan selalu ada batas dan perubahan di dalam loop.

PRAKTEK DI CONSOLE

Buka console (F12) dan coba kode berikut.

// Loop untuk mencetak bintang segitiga
let bintang = "";
for (let i = 1; i <= 5; i++) {
  bintang = bintang + "⭐";
  console.log(bintang);
}

MISI JAGOAN LOOP

1. Buat file HTML baru: loop_ku.html.
2. Buat array let hewan = ["🐔 ayam", "🐄 sapi", "🐑 kambing", "🐫 unta"];
3. Gunakan loop for untuk menampilkan semua hewan di console.
4. Buat loop yang mencetak angka kelipatan 3 dari 3 sampai 30.
5. Buat loop mundur dari 10 ke 1, dan setelah selesai tampilkan "Selesai!".
6. (Tantangan) Coba buat loop di dalam loop (nested loop) untuk membuat tabel perkalian kecil.

📸 Screenshot hasil console-mu, tunjukkan ke guru atau orang tua!

📝 RANGKUMAN SERU

• Loop adalah perintah untuk mengulang kode.
• for : paling sering dipakai, ada 3 bagian (mulai; kondisi; langkah).
• while : ulang selama kondisi benar, jangan lupa update.
• Loop bisa dipakai untuk menelusuri array.
• Hati-hati infinite loop (loop terus tanpa henti) yang bisa bikin hang.
• Di game, loop sangat penting untuk menggerakkan banyak objek sekaligus.

Javascript Game #8 selesai! Besok kita belajar Jurus #7: Membaca Gerakan Musuh (Event Listener). Siap-siap bikin game interaktif!

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