Taman Hewan Malam — Anjing Kejar Kupu-Kupu

Yang terjadi di layar

Empat hal kecil yang membuat taman ini terasa hidup

Tidak ada video, tidak ada sprite sheet — hanya lingkaran, kurva, dan sedikit trigonometri yang digambar ulang enam puluh kali setiap detik.

🐕

Kejaran tak berkesudahan

Kaki dua-ruas, ekor bergoyang, lidah menjulur saat ngebut, lalu menerkam begitu kupu-kupu dalam jangkauan.

🏙

Kandang yang bisa diubah

Ketuk kotak kandang mana pun untuk mengganti penghuninya secara bergiliran, rapi di balik jeruji kayu.

🌙

Malam yang hidup

Bulan berkawah, bintang berkelip acak, kunang-kunang melayang, dan lampu taman yang berdenyut hangat.

⚡

Ringan di setiap layar

Seluruh taman digambar dengan Canvas 2D tanpa aset gambar, jadi tetap gesit di ponsel sekalipun.

Penghuni kandang

Kenali lima hewan yang bergiliran menempati kandang

Setiap ketukan pada kandang di taman akan menggilir salah satu dari kelimanya.

gajah

jerapah

singa

zebra

beruang

Cara ikut campur

Latar ini menunggu klik Anda

KLIK RUMPUT

Pindahkan kupu-kupu

Klik di mana saja pada langit atau rerumputan, dan kupu-kupu akan terbang ke titik itu sambil meninggalkan jejak kilau — memancing sang anjing untuk mengejar arah baru.

KLIK KANDANG

Ganti penghuni

Klik salah satu dari lima kandang untuk mengganti hewannya secara berurutan, lengkap dengan ledakan partikel kecil sebagai tanda serah terima kandang.

Di balik layar

Dibangun tanpa satu pun berkas gambar

Semua yang bergerak di taman ini — hewan, bulan, kabut, kunang-kunang — adalah bentuk geometri yang digambar ulang setiap frame.

Canvas 2D API murni. Tidak ada WebGL, tidak ada library render — cukup lingkaran, kurva Bezier, dan gradien.
Resolusi logika tetap 220 baris. Semua digambar kecil lalu diperbesar tanpa penghalusan, menjaga tampilan piksel tetap tegas di layar mana pun.
Teks digambar terpisah. Skor dan nama kandang dirender ulang di resolusi asli layar supaya tetap tajam, tidak ikut buram saat diperbesar.

// pola lari trot — dua kaki bersilang
swingDeg = Math.sin(phase) * (16 * runFactor);
liftAmt = Math.max(0, Math.sin(phase));
// anjing mendekat, kupu-kupu menjauh
if (jarak < 55) kupuKupu.kabur();
if (jarak < 35) anjing.terkam();

Pertanyaan singkat

Sebelum Anda mengetuk layar

Apakah kupu-kupu pernah benar-benar tertangkap?

Ya — begitu anjing berhasil menerkam, skor di pojok layar bertambah satu dan kupu-kupu langsung muncul kembali di titik baru, siap dikejar lagi.

Kenapa satu kandang kadang cuma menampung satu hewan?

Jumlah penghuni tiap kandang dipilih acak (satu atau dua ekor) setiap kali Anda mengetuknya, supaya kandang tidak pernah terasa sama dua kali.

Apakah animasi ini memberatkan perangkat saya?

Tidak — seluruh taman digambar dengan bentuk geometri sederhana tanpa aset gambar, jadi ringan dijalankan bahkan di ponsel yang lebih tua.