Menyajikan permainan pemusnahan berasaskan fizik terus di dalam pelayar web mudah alih membawa kekangan teknikal yang nyata. Pelayar mudah alih mengenakan had memori yang ketat, jeda kutipan sampah (garbage collection) dinamik, dan pelaksanaan berbenang tunggal pada CPU dengan prestasi yang pelbagai. Apabila sebuah permainan arked memerlukan puluhan megabait muat turun sebelum skrin tajuk muncul, pemain akan berundur sebelum babak awal sempat dimulakan.
Lastik: Stone Siege direka bentuk bagi mengatasi rintangan ini. Diinspirasikan oleh lastik kayu tradisional Malaysia, permainan ini membolehkan pemain melontar batu-batan serantau ke arah menara goyah yang dibina daripada buluh, kayu, batu, dan pasu tanah liat (labu sayong), menumbangkan gerombolan monyet berhelmet yang nakal (kera dan mawas).
Keseluruhan reka bentuk sistem, kinematik lastik, penyelesai fizik impuls tersuai, penyintesis Web Audio prosedural, dan suite ujian regresi automatik dirancang, dibangunkan, dan disahkan di dalam Antigravity menggunakan Gemini. Bekerja dalam Antigravity membolehkan pemodelan matematik pantas bagi tegangan spring tak linear, penukaran konsep seni bina terus kepada enjin web tanpa kebergantungan luar, dan penghasilan 78 suite ujian pengesahan, menghasilkan pengalaman web yang kemas dalam beberapa hari.
👉 Lancarkan dan Main Lastik: Stone Siege 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 & Masa Larian | HTML5 Canvas 2D + Vanilla ES6+ | But sejuk bawah sesaat, sifar kebergantungan npm, berkas termampat gzip 44 kB | Eksport WebAssembly Godot 4 atau Unity (beban muat turun 15 hingga 30 MB) |
| Penyelesai Fizik | Enjin Fizik Impuls 2D Tersuai | Impuls kotak sempadan berputar, tork rebah lantai, dan kestabilan susunan | Matter.js atau Box2D Wasm (beban saiz berkas, ketidakstabilan berangka pada menara tegak) |
| Subsistem Audio | Web Audio API Prosedural | Sifar muat turun audio, penjujuk 16 langkah berorientasikan algoritma, main balik jam perkakasan | Pakej audio sprite MP3/WAV (muatan audio 10 hingga 15 MB) |
| Kinematik Lastik | Lengkung spring kuadratik + lendutan katenari | Rintangan getah tulen, penipisan getah dinamik, anjalan sentakan selepas pelepasan | Anggaran tarikan linear dan sprite regang kaku |
| Saluran Paip Aset | Helaian gesaan Google Flow & Imagen 3 | Estetika kartun tropika yang padu, lapisan terhiris modular dengan kelutsinaran | Kitaran penghasilan sprite lukisan tangan manual dan aset tidak termampat |
| Pengujian & Kualiti | Python 3 (unittest) + Playwright | 78 ujian automatik mengesahkan kinematik, had impuls, dan pariti regresi | Pengujian pelayar manual dan mesin keadaan yang tidak diuji |
| Penyerahan | Cloudflare Pages + Wrangler | Pengedaran pinggir global, penyinggahan (caching) statik pantas, penggunaan CI automatik | VPS khusus atau pelayan aplikasi berpusat |
1. Seni Bina Enjin: Canvas Sifar Kebergantungan Berbanding Eksport WebAssembly Berat
Enjin permainan penuh seperti Godot 4 dan Unity menyediakan editor visual yang lengkap serta nod fizik 2D terbina dalam. Malah, prototaip awal untuk Lastik: Stone Siege dirangka menggunakan babak GDScript dalam Godot 4. Namun, mengeksport enjin natif moden ke pelayar membawa penalti operasi yang berat untuk permainan kasual.
Eksport WebAssembly Godot 4 menghasilkan binari termampat bersaiz antara 15 hingga 30 megabait. Menyusun dan memulakan modul yang besar ini memonopoli benang utama pelayar semasa permulaan, mengakibatkan skrin pemuatan berbilang saat pada peranti mudah alih. Selain itu, eksport WebAssembly berbilang benang memerlukan pengepala pengasingan rentas asal (cross-origin isolation headers) yang khusus (Cross-Origin-Opener-Policy dan Cross-Origin-Embedder-Policy), menyukarkan permainan ini disematkan di dalam paparan webview, portal media sosial pihak ketiga, atau iframe berpasir.
Lastik: Stone Siege menghapuskan beban masa larian ini dengan melaksanakannya pada enjin tersuai yang dibina menggunakan JavaScript vanilla ES6+ dan API HTML5 Canvas 2D standard. Keseluruhan masa larian permainan, pengurusan babak, penjana sektor prosedural, dan saluran paip pemaparan dimuatkan dalam satu fail 212 kB yang memampat kepada bawah 44 kB gzipped.
Saluran paip pemaparan mengendalikan gelung mod segera 60 FPS dengan pembendungan CSS yang mengekalkan nisbah aspek 16:9 yang tepat. Sistem kamera maya dinamik menjejak projektil merentasi medan permainan seluas 2,400 piksel, mengezum keluar secara dinamik semasa lontaran arka tinggi dan meluncur lancar antara sauh lastik dengan menara musuh. Memaparkan terus ke Canvas 2D mengelakkan kelewatan penyusunan pembayang (shader) dan menghapuskan risiko kehilangan status konteks WebGL apabila pengguna mudah alih menukar tab pelayar.
2. Simulasi Fizik: Penyelesai Impuls Tersuai Berbanding Enjin Jasad Tegar Generik
Pustaka fizik 2D tujuan am seperti Matter.js atau Box2D menyelesaikan manifold kekangan berterusan yang rumit. Walaupun serba boleh, penyelesai sentuhan umum ini kerap bergelut apabila mengendalikan menara seni bina yang tinggi dan halus. Dalam susunan menegak yang padat, ralat pembundaran lelaran yang kecil menyebabkan blok struktur bergetar, hanyut, dan runtuh sebelum sebiji batu pun sempat dilancarkan.
Bagi menjamin kestabilan struktur, Lastik: Stone Siege melaksanakan penyelesai fizik impuls tersuai yang disesuaikan khusus untuk kemusnahan projektil:
- Pelanggaran Kotak Sempadan Berputar: Blok mengira unjuran sempadan terarahnya menggunakan unjuran trigonometri. Semakan pelanggaran menilai kedalaman penembusan di sepanjang garis normal sentuhan dan menggunakan pertukaran momentum serta-merta berdasarkan halaju relatif dan jisim objek.
- Halaju Sudut Terlembap: Blok menggunakan pelembapan putaran udara (0.96) dan geseran putaran tanah (0.70) untuk mengelakkan putaran kipas yang tidak realistik.
- Tork Rebah Lantai Pemulihan: Apabila blok condong menyentuh tanah, enjin mengira ofset mendatar bagi bucu sentuhan terendahnya relatif kepada pusat jisim. Ia kemudian mengenakan tork penentang pembetulan yang merebahkan rasuk senget secara rata di atas tanah.
- Peraturan Kestabilan Tiang Langsing: Tiang menegak dengan nisbah ketinggian kepada lebar melebihi 1.8 memerlukan beban bumbung struktur di atasnya untuk kekal seimbang. Sekiranya rasuk bumbung musnah, tiang langsing yang tiada sokongan akan tumbang ke sisinya secara realistik.
- Keadaan Tidur Susunan Struktur: Blok menara bermula dalam keadaan rehat tidur. Ia hanya terjaga apabila terkena projektil atau apabila blok sokongan di bawahnya hancur, mengekalkan pengiraan fizik setiap bingkai jauh di bawah 0.2 milisaat.
3. Kinematik Lastik: Fizik Spring Tak Linear dan Susunan Elastik Dinamik
Kepuasan mekanikal permainan lastik bergantung sepenuhnya pada tindak balas sentuhan semasa menarik dan melepaskan getah. Formula seretan linear yang mudah terasa lembik dan memutuskan hubungan pemain dengan simulasi ketegangan getah.
Lastik: Stone Siege memodelkan kinematik lastik dengan kekangan mekanikal yang terperinci:
- Mekanik Tarikan Terhad: Vektor seretan dihadkan secara lancar pada jejari maksimum 120 piksel, dengan pengiraan pelepasan tanah dinamik yang menghalang projektil daripada tenggelam ke bawah garisan tanah semasa tarikan ke bawah.
- Daya Spring Kuadratik Tak Linear: Halaju tarikan diskalakan mengikut formula tegangan spring kuadratik, menggabungkan daya asas (650 unit) dengan pekali spring yang dipercepatkan (850 unit) didarab dengan nisbah tarikan. Ini menghasilkan rintangan progresif yang memberi ganjaran kepada tarikan yang mendalam dan tepat.
- Pembatalan Zon Mati: Melepaskan kantung dalam jarak 20 piksel dari sauh rehat menetapkan semula getah dengan selamat tanpa membazirkan peluru atau melontar batu. Sentuhan alternatif pada desktop atau sentuhan jari kedua pada peranti mudah alih membatalkan tarikan aktif dengan serta-merta.
- Susunan dan Penipisan Getah Dinamik: Apabila ketegangan meningkat, ketebalan visual getah merenggang dan menipis secara dinamik daripada 6.2 piksel kepada 2.8 piksel. Semasa melahu atau ditarik sedikit, getah mempamerkan lendutan katenari.
- Susunan Kedalaman Visual: Pemaparan mematuhi susunan enam lapisan yang tepat: cabang ForkBack, LeftBand, batu muatan, kantung kulit, RightBand, dan cabang ForkFront. Ini mencipta ilusi kedalaman tiga dimensi tanpa beban enjin 3D.
- Anjalan Sentakan Pelepasan: Sebaik dilepaskan, lastik melaksanakan ayunan sentakan sinusoidal terlembap selama 0.14 saat, meniru tindak balas pelepasan fizikal jalur getah lateks.
// Non-linear quadratic spring tension and launch vector calculation
const pullRatio = Math.min(dragDistance / MAX_PULL_RADIUS, 1.0);
const baseForce = 650;
const springCoeff = 850;
// Quadratic resistance curve: F(r) = F_base + k * r^2
const launchSpeed = baseForce + (springCoeff * Math.pow(pullRatio, 2));
const velocityX = -Math.cos(pullAngle) * launchSpeed;
const velocityY = -Math.sin(pullAngle) * launchSpeed;4. Senjata Projektil dan Pemodelan Kerosakan Bahan
Permainan pemusnahan taktikal memerlukan tingkah laku projektil yang berbeza mengikut kelemahan struktur. Lastik: Stone Siege melengkapkan pemain dengan empat jenis batu serantau yang diinspirasikan oleh geologi Malaysia:
- Batu Sungai (River Pebble): Batu sungai bulat standard dengan pengganda jisim 1.0x dan halaju 1.0x, menawarkan penembusan yang boleh diharap, lantunan tinggi, dan kestabilan trajektori yang seimbang.
- Batu Pejal (Granite Boulder): Batu arang granit pejal dengan pengganda jisim 3.2x dan kelajuan pelancaran 0.7x, membawa momentum kinetik besar untuk memecahkan tiang batu kubu bahagian bawah.
- Batu Api (Flint Stone): Projektil gunung berapi yang meletus menjadi gelombang kejutan jejarian pada impak atau melalui sentuhan skrin di udara, mencampakkan rasuk struktur berdekatan dengan impuls halaju tinggi.
- Batu Serpih (Split Slate): Projektil batu syal berlapis rapuh yang berpecah kepada tiga sub-projektil dalam kon sebaran apabila skrin disentuh semasa penerbangan.
Bahan struktur bertindak balas terhadap tenaga kinetik projektil menggunakan sifat mekanikal yang ditentukur:
- Papan Kayu: Jisim 1.0x, 30 HP, geseran sederhana (0.4), dan ambang kerosakan rendah (25 unit).
- Batang Buluh: Rasuk beruas ringan dengan keanjalan tinggi dan jisim struktur yang rendah.
- Blok Batu: Jisim 4.0x, 120 HP, geseran tinggi (0.7), dan ambang kerosakan tinggi (75 unit), menahan hentaman batu kecil dengan berkesan sambil memerlukan hentaman batu pejal yang berat.
- Pasu Tanah Liat (Labu Sayong): Jisim 0.5x, 10 HP, dan ambang rapuh 8 unit, serta-merta berkecai apabila terkena impak langsung menjadi serpihan tembikar.
Impak yang melebihi ambang kerosakan mengurangkan kesihatan struktur dan memunculkan serpihan runtuhan terarah yang mewarisi momentum kinetik, mencetuskan runtuhan domino merentasi struktur bersebelahan.
5. Sintesis Audio: Web Audio Masa Nyata Berbanding Pek Bunyi Berbilang Megabait
Fail audio lazimnya mengambil lebih separuh daripada jumlah muatan aset dalam permainan web kasual. Menggabungkan trek muzik latar, variasi impak, dan bunyi antara muka dalam fail WAV atau MP3 pasang siap lazimnya menambah 10 hingga 15 megabait data termampat. Menyahkod fail tersebut pada peranti mudah alih memakan RAM peranti dan berisiko mencetuskan gangguan pada benang audio.
Lastik: Stone Siege mengatasi beban muat turun audio sepenuhnya dengan menyintesis semua kesan bunyi dan muzik permainan secara masa nyata menggunakan Web Audio API natif:
- Kesan Bunyi Prosedural: Bunyi regangan getah memodulasi pengayun gigi gergaji daripada 90 Hz ke 160 Hz. Pelepasan lastik menyapu pengayun gelombang sinus daripada 320 Hz turun ke 70 Hz. Rekahan kayu, lagaan batu, dan pecahan tembikar menyalurkan pengayun segi tiga dan penapis laluan tinggi melalui penapis biquad. Letupan menyapu gelombang gigi gergaji frekuensi rendah turun ke 20 Hz, mengaktifkan pengurangan kelantangan automatik (audio ducking) pada saluran muzik.
- Penjujuk Muzik 16 Langkah Berorientasikan Algoritma: Lagu tema tajuk dan permainan dihasilkan secara programatik tanpa sebarang gelung rakaman awal. Beroperasi pada 104 BPM (tajuk) dan 118 BPM (permainan), penjujuk tersuai melangkah melalui skala pentatonik D minor dan Gamelan Asia Tenggara. Ia menyelaraskan dram tendang sintetik, ketukan kayu bertapis, letusan hingar hi-hat, garis bes gigi gergaji, loceng berdering, dan pad sintesis segi tiga yang hangat.
- Ketepatan Jam Perkakasan: Semua suara penyintesis menjadualkan nota terus pada jam perkakasan berterusan (
AudioContext.currentTime). Tempo muzik dan kesan bunyi kekal tepat pada tahap sampel walaupun paparan visual mengalami sedikit turun naik semasa letupan zarah yang padat.
// Procedural slingshot band release sweep (Web Audio API)
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playReleaseSnap() {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
const now = audioCtx.currentTime;
osc.type = 'sine';
osc.frequency.setValueAtTime(320, now);
osc.frequency.exponentialRampToValueAtTime(70, now + 0.14);
gain.gain.setValueAtTime(0.35, now);
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.14);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start(now);
osc.stop(now + 0.14);
}Jumlah saiz muat turun aset audio bagi keseluruhan enjin sintesis prosedural adalah tepat 0 bait.
6. Pengujian & Alatan: 78 Ujian Regresi Automatik dan Studio Fizik
Mengekalkan interaksi fizik yang konsisten merentasi sektor prosedural tanpa henti memerlukan pengesahan automatik yang ketat. Lastik: Stone Siege bergantung pada seni bina pengujian dan penalaan dwi-landasan:
- Suite Ujian Python Automatik (
test_game_logic.py): Suite ujian komprehensif mengandungi 78 ujian unit dan regresi yang dilaksanakan dalam masa kurang daripada 0.3 saat. Suite ini mengesahkan geometri had tarikan, matematik halaju pelancaran tak linear, parabola trajektori kinematik, formula ambang kerosakan, peraturan penarafan bintang, dan peralihan status DOM. - Pengesahan Integriti Aset: Ujian tatasusunan imej automatik memeriksa saluran alfa bagi hirisan aset sprite. Ujian mengesahkan bahawa cabang kayu lastik yang diasingkan tidak mengandungi getah atau kantung terbina, membuktikan bahawa getah elastik dijana secara dinamik dalam kod.
- Studio Aset & Fizik (
playground.html): Abah-abah pembangun berasaskan pelayar yang berdiri sendiri menyediakan meja kerja visual yang terpencil. Meja kerja ini membolehkan pembangun melaraskan pemalar tegangan spring, menguji tindak balas hentaman batu, memeriksa kotak sempadan berputar, mencetuskan fizik serpihan, dan menguji frekuensi penyintesis secara berasingan sebelum menetapkan pengimbangan permainan. - Saluran Paip Penyerahan Pinggir: Permainan digunakan terus ke Cloudflare Pages melalui Wrangler (
npm run deploy). Aset statik diedarkan merentasi pusat data pinggir di seluruh dunia, memberikan masa muat awal bawah sesaat di semua rantau sasaran. - Pengesahan Rentas Pelayar & Peranti: Ujian visual dan tanpa kepala (headless) mengesahkan prestasi 60 FPS yang stabil, tindak balas peristiwa sentuhan, dan main balik audio merentasi Safari (iOS 16+), Chrome Android, serta pelayar desktop malar hijau (Firefox, Chrome, Edge).
Dibina dengan Antigravity dan Gemini
Mencipta permainan pemusnahan fizik dengan enjin tersuai sifar kebergantungan, audio prosedural masa nyata, dan suite ujian automatik yang meluas memerlukan lelaran pantas merentasi pelbagai disiplin. Bagi Lastik: Stone Siege, keseluruhan kitaran hayat kejuruteraan ini diarahkan, dikodkan, dan diuji di dalam Antigravity menggunakan Gemini:
- Kinematik lastik, persamaan tegangan spring kuadratik, dan matematik perlanggaran kotak sempadan berputar diterbitkan dan disahkan secara langsung dalam perbualan.
- Enjin sintesis Web Audio prosedural, termasuk semua kesan bunyi impak fizikal dan runut bunyi berorientasikan algoritma 16 langkah, dikodkan dalam JavaScript vanilla tanpa sebarang pustaka audio luaran.
- Helaian gesaan penjanaan aset induk (
NANOBANANA_PROMPTS.md) distrukturkan untuk Google Flow dan Imagen 3 bagi menetapkan seni kartun permainan yang konsisten merentasi semua projektil, bahan, dan gerombolan monyet. - Suite ujian Python 78 ujian dikarang dan dijalankan secara setempat, mengesahkan formula fizik dan kestabilan regresi dengan maklum balas ujian serta-merta.
- Penyesuaian paparan mudah alih, pendengar peristiwa sentuhan, dan pengendali skrin penuh disahkan merentasi sesi pelayar menggunakan aliran kerja Playwright automatik.
Ringkasan Metrik Produksi
| Metrik | Ukuran |
|---|---|
| Berkas JavaScript Produksi | Bawah 44 kB gzipped (212 kB tidak termampat, sifar kebergantungan npm luaran) |
| Jumlah Muatan Web | Bawah 1.8 MB (termasuk semua sprite visual dan latar belakang termampat) |
| Masa But Sejuk | Bawah 450 milisaat pada sambungan selular 4G mudah alih |
| Sasaran Kadar Bingkai | 60 FPS stabil merentasi pelayar desktop dan mudah alih |
| Muatan Aset Audio | Tepat 0 bait bagi kesan bunyi dan penjujuk muzik prosedural |
| Pengesahan Automatik | 78 ujian unit dan regresi automatik lulus dalam 0.29 saat |
| Sasaran Penyerahan | Cloudflare Pages (Aplikasi Web Progresif dengan pengedaran pinggir) |
| URL Boleh Main Langsung | https://angrybird-2d.pages.dev |
| Repositori Sumber | github.com/ihsanberahim/angrybird-2d |
Alami Pemusnahan Secara Langsung
Tarik getah lastik, selaraskan arka trajektori anda, dan saksikan menara kubu hutan tumbang dalam simulasi fizik masa nyata.
👉 Main Lastik: Stone Siege Sekarang dalam Pelayar Anda
(Dimuatkan dalam masa kurang sesaat. Serasi dengan pelayar desktop dan skrin sentuh mudah alih.)