Halo teman-teman! Kali ini saya mau cerita pengalaman saya bikin game yang mungkin terlihat sederhana, tapi prosesnya cukup menarik. Judulnya Snake Battle - Elite Edition, sebuah game ular (atau cacing, terserah mau sebut apa) yang saya kembangkan pakai bantuan Claude AI.
Sebelum masuk ke detail, saya mau jujur dulu: awalnya ekspektasi saya tinggi banget. Saya pikir bisa bikin game seperti Wormate.io atau Slither.io yang ada di Play Store itu—yang grafisnya keren, smooth, dan bisa multiplayer online. Tapi ya... realitanya tidak semudah itu ferguso. Mungkin karena saya kurang jago ngasih instruksi, atau memang ada limitasi teknis. Entahlah. Yang pasti, hasil akhirnya ya seperti yang kalian lihat sekarang.
Tapi tenang, walau tidak secanggih game AAA di Play Store, game ini tetap punya nilai lebih kok. Mari kita bahas satu per satu fitur-fiturnya.
Video Gameplay dan Link Download
Sebelum lanjut, buat yang penasaran seperti apa gameplaynya, saya sudah upload video di YouTube. Kalian bisa tonton di sini: https://youtu.be/psDWduBCrdU
Kalau mau langsung main, ada dua opsi:
- Download APK: https://sfile.mobi/QCgSuvpkr7L
- Main Online: https://pengalamandhewe.blogspot.com/p/membuka-snake-battle.html
Silakan dicoba, dan kasih feedback ya kalau ada yang kurang atau perlu diperbaiki!
Konsep Dasar Game
Jadi ceritanya begini. Game Snake atau ular itu kan udah legendary banget dari zaman Nokia 3310. Konsepnya simpel: makan makanan, tambah panjang, jangan nabrak tembok atau badan sendiri. Selesai.
Nah, saya mau ngasih sentuhan modern. Gimana caranya bikin game klasik itu jadi lebih menarik di era sekarang? Jawabannya: kompetisi dengan AI bot.
Jadi bukan cuma kita yang main sendiri di arena kosong, tapi ada musuh-musuh bot yang juga berusaha survive dan ngumpulin poin. Konsepnya mirip-mirip battle royale, tapi versi ular gitu deh. Yang paling tinggi poinnya duluan, dia yang menang.
Kedengarannya seru kan? Oke, sekarang kita masuk ke fitur-fitur detailnya.
Menu Utama yang Menarik
Pertama kali masuk game, kalian bakal disambut sama menu utama yang—menurut saya pribadi—cukup eye-catching. Ada efek partikel yang beterbangan, gradien warna ungu-pink-biru yang bikin mata seger, plus animasi yang halus.
Di menu ini ada tiga tombol besar:
- Play Game - Ya jelas, ini buat mulai main
- Audio Settings - Ngatur volume musik dan sound effect
- How to Play - Panduan lengkap cara main
Desainnya saya minta Claude bikin yang modern dan elegan. Tombol-tombolnya ada efek hover yang smooth, jadi waktu mouse kita lewat di atas tombol, dia akan membesar sedikit dan glowing. Detail kecil seperti ini yang bikin game terasa lebih polish, walaupun sebenarnya cuma permainan CSS sederhana.
Oh iya, di background menu ada partikel-partikel kecil yang bergerak naik pelan-pelan. Fungsinya cuma estetik sih, tapi lumayan bikin suasana jadi lebih hidup.
Sistem Level dan Kesulitan
Ini salah satu fitur yang saya cukup bangga. Game ini punya 5 tingkat kesulitan yang bisa dipilih:
Level 1 - Newbie (🟢)
Cuma ada 1 bot, dan targetnya cuma 50 poin. Cocok banget buat pemula yang baru pertama kali main. Bot-nya juga santai, nggak terlalu agresif.
Level 2 - Casual (🔵)
Naik sedikit, sekarang ada 2 bot dan target 75 poin. Mulai kerasa ada kompetisi, tapi masih manageable.
Level 3 - Smart (🟡)
Nah, di sini mulai challenging. Ada 3 bot yang udah lebih pinter, dan kita harus ngumpulin 100 poin buat menang. Bot-nya udah mulai punya strategi territory sendiri.
Level 4 - Pro (🔴)
4 bot dengan target 125 poin. Serius, di level ini udah nggak bisa main asal-asalan. Bot-nya agresif dan punya AI yang lumayan cerdas.
Level 5 - God Mode (🟣)
The ultimate challenge. 5 bot sekaligus, target 150 poin. Saya sendiri masih jarang menang di level ini. Bot-nya kayak udah dipasangin autopilot premium—mereka bergerak cepat, strategis, dan nggak ngasih ampun.
Yang menarik dari sistem level ini adalah setiap level punya tema visual berbeda:
- Level 1: Forest - Hijau dengan partikel daun
- Level 2: Ocean - Biru dengan bubble effect
- Level 3: Desert - Oranye kekuningan dengan butiran pasir
- Level 4: Lava - Merah menyala dengan efek api
- Level 5: Space - Gelap dengan bintang-bintang
Jadi nggak cuma tingkat kesulitan yang naik, tapi suasana visualnya juga berubah. Ini bikin setiap level terasa fresh dan nggak monoton.
Kustomisasi Snake
Sebelum mulai main, kita bisa pilih warna ular kita. Ada 8 pilihan warna:
- Gold (Emas)
- Blue (Biru)
- Red (Merah)
- Green (Hijau)
- Purple (Ungu)
- Cyan (Biru Muda)
- Orange (Oranye)
- Pink (Merah Muda)
Setiap warna punya dua tone—primary dan secondary—jadi ularnya keliatan punya gradien yang smooth. Plus ada efek glow dan shadow yang bikin ular terlihat lebih 3D.
Waktu milih warna, ada preview kecil yang ngeliatin gimana ular kita bakal keliatan nanti di game. Detail matanya juga ada, lengkap dengan highlight putih kecil yang bikin mata ular keliatan hidup. Sederhana tapi efektif!
Oh iya, pilihan warna ini kesimpen di local storage browser. Jadi kalau besok main lagi, warna favorit kita masih tetap terpilih. Nggak perlu pilih ulang setiap kali buka game.
Input Nama dan Identitas
Setelah pilih warna, kita diminta masukin nama. Maksimal 8 karakter. Nama ini yang bakal muncul di atas kepala ular kita selama game berlangsung.
Kalau lagi bingung mau kasih nama apa, ada tombol "Random Name" yang bakal generate nama acak. Sistemnya sederhana: ngegabungin adjective (kata sifat) sama noun (kata benda). Contohnya: MrFox, BigAce, LilKai, IceRex, dan lain-lain.
Nama-nama bot juga menyesuaikan dengan level kesulitan:
- Level 1: Tim, Bob, Noob, Joe, Dan
- Level 2: Chill, Easy, Cool, Relax, Zen
- Level 3: Brain, Smart, Wise, Sharp, Quick
- Level 4: Pro, Killer, Ace, Boss, King
- Level 5: God, Zeus, Thor, Odin, Titan
Lucu juga sih liat bot bernama "Zeus" atau "Thor" ngalahin kita. Berasa lawan dewa beneran.
Kontrol Permainan yang Fleksibel
Ini bagian yang cukup tricky waktu development. Saya mau game ini bisa dimainkan di berbagai device dan dengan berbagai cara input. Akhirnya implementasi kontrolnya jadi seperti ini:
1. Keyboard (PC/Laptop)
Paling standard. Bisa pakai:
- Arrow keys (panah atas/bawah/kiri/kanan)
- WASD (W untuk atas, S untuk bawah, A untuk kiri, D untuk kanan)
Kalau kita tahan tombol, setelah 300 milidetik ular akan otomatis sprint (bergerak lebih cepat). Ini berguna buat kabur dari musuh atau ngejar makanan.
Tombol tambahan:
- Space = Pause game
- Enter = Taunt (goyang kepala ular, cuma buat fun aja)
2. Virtual Joystick (Mobile/Touchscreen)
Nah ini yang paling bikin pusing waktu bikin. Virtual joystick yang bagus itu harus responsif, mudah dipahami, tapi nggak ganggu gameplay.
Implementasi saya agak unik. Jadi joystick-nya tidak permanen muncul di layar. Dia baru muncul kalau kita tap di layar canvas. Posisinya juga dinamis—muncul di mana kita tap pertama kali.
Cara kerjanya:
- Tap sekali = Joystick muncul di posisi tap
- Tap di area joystick = Ular bergerak ke arah yang ditap
- Tap tengah joystick = Taunt (goyang kepala)
- Tap di luar radius joystick = Joystick pindah ke posisi tap baru
- Tahan lama = Sprint mode aktif
Joystick akan hilang otomatis setelah 5 detik tidak dipakai. Ini supaya layar nggak penuh sama UI yang mengganggu.
Ukuran joystick juga saya perbesar untuk mobile—radius 140px—supaya lebih gampang dikontrol pakai jempol. Button tengahnya juga saya besarin dari 28px jadi 40px. Soalnya waktu testing, sering banget salah pencet kalau terlalu kecil.
3. Mouse (PC)
Bisa juga pakai mouse. Klik di canvas, joystick muncul, lalu drag untuk kontrol arah. Sama seperti touch control.
Mekanik Gameplay yang Unik
Oke, sekarang masuk ke inti permainan. Ada beberapa mekanik yang—menurut saya—bikin game ini beda dari snake biasa:
1. Bounce Wall (Pantulan Tembok)
Nabrak tembok TIDAK langsung mati!
Ini perbedaan terbesar dari snake klasik. Kalau ular kita nabrak tembok arena, dia akan memantul balik dengan efek shake (goyang) dan partikel ledakan kecil. Kita masih bisa lanjut main.
Kenapa saya implementasikan ini? Karena di game multiplayer, mati gara-gara nabrak tembok itu frustrating banget. Apalagi kalau lagi dikejar musuh terus kepepet ke sudut. Dengan sistem bounce, gameplay jadi lebih forgiving tapi tetap ada konsekuensinya (kita jadi lambat sebentar dan arah bisa berubah).
2. Collision dengan Musuh
Nabrak badan musuh = Score reset ke 0
Ini hukumannya. Kalau ular kita nabrak badan ular musuh (bagian manapun kecuali kepala), skor kita langsung balik ke nol. Ular kita juga respawn di posisi random dengan panjang default.
Tapi ada twist-nya: Bot vs Bot = Pass Through
Kalau dua bot nabrak satu sama lain, mereka nggak ngapa-ngapain. Tembus aja. Ini saya implementasikan supaya bot nggak saling membunuh terus dan bikin game jadi terlalu chaotic.
Nabrak badan sendiri = Aman
Beda sama snake klasik, di sini kita bisa nabrak badan sendiri tanpa penalty. Jadi nggak perlu khawatir kalau ular udah kepanjangan banget.
3. Head-to-Head Collision
Kalau dua ular head-on collision (kepala ketemu kepala), yang lebih panjang menang. Yang lebih pendek mati dan respawn.
Simple tapi strategic. Jadi kalau kita udah panjang, bisa agresif nyerang musuh dengan tabrak kepala mereka.
Sistem Makanan dan Poin
Ada beberapa jenis makanan dengan nilai berbeda:
Makanan Biasa (1 poin):
🍎 Apel, 🥕 Wortel, 🍊 Jeruk, 🍌 Pisang, 🍇 Anggur, 🍓 Strawberry, 🍞 Roti, 🧀 Keju
Makanan Medium (2 poin):
🍕 Pizza, 🍔 Burger
Makanan Premium (3 poin):
🍩 Donut, 🎂 Kue
Setiap kali kita makan, ular kita tumbuh 2 segmen per poin. Jadi kalau makan pizza (2 poin), ular tambah 4 segmen. Kalau makan donut (3 poin), tambah 6 segmen.
Makanan respawn otomatis di posisi random setiap kali dimakan. Total ada 12 makanan yang tersebar di arena. Jadi nggak pernah kehabisan makanan.
Yang menarik, sistem pertumbuhan ularnya bertahap. Jadi nggak langsung panjang begitu saja, tapi tumbuh segmen demi segmen dalam beberapa frame. Ini bikin animasi pertumbuhan keliatan lebih smooth dan natural.
Sistem Bot AI dengan Territory
Bot AI di game ini nggak cuma bergerak random. Mereka punya sistem territory—semacam "zona kekuasaan" di mana mereka lebih suka berburu makanan.
Arena dibagi jadi 5 territory:
- Kanan Atas (75% kanan, 25% atas)
- Kiri Atas (25% kiri, 25% atas)
- Kiri Bawah (25% kiri, 75% bawah)
- Kanan Bawah (75% kanan, 75% bawah)
- Tengah (50% center)
Setiap bot dikasih satu territory. Mereka akan prioritas cari makanan di territory mereka sendiri. Kalau di territory nggak ada makanan, baru deh mereka keluar nyari ke area lain.
Ini bikin bot keliatan punya "kepribadian" dan strategi sendiri. Mereka nggak saling ganggu terlalu sering, tapi kalau ketemu ya tetap bisa collision.
Kecerdasan bot juga meningkat per level:
- Level 1: Slow reaction, gerakan santai
- Level 2-3: Mulai strategis, bisa ngejar makanan terdekat
- Level 4-5: Aggressive, fast reaction, advanced pathfinding
Di level God (5), bot-nya serius pinter. Mereka bisa predict pergerakan kita dan avoid collision dengan baik. Kadang saya sendiri kesel karena susah menangin mereka.
Fitur Autopilot (Spectator Mode)
Ini fitur bonus yang cukup fun. Ada tombol "Auto Pilot" di menu atas. Kalau kita klik, ular kita bakal dimainkan sama AI seperti bot lainnya.
Jadi kita tinggal duduk santai nonton aja. Lima ular (kita + 4 bot) bertarung sendiri di arena. Lumayan buat hiburan atau kalau lagi males main tapi pengen liat gameplay.
Bisa juga buat testing—ngeliat seberapa bagus AI bot saya sebenarnya. Kadang AI kita malah menang sendiri tanpa kita sentuh sama sekali. Satisfying!
Audio dan Sound Design
Saya akuin bagian audio ini paling sederhana. Karena keterbatasan (browser-based game + Claude AI limitation), saya cuma pakai Web Audio API untuk generate sound procedural.
Jadi nggak ada file MP3 atau WAV yang di-load. Semua sound di-generate on-the-fly pakai oscillator.
Sound Effects yang ada:
- Click (600Hz sine wave) - Waktu klik tombol
- Eat (800Hz square wave) - Makan makanan
- Bounce (300Hz square wave) - Nabrak tembok
- Kill (150Hz sawtooth) - Collision dengan musuh
- Win (784Hz sine) - Menang game
- Lose (100Hz sawtooth) - Kalah game
Background Music:
Ada BGM sederhana yang cuma oscillator 220Hz sine wave dengan volume rendah. Honestly, ini paling basic dan perlu banyak improvement. Tapi ya sudahlah, at least ada audionya.
Di menu audio settings, bisa atur volume:
- Master Volume - Overall volume
- Music Volume - BGM saja
- SFX Volume - Sound effect saja
Plus ada tombol Mute kalau mau silent completely.
Volume settings kesimpen di local storage, jadi nggak perlu setting ulang setiap kali main.
Visual Effects dan Particles
Walaupun game-nya browser-based, saya coba maksimalin visual effects supaya keliatan lebih hidup:
1. Background Particles
Ada 60 partikel yang bergerak di background. Bentuknya berbeda tergantung tema:
- Forest: Daun oval yang berputar
- Ocean: Bubble dengan highlight putih
- Desert: Butiran pasir kecil
- Lava: Partikel api merah-orange dengan glow
- Space: Bintang dengan twinkle effect
Partikel-partikel ini bergerak pelan dan looping, jadi nggak pernah hilang dari layar.
2. Collision Particles
Setiap kali ada event penting (makan makanan, collision, dll), muncul particle explosion. Jumlahnya bervariasi:
- Makan makanan: 12 partikel
- Bounce wall: 10 partikel
- Kill/Death: 25 partikel
Partikel punya lifetime dan gradually fade out. Efeknya subtle tapi bikin game keliatan lebih polished.
3. Glow Effects
Ular punya glow effect di sekitar badannya. Head (kepala) punya glow paling terang. Makanan juga ada shadow glow dengan warna sesuai jenisnya.
4. Smooth Snake Animation
Body ular nggak digambar sebagai kotak-kotak, tapi pakai quadratic curves untuk bentuk smooth. Ada juga highlight "scales" (sisik) di sepanjang badan yang bikin ular keliatan punya texture.
Kepala ular punya detail mata dengan pupil hitam dan highlight putih kecil. Simple tapi bikin karakter keliatan "hidup".
Sistem Score dan Win Condition
Score dihitung dari panjang ular:
Score = (Total Segmen - 8) / 2
Kenapa dikurangi 8 dan dibagi 2? Karena ular starting length adalah 8 segmen, dan setiap poin yang kita dapat nambah 2 segmen. Jadi rumusnya pas untuk convert segmen jadi poin.
Win Condition:
Yang pertama kali mencapai target score (sesuai level) adalah pemenang. Game langsung berhenti dan muncul popup hasil.
Kalau yang menang adalah kita (player), muncul teks "🎉 VICTORY!" dengan warna hijau dan sound effect win.
Kalau bot yang menang, muncul "💀 DEFEAT" dengan warna merah dan sound lose. Plus ada keterangan bot mana yang menang.
Scoreboard di kanan atas terus update setiap 100ms, jadi kita bisa monitor siapa yang leading.
UI dan UX Design
Top Menu (In-Game)
Waktu main, ada menu bar di atas yang berisi:
- ☰ Menu - Buka sidebar
- ⏸️ Pause - Pause/Resume game (icon berubah)
- 🤖 Auto: OFF/ON - Toggle autopilot
- 🎵 - Quick access audio settings
- Scoreboard - List semua pemain dan score mereka
Scoreboard scrollable kalau pemain banyak, dan transparan supaya nggak ganggu view gameplay.
Sidebar Menu
Kalau klik tombol Menu, muncul sidebar dari kiri dengan opsi:
- ❓ Help - Buka panduan
- 🔙 Back to Levels - Kembali ke level select
- 🏠 Main Menu - Balik ke menu utama
- ✕ Close - Tutup sidebar
Ada overlay gelap blur di background supaya fokus ke sidebar.
Game Over Popup
Waktu game selesai, muncul popup di tengah dengan animasi bounce. Isinya:
- Judul (Victory atau Defeat)
- Pesan (misalnya "Bot Zeus reached 150 points first!")
- 🔄 Play Again - Restart dengan setting sama
- 🏠 Main Menu - Balik ke menu utama
Design popup-nya lumayan elegant dengan border neon purple dan backdrop blur.
Responsive Design untuk Mobile
Game ini fully responsive. Canvas-nya otomatis menyesuaikan dengan ukuran layar:
- Desktop: 720x1280px (aspect ratio 9:16)
- Mobile: Full width dengan maintain aspect ratio
Text size, button size, dan joystick size juga adjust otomatis di layar kecil.
Di mobile portrait mode, layout-nya optimized supaya enak dimainkan satu tangan. Joystick muncul di area yang nyaman untuk jempol, dan scoreboard bisa discroll.
Kekurangan dan Limitasi
Oke, sekarang jujur soal kekurangannya. Karena ini pet project dan bukan game komersial, ada beberapa hal yang memang tidak sempurna:
- Tidak Ada Multiplayer Online
Ini sih yang paling disayangkan. Game seperti ini seharusnya bisa multiplayer real-time. Tapi untuk implementasi WebSocket atau networking code, saya belum sanggup. Butuh backend server juga. Jadi ya... cuma single player vs bot.
- Audio Sangat Sederhana
Web Audio API itu powerful, tapi butuh skill untuk bikin sound yang bagus. Saya cuma pakai oscillator dasar. Hasilnya ya begitu—functional tapi nggak impressive.
- Bot AI Masih Bisa Exploit
Kalau kita tau pola bot, kita bisa exploitasi. Misalnya di level rendah, bot cenderung kembali ke territory mereka. Kita bisa tunggu di sana dan ambush mereka. Di level tinggi sih lebih susah, tapi tetap ada pattern-nya.
- Grafis Tidak Secanggih Game Store
Ya jelas. Ini browser game pakai HTML5 Canvas. Nggak bisa dibandingkan sama Unity atau game native yang punya budget besar.
- File Size APK Cukup Besar
Karena semua code ada di satu file HTML, APK-nya jadi lumayan gede (sekitar 100KB). Padahal functionalitynya sederhana. Tapi ya mau gimana lagi, struktur code-nya memang single-file.
Pengalaman Development
Bikin game ini cukup challenging karena saya nggak pakai IDE desktop—cuma hape Android + Claude AI. Workflow-nya jadi agak ribet:
- Kasih prompt detail ke Claude
- Dapat code response
- Copy-paste ke text editor di hape
- Test di browser
- Kalau ada bug, screenshot atau explain ke Claude
- Dapat code fix
- Edit manual di hape
- Repeat
Kadang frustrating karena hape keyboard-nya kecil dan nggak ada syntax highlighting proper. Tapi ya lumayan buat belajar problem-solving dan patience.
Claude itu helpful banget sih, tapi kita harus tau mau minta apa. Kalau prompt-nya vague, hasilnya juga amburadul. Jadi skill utama yang dipelajari adalah "cara berkomunikasi dengan AI" supaya dia ngerti maksud kita.
Ini proyek kesekian saya pakai Claude, jadi udah mulai terbiasa. Tapi tetap aja setiap project ada challenge baru.
Kesimpulan
Apakah game ini sempurna? Tentu tidak.
Apakah ini sesuai ekspektasi awal? Tidak juga.
Apakah saya puas? Lumayan.
Yang penting, ini adalah working game yang bisa dimainkan dan (mudah-mudahan) entertaining. Ada effort, ada learning process, dan yang terpenting: it's done.
Buat teman-teman yang mau coba, silakan:
- Tonton gameplay: https://youtu.be/psDWduBCrdU
- Download APK: https://sfile.mobi/QCgSuvpkr7L
- Main Online: https://pengalamandhewe.blogspot.com/p/membuka-snake-battle.html
Kalau ada feedback, bug report, atau saran improvement, feel free to reach out. Saya appreciate semua input yang membangun.
Dan buat yang pengen bikin game sendiri pakai AI, saran saya:
- Start small - Jangan langsung pengen bikin game AAA
- Be specific - Kasih prompt yang jelas dan detail
- Iterate - Nggak langsung jadi dalam sekali prompt
- Test thoroughly - Bug itu pasti ada, tinggal dicari dan diperbaiki
- Manage expectations - AI itu tool, bukan dewa
Terakhir, terima kasih sudah baca artikel panjang ini sampai habis. Kalian the real MVP! 🎮
Selamat mencoba gamenya, dan semoga bisa menghibur di waktu senggang. Stay safe and happy gaming! 🐍✨
Komentar
Posting Komentar