Mace Duel Mobile: Rangka Permainan Duel 3D Dua Pemain untuk Mudah Alih

Apa yang dibina oleh projek ini

Mace Duel Mobile ialah rangka kerja permainan duel 3D 1 lawan 1 yang berjalan terus dalam pelayar telefon atau komputer. Seorang pemain boleh mencipta bilik peribadi, manakala pemain kedua menyertai menggunakan kod bilik tersebut.

Reka bentuknya memisahkan tugas antara klien dan pelayan:

• Klien: TypeScript, Vite dan Three.js untuk paparan 3D, antara muka, input sentuh, tetikus serta papan kekunci.
• Pelayan: Node.js, TypeScript dan ws untuk bilik permainan, simulasi, pengesahan mesej dan penyelarasan antara pemain.
• Mod permainan: pusingan demi pusingan, dengan kemenangan perlawanan ditentukan selepas mencapai jumlah kemenangan yang ditetapkan.

Pelayan menentukan keputusan permainan

Asas paling penting bagi permainan dalam talian ialah jangan mempercayai klien untuk perkara yang menentukan kemenangan. Klien hanya menghantar input seperti arah pergerakan, pandangan kamera, lompat, lari pecut dan arahan serangan.

Pelayan pula mengira perkara berikut:

• kedudukan dan halaju pemain;
• graviti, lompatan dan perlanggaran asas;
• jarak serta sudut serangan mace;
• kerosakan serangan biasa dan serangan jatuhan;
• tolakan daripada letupan caj angin;
• mata pusingan, tamat pusingan dan pemenang perlawanan.

Pendekatan pelayan berautoriti ini membantu mengurangkan risiko klien memalsukan nyawa, kerosakan atau koordinat pemain.

Kawalan yang sesuai untuk telefon

Susun atur mudah alih mencadangkan penggunaan skrin dalam mod mendatar:

• Kayu bedik kiri: bergerak.
• Kawasan sentuh kanan: melihat atau memusingkan kamera.
• Butang lompat: melonjak ke udara.
• Butang pecut: meningkatkan kelajuan pergerakan.
• Butang mace: melakukan serangan dekat.
• Butang caj angin: melancarkan projektil yang menolak atau mengangkat pemain berhampiran.

Kawalan sentuh perlu menyokong beberapa sentuhan serentak supaya pemain masih boleh bergerak, mengawal kamera dan menyerang pada masa yang sama. Dokumentasi kawalan permainan mudah alih MDN menerangkan bahawa satu jari mewakili satu penuding dan beberapa penuding boleh diurus serentak untuk tindakan serentak 1. Sokongan tetikus dan papan kekunci juga wajar dikekalkan untuk pemain desktop.

Sistem tempur: mace, jatuhan dan caj angin

Serangan mace biasa memberikan kerosakan apabila lawan berada dalam jarak dan kon pandangan yang sah. Serangan dari udara boleh menjadi lebih berbahaya: semakin jauh pemain jatuh sebelum mengenai sasaran, semakin tinggi kerosakan yang dikira, sehingga had maksimum.

Caj angin pula ialah sumber terhad:

• pemain bermula dengan beberapa caj;
• caj pulih semula mengikut masa;
• projektil bergerak ke arah pandangan pemain;
• apabila terkena pemain, lantai atau had arena, ia meletup;
• letupan menolak pemain secara mendatar dan mengangkat mereka ke udara.

Kesan ini membuka ruang untuk serangan jatuhan, tetapi tidak sepatutnya menyebabkan kerosakan secara langsung tanpa pengiraan serangan mace yang sah.

Rangkaian dan kelancaran permainan

Pelayan boleh menjalankan simulasi tetap pada 30 Hz. Klien pula menerima snapshot keadaan permainan, kemudian memaparkan pergerakan lawan secara lancar melalui interpolasi.

Untuk respons kawalan sendiri, klien boleh menjalankan ramalan pergerakan tempatan. Apabila snapshot pelayan diterima, klien menyelaraskan semula kedudukan berdasarkan nombor urutan input terakhir yang telah diproses. Ini mengurangkan rasa lengah tanpa menyerahkan kuasa keputusan kepada klien.

Bagi serangan dekat, sejarah kedudukan sasaran yang singkat boleh digunakan untuk mengimbangi kependaman rangkaian dalam had yang kecil. Namun, had ini perlu ketat agar ia tidak menjadi kelebihan tidak adil kepada sambungan yang sangat perlahan.

Pengesahan mesej dan perlindungan asas

Setiap mesej daripada klien perlu diperiksa sebelum digunakan:

• had saiz mesej;
• JSON yang sah;
• jenis mesej yang dibenarkan;
• rentetan nama dan kod bilik yang memenuhi format;
• nombor yang terhingga dan julat input yang munasabah;
• nombor urutan input yang meningkat;
• kadar mesej yang tidak berlebihan;
• heartbeat untuk mengenal pasti sambungan yang telah terputus.

Kod bilik hendaklah ringkas, contohnya enam aksara huruf besar dan nombor. Bilik kosong boleh dibuang secara berkala bagi mengelakkan penggunaan memori berpanjangan.

Cadangan prestasi Three.js

Arena permainan sering mempunyai banyak objek yang berulang, seperti jubin lantai, batu atau hiasan. InstancedMesh dalam Three.js menyediakan sokongan instanced rendering untuk objek yang menggunakan geometri dan bahan yang sama 2. Ia sesuai digunakan bagi mengurangkan beban panggilan lukisan untuk elemen berulang.

Bayang-bayang pula boleh menjadi mahal untuk peranti mudah alih. Three.js menyediakan tetapan shadowMap, dan bayang-bayang tidak diaktifkan secara lalai 4. Sediakan pilihan grafik seperti berikut:

• Rendah: bayang-bayang dimatikan.
• Sederhana: bayang-bayang asas atau resolusi rendah.
• Tinggi: bayang-bayang lebih lembut jika peranti mampu mengendalikannya.

Struktur projek yang dicadangkan

mace-duel-mobile/
├── shared/
│   ├── protocol.ts
│   └── rules.ts
├── server/
│   ├── game.ts
│   └── index.ts
├── src/
│   ├── main.ts
│   └── style.css
├── tests/
│   ├── game.test.ts
│   ├── integration.test.ts
│   └── ui.spec.ts
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tsconfig.server.json

Folder shared menyimpan peraturan permainan dan jenis protokol yang dikongsi. Dengan itu, klien dan pelayan menggunakan definisi mesej yang sama, sekali gus mengurangkan ralat ketidakserasian.

Perkara yang perlu diuji sebelum diterbitkan

Ujian minimum untuk projek seperti ini patut merangkumi:

1. pemain tidak boleh memasuki bilik yang sudah penuh;
2. input dengan nombor urutan lama tidak mengubah keadaan permainan;
3. serangan di luar jarak atau di luar arah pandangan gagal;
4. kerosakan serangan jatuhan tidak melebihi had;
5. caj angin berkurang, mempunyai tempoh bertenang dan pulih mengikut masa;
6. pusingan tamat apabila pemain kehabisan nyawa atau masa tamat;
7. perlawanan semula hanya bermula selepas kedua-dua pemain bersetuju;
8. kawalan sentuh boleh digunakan serentak dengan lebih daripada satu jari.

Rangka ini memberi asas praktikal untuk permainan duel web yang responsif di telefon, sambil memastikan pelayan kekal sebagai sumber keputusan yang dipercayai.