Mace Duel Mobile: Duel 3D 1v1 di Browser yang Dirancang untuk Ponsel

Duel cepat yang tidak mempercayai klien

Mace Duel Mobile adalah konsep game duel 3D 1 lawan 1 yang berjalan langsung di browser, baik di ponsel maupun komputer. Fokusnya bukan sekadar membuat arena dan karakter bergerak, melainkan memastikan pertandingan antardua perangkat tetap konsisten: pemain dapat membuat room privat, mengundang lawan, menjalani beberapa ronde, lalu meminta pertandingan ulang.

Teknologi yang digunakan adalah TypeScript, Vite, dan Three.js untuk klien, serta Node.js, TypeScript, dan ws untuk server WebSocket. Server menjalankan simulasi referensial pada 30 Hz dan memegang keputusan akhir untuk posisi, serangan, kerusakan, proyektil, kesehatan, serta pemenang ronde.

Artinya, klien tidak mengirim nilai HP, damage, atau posisi yang dianggap benar. Klien hanya mengirimkan input gerakan, arah pandang, dan perintah aksi. Pendekatan ini penting untuk mengurangi peluang manipulasi hasil permainan dari sisi pemain.

Kontrol yang disiapkan untuk layar sentuh

Untuk pengguna ponsel, rancangan kontrolnya memisahkan fungsi utama agar duel tetap nyaman dimainkan dalam posisi horizontal:

• joystick virtual di kiri untuk bergerak;
• area di kanan untuk menggeser pandangan;
• tombol lompat dan lari;
• tombol serangan gada;
• tombol muatan angin;
• dukungan keyboard dan mouse untuk pemain desktop.

Kontrol multitouch relevan untuk format ini karena pemain perlu, misalnya, bergerak sambil mengarahkan kamera dan menekan tombol serang pada saat bersamaan. Dokumentasi MDN menjelaskan bahwa satu pointer dapat merepresentasikan satu jari di layar sentuh dan beberapa pointer dapat dikelola secara bersamaan. 1

Mekanik pertarungan: gada, serangan jatuh, dan angin

Pertarungan dibangun di atas serangan gada jarak dekat dengan batas jangkauan, sudut serang, cooldown, knockback, dan damage dasar. Ada pula smash atau serangan saat jatuh: bila karakter menyerang ketika sedang turun dari ketinggian tertentu, damage dan dorongan terhadap lawan meningkat, hingga batas maksimum yang telah ditentukan.

Selain itu, setiap pemain memiliki hingga tiga muatan angin. Muatan ini ditembakkan sebagai proyektil, lalu menciptakan ledakan dorong ketika mengenai pemain, lantai, batas arena, atau saat masa hidup proyektil habis. Ledakan tidak dirancang sebagai damage langsung, tetapi dapat melontarkan lawan ke udara—membuka peluang serangan jatuh berikutnya.

Pertandingan memakai sistem ronde. Pemain yang lebih dulu mencapai tiga kemenangan ronde memenangkan pertandingan. Bila waktu ronde habis, HP kedua pemain dibandingkan; skor ronde tidak diberikan jika hasilnya imbang.

Sinkronisasi pertandingan dan perlindungan dasar

Server menyimpan riwayat posisi singkat untuk membantu pemeriksaan serangan pada kondisi jaringan yang tidak sempurna. Saat serangan diproses, posisi target dapat diperiksa sedikit ke masa lalu berdasarkan perkiraan latensi, dengan batas rewind maksimal 150 milidetik.

Rancangan juga memuat sejumlah perlindungan dasar, antara lain:

• validasi bentuk dan ukuran pesan WebSocket;
• pembatasan nilai input gerakan dan arah pandang;
• penolakan nomor urut input yang terlalu lama atau melonjak tidak wajar;
• cooldown untuk serangan dan muatan angin;
• perlindungan singkat setelah respawn;
• heartbeat untuk memantau koneksi.

Room dibatasi untuk dua pemain. Jika seorang pemain keluar saat pertandingan berlangsung dan hanya satu pemain tersisa, pemain yang bertahan ditetapkan sebagai pemenang pertandingan.

Optimasi grafis untuk perangkat yang beragam

Di sisi tampilan, Three.js dipakai untuk membangun arena dan objek permainan. Untuk elemen arena yang berulang, InstancedMesh dapat dipakai agar banyak objek dengan geometri serta material sama dirender secara instansial, bukan sebagai mesh terpisah satu per satu. Three.js mendeskripsikannya sebagai versi khusus Mesh dengan dukungan instanced rendering. 2

Efek bayangan juga sebaiknya diperlakukan sebagai pengaturan kualitas, bukan keharusan. Pada WebGLRenderer, shadow map dapat diaktifkan atau dimatikan, dan pembaruan bayangan otomatis dapat dinonaktifkan apabila pencahayaan dinamis tidak dibutuhkan. 4 Ini memberi ruang untuk mode visual yang lebih ringan pada perangkat dengan kemampuan grafis terbatas.

Catatan implementasi

Struktur proyek memisahkan kode menjadi tiga bagian: client untuk rendering dan antarmuka, server untuk room serta simulasi pertandingan, dan shared untuk aturan permainan maupun tipe protokol yang digunakan bersama.

Untuk penerapan publik, koneksi sebaiknya dijalankan melalui HTTPS dan WebSocket aman (wss://). Pengguna juga perlu menyadari bahwa contoh kode yang menyertai rancangan harus diuji lebih lanjut sebelum dipakai sebagai layanan produksi, khususnya untuk autentikasi, pemantauan server, pembatasan trafik yang lebih matang, dan pengamanan deployment.

Dengan fondasi tersebut, Mace Duel Mobile menawarkan arah yang menarik untuk game duel singkat berbasis browser: mudah diakses dari ponsel, tetapi tetap menempatkan hasil pertandingan di bawah kendali server.