Bila membina permainan pertempuran bos arked untuk web mudah alih, pelayar adalah persekitaran yang serba mencabar. Tiada skrin pemasangan untuk menyembunyikan muat turun 50 MB, tiada benang latar belakang untuk menyahkod arkib berat, dan tiada jaminan pemain mempunyai GPU desktop. Setiap megabait tambahan boleh menyebabkan pemain berundur sebelum skrin tajuk sempat dipaparkan.

Untuk Fight The Dragon, matlamatnya adalah pertarungan arked yang pantas dan responsif menentang lima naga elemen. Pemain mengelak dan menangkis serangan nafas naga dengan perisai sepantas kilat, mengunci sasaran menggunakan kawalan garis silang taktikal, dan bertaruh ganjaran antara pusingan.

Keseluruhan seni bina, pelaksanaan kod, dan aliran kerja alatan direka, dibangunkan, dan dilancarkan di dalam Antigravity menggunakan model Gemini 3.7. Bekerja dalam Antigravity membolehkan eksperimen pantas merentasi fizik permainan, sintesis audio prosedural, dan kawalan mudah alih, menukar idea seni bina kepada permainan produksi dalam beberapa jam.

Fight The Dragon - Skrin Mula
Fight The Dragon – Skrin Mula
Fight The Dragon - Permainan Pertarungan
Fight The Dragon – Permainan Pertarungan

👉 Lancarkan dan Main Fight The Dragon Terus dalam Pelayar Anda
(Main serta-merta, tiada muat turun atau pemasangan diperlukan, sedia untuk sentuhan dan desktop)

Ringkasan Pilihan Tindanan Teknologi

Lapisan Teknologi Terpilih Sebab Dipilih Alternatif yang Ditolak
Enjin Phaser 3 (3.88.2) But sejuk bawah sesaat, jejak masa larian kecil, sandaran Canvas stabil Unity / Godot 4 (binari Wasm berat 15 hingga 30 MB)
Audio Web Audio API Prosedural Sifar aset audio, masa tepat bersandarkan sampel, tiada sela masa nyahkod Fail sprite MP3 / WAV (muatan audio berat 5 hingga 15 MB)
Alatan TypeScript + Vite Pengoptimuman monomorfik V8, HMR serta-merta, binaan studio berbilang halaman Webpack (binaan perlahan) atau Vanilla JS (pepijat masa larian)
Fizik Phaser Arcade Physics Semakan pelanggaran AABB ringan, sifar beban CPU pada 60 FPS Matter.js atau Box2D (pengiraan poligon yang tidak diperlukan)
Kawalan Sasaran dwi-ibu jari + perisai Mengelakkan skrin tertutup, mencegah tembakan tersasar, menyokong masa tangkisan tepat Tembakan sentuh skrin (tekanan butang kelam-kabut)
Penyerahan Cloudflare Pages + Quick Tunnels CDN pinggir global serta-merta, ujian HTTPS sifar konfigurasi pada telefon fizikal Gedung aplikasi berat atau pelayan pementasan manual

1. Enjin: Phaser 3 Berbanding Wasm Terkompilasi (Godot / Unity)

Pilihan pertama ialah sama ada hendak mengeksport enjin natif ke WebAssembly atau menggunakan rangka kerja JavaScript natif-web.

Godot 4 dan Unity menawarkan editor visual yang kaya, tetapi eksport pelayar membawa beban yang berat:

  • Saiz muat turun bermula dari 8 MB dan sering melebihi 25 MB termampat. Pada sambungan mudah alih, ini bermakna menunggu 5 hingga 15 saat di palang pemuatan.
  • Kompilasi dan pemulaan modul WebAssembly yang besar menyebabkan sekatan benang pemprosesan yang ketara pada cip telefon pintar bajet.
  • Eksport Wasm berbilang benang memerlukan pengepala pengasingan pelayan tersuai (Cross-Origin-Opener-Policy dan Cross-Origin-Embedder-Policy), merumitkan pengedaran dalam webview atau iframe.

Phaser 3 bersaiz kira-kira 900 KB tanpa mampatan (bawah 250 KB termampat gzip). Ia but dalam masa kurang daripada 500 milisaat, mengendalikan peralihan automatik antara WebGL2 dan Canvas 2D mengikut keupayaan peranti, dan berjalan secara natif pada gelung peristiwa pelayar tanpa beban kompilasi.

2. Audio: Web Audio Prosedural Berbanding Pek Aset MP3

Dalam kebanyakan permainan pelayar 2D, fail audio menyumbang 60% atau lebih daripada jumlah keseluruhan saiz aset. Set kesan bunyi lengkap dan trek latar belakang boleh mencecah 10 MB audio termampat. Selain itu, menyahkod beberapa fail MP3 termampat ke dalam penimbal PCM semasa pelancaran sering menyebabkan penurunan bingkai.

Untuk menghapuskan beban ini sepenuhnya, enjin audio menggunakan sintesis prosedural tersuai berasaskan Web Audio API tanpa memuatkan sebarang fail audio luaran.

Semua bunyi pertempuran disintesis secara algoritma pada masa larian:

  • Tembakan laser menggunakan pengayun gigi gergaji (sawtooth) dengan sapuan frekuensi meluncur secara eksponen dari 880 Hz ke 110 Hz dalam masa 150 milisaat.
  • Letupan menggunakan penimbal hingar putih (white noise) yang dibentuk oleh penapis biquad laluan rendah (low-pass) dengan sapuan dari 800 Hz turun ke 50 Hz.
  • Pesongan perisai mencetuskan denyutan nada dwi-frekuensi (gelombang segitiga diikuti gelombang sinus) untuk menghasilkan bunyi tangkisan logam yang kemas.

Kelebihan utama:

  • Saiz muat turun aset bunyi: Tepat 0 bait.
  • Penggunaan memori nyahkod audio: 0 megabait.
  • Ketepatan masa: Dijadualkan pada AudioContext.currentTime, jam perkakasan yang tidak terkesan oleh jeda pembersihan memori (garbage collection).

3. Alatan: TypeScript, Vite, dan Corak Dwi-Titik Masuk

TypeScript membolehkan pengkompil melihat struktur objek keadaan permainan dengan jelas. Dalam V8 dan enjin JavaScript moden, objek dengan susunan sifat dan jenis yang konsisten membina kelas tersembunyi monomorfik. Ini menghapuskan carian sifat dinamik semasa gelung kemas kini 60 FPS.

Vite bertindak sebagai pembungkus modul, dikonfigurasikan untuk membina dua sasaran aplikasi secara serentak:

  • Permainan produksi: Masa larian pemain yang ramping dan dioptimumkan untuk menyajikan permainan langsung.
  • Kotak pasir studio interaktif: Hab ujian lima tab di mana kolaborator boleh mengubah pemboleh ubah serangan bos, menguji frekuensi bunyi, melihat pratonton fon pada meter HUD, dan memeriksa aset seni tanpa perlu bermain dari peringkat awal.

Persediaan dwi-titik masuk ini memudahkan ujian pantas bagi pemboleh ubah bos dan pembentukan audio secara terasing, mempercepatkan proses imbangan permainan.

4. Fizik: Fizik Arked Berbanding Enjin Jasad Tegar Berat

Projek permainan sering menggunakan enjin fizik jasad tegar penuh seperti Matter.js atau Box2D secara berlebihan. Enjin ini mensimulasikan pelanggaran poligon berterusan, geseran putaran, keanjalan, dan sendi kompleks.

Fight The Dragon adalah permainan pertempuran bos arked. Ia tidak memerlukan batu bergolek realistik atau sendi ragdoll. Apa yang diperlukan adalah pemeriksaan pelanggaran yang pantas dan tepat antara peluru pemain, zon serangan naga, dan bebola api yang menghampiri.

Fizik Arked terbina dalam Phaser menggunakan semakan Axis-Aligned Bounding Box (AABB). Tanpa pengiraan matriks putaran, penyelesaian pelanggaran selesai dalam masa kurang daripada 0.1 milisaat setiap bingkai, meninggalkan hampir keseluruhan bajet bingkai 16.6 milisaat untuk paparan visual dan kesan zarah.

5. Kawalan: Penyasaran Garis Silang Nyahganding Berbanding Sentuhan Skrin

Prototaip awal menggunakan kawalan sentuh skrin ringkas: mengetuk naga akan melepaskan tembakan. Semasa ujian, pendekatan ini menimbulkan masalah:

  • Tangan pemain menutupi bos, melindungi pandangan terhadap animasi bebola api yang datang.
  • Sentuhan skrin mencetuskan gerak isyarat pelayar yang tidak diingini pada peranti mudah alih.
  • Pertempuran bertukar menjadi tekanan skrin tanpa kawalan taktikal.

Sistem kawalan distruktur semula untuk mengasingkan kawalan menyasar daripada menembak:

  • Tangan kiri: Mengawal kedudukan garis silang menggunakan koordinat tetikus pada desktop atau kayu bedik maya pada peranti mudah alih.
  • Tangan kanan: Mengendalikan butang tembak khusus yang menyala dengan maklum balas kunci-sasaran visual apabila garis silang bertindih dengan naga.
  • Perisai pertahanan: Mekanik perisai tahan-untuk-tangkis membolehkan pemain menangkis serangan api bos, membina ritma sasaran tepat dan pertahanan bertempo.

6. Ujian & Pengerahan: Terowong Cloudflare dan Pengehosan Pinggir

Emulasi pelayar desktop tidak dapat menguji tingkah laku pelayar mudah alih sepenuhnya. iOS Safari mengehadkan main balik Web Audio kecuali dimulakan melalui tindakan pengguna yang disahkan melalui HTTPS, dan penjejakan ibu jari berbilang sentuhan kerap bertembung dengan leretan navigasi sistem.

Untuk mengatasi cabaran ini, ujian dijalankan melalui skrip automatik yang memadankan pelayan pembangunan Vite tempatan dengan Cloudflare Quick Tunnels. Satu arahan menghasilkan URL HTTPS awam serta-merta. Mengimbas kod QR di terminal menggunakan peranti iPhone dan Android fizikal memuatkan binaan pembangunan dengan hot-reloading, membolehkan pengesahan ergonomik sentuhan dan masa audio pada perkakasan sebenar dalam beberapa saat.

Bagi persekitaran produksi, aset statik yang dikompilasi dideploy terus ke Cloudflare Pages. Tanpa masa larian pelayan, pangkalan data, atau beban kontena, rangkaian pinggir global memastikan masa pemuatan sejuk di bawah dua saat dari mana-mana lokasi.

Dibina dengan Antigravity dan Gemini 3.7

Membangunkan permainan pelayar lazimnya melibatkan pertukaran pelbagai alatan berasingan untuk penjanaan aset, sintesis audio, pengekodan gelung permainan, dan ujian mudah alih. Dalam Fight The Dragon, keseluruhan kitaran kejuruteraan ini disempurnakan di dalam Antigravity menggunakan model Gemini 3.7:

  • Seni bina sistem dan penilaian tolak ansur stack dirancang secara terus dalam perbualan.
  • Enjin sintesis Web Audio prosedural dimodelkan secara matematik dan dibina dalam TypeScript tanpa sebarang aset audio luaran.
  • Skrip pembungkusan dwi-titik masuk dan automasi terowong Cloudflare dirangka serta diuji dalam satu ruang kerja bersepadu.
  • Penyelarasan ritma pertempuran, seperti kunci-sasaran garis silang dan pengelakan bos melalui teleportasi, diperhalusi melalui maklum balas berterusan bersama ejen.

Ringkasan Metrik Produksi

  • Saiz Binaan Produksi: Bawah 1.5 MB termampat gzip (merangkumi semua seni peringkat, sprite UI, dan kod permainan).
  • Muatan Audio: 0 bait (100% sintesis Web Audio prosedural).
  • Masa Permulaan Sejuk: Bawah 800 milisaat pada sambungan mudah alih 4G.
  • Sasaran Kadar Bingkai: 60 FPS stabil pada desktop, iOS Safari, dan Android Chrome.
  • Dibina Menggunakan: Antigravity + Gemini 3.7
  • Repositori Kod Sumber: [email protected]:ihsanberahim/fight-the-dragon.git

Alami Permainan Secara Langsung

Bersedia untuk mencuba ritma pertempuran, tangkisan perisai pantas, dan kesan Web Audio prosedural secara terus?

👉 Main Fight The Dragon Sekarang dalam Pelayar Anda
(Dimuatkan dalam masa kurang sesaat. Serasi dengan pelayar desktop dan skrin sentuh mudah alih.)