Delivering a physics-based destruction game inside a mobile web browser presents distinct technical constraints. Mobile browsers enforce strict memory limits, dynamic garbage collection pauses, and single-threaded execution on CPUs with variable performance. When an arcade game requires tens of megabytes of downloads before the title screen appears, players drop off before the initial scene initializes.
Lastik: Stone Siege was designed to solve this friction. Inspired by traditional Malaysian wooden slingshots (lastik), the game lets players fling authentic regional stones at precarious towers constructed from bamboo, timber, stone, and terracotta clay pots (labu sayong), dislodging mischievous helmeted monkey troops (kera and mawas).
The entire system design, slingshot kinematics, custom impulse physics solver, procedural Web Audio synthesizer, and automated regression test suites were planned, developed, and verified inside Antigravity using Gemini. Working within Antigravity allowed rapid mathematical modeling of non-linear spring tension, instant conversion of architectural concepts into a zero-dependency web engine, and the creation of a 78-test verification suite, shipping a polished web experience in days.
👉 Launch and Play Lastik: Stone Siege Live in Your Browser
(Instant play, no download or install required, touch and desktop ready)
The Stack at Your Fingertips
| Layer | Selected Technology | Why Chosen | What Was Rejected |
|---|---|---|---|
| Engine & Runtime | HTML5 Canvas 2D + Vanilla ES6+ | Sub-second cold boot, zero npm dependencies, 44 kB gzipped bundle | Godot 4 or Unity WebAssembly exports (15 to 30 MB download penalties) |
| Physics Solver | Custom 2D Impulse Physics Engine | Rotated bounding-box impulses, ground toppling torque, and stack stability | Matter.js or Box2D Wasm (bundle bloat, numerical instability in vertical towers) |
| Audio Subsystem | Procedural Web Audio API | Zero audio downloads, algorithmic 16-step sequencer, hardware-clock playback | Audio sprite MP3/WAV packages (10 to 15 MB audio payloads) |
| Slingshot Kinematics | Quadratic spring curves + catenary sags | Authentic rubber resistance, dynamic band thinning, post-launch elastic recoil | Linear pull approximations and rigid stretched sprites |
| Asset Pipeline | Google Flow & Imagen 3 prompt sheets | Cohesive tropical cartoon aesthetic, modular sliced layers with transparency | Manual hand-drawn sprite production cycles and uncompressed assets |
| Testing & Quality | Python 3 (unittest) + Playwright | 78 automated tests verifying kinematics, impulse limits, and regression parity | Manual browser testing and untested state machines |
| Delivery | Cloudflare Pages + Wrangler | Global edge distribution, instant static caching, automated CI deployment | Dedicated VPS or centralized application servers |
1. Engine Architecture: Zero-Dependency Canvas over Heavy WebAssembly Exports
Full game engines such as Godot 4 and Unity offer rich visual editors and built-in 2D physics nodes. In fact, early prototypes for Lastik: Stone Siege were drafted with Godot 4 using GDScript scenes. However, exporting modern native engines to the browser introduces steep operational penalties for casual games.
Godot 4 WebAssembly exports generate compressed binaries ranging from 15 to 30 megabytes. Compiling and instantiating those large modules monopolizes the browser main thread during startup, creating multi-second loading screens on mobile devices. Furthermore, multi-threaded WebAssembly exports require specific cross-origin isolation headers (Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy), making it difficult to embed the game inside webviews, third-party social portals, or sandboxed iframes.
Lastik: Stone Siege eliminates this runtime weight by executing on a custom engine built with vanilla ES6+ JavaScript and the standard HTML5 Canvas 2D API. The entire game runtime, scene management, procedural sector generator, and rendering pipeline live in a single 212 kB file that compresses to under 44 kB gzipped.
The rendering pipeline runs an immediate-mode 60 FPS loop with CSS containment that maintains a crisp 16:9 aspect ratio. A dynamic virtual camera system smoothly tracks the projectile across a 2,400-pixel playing field, zooming out dynamically during high-arc launches and panning smoothly between the slingshot anchor and enemy towers. Rendering directly to Canvas 2D avoids shader compilation delays and eliminates the risk of lost WebGL context states when mobile users switch browser tabs.
2. Physics Simulation: Custom Impulse Solver over Generic Rigid-Body Engines
General-purpose 2D physics libraries like Matter.js or Box2D solve complex continuous constraint manifolds. While versatile, their generalized contact solvers frequently struggle with tall, delicate architectural towers. In dense vertical stacks, subtle iterative rounding errors cause structural blocks to vibrate, drift, and prematurely collapse before a single stone is launched.
To guarantee rock-solid structures, Lastik: Stone Siege implements a custom impulse physics solver tailored to projectile destruction:
- Rotated Bounding Box Collisions: Blocks compute their oriented bounding extents using trigonometric projections. Collision checks evaluate penetration depths along contact normals and apply instantaneous momentum exchanges based on relative velocity and object mass.
- Damped Angular Velocities: Blocks apply air rotational damping (0.96) and ground friction (0.70) to prevent unrealistic propeller-like spinning.
- Restorative Ground Toppling Torque: When an angled block strikes the ground, the engine calculates the horizontal offset of its lowest contact corner relative to its center of mass. It then applies a corrective counter-torque that settles tilting beams flat on the ground.
- Slender Post Stability Rules: Vertical pillars with height-to-width ratios exceeding 1.8 require an overhead structural load to balance. If a supporting roof beam is destroyed, unsupported slender posts realistically tip over onto their side.
- Stack Sleeping States: Tower blocks initialize in a resting sleep state. They wake up only when struck by a projectile or when an underlying support block shatters, keeping per-frame physics computation well under 0.2 milliseconds.
3. Slingshot Kinematics: Non-Linear Spring Physics and Dynamic Elastic Layering
The mechanical satisfaction of a slingshot game rests entirely on the tactile response of pulling and releasing the band. Simple linear drag formulas feel spongy and disconnect the player from the simulated tension of the rubber bands.
Lastik: Stone Siege models slingshot kinematics with authentic mechanical constraints:
- Clamped Pull Mechanics: Dragging vectors clamp smoothly to a maximum radius of 120 pixels, with dynamic ground clearance calculations preventing the projectile from dipping below the dirt line during downward pulls.
- Non-Linear Quadratic Spring Force: Pull velocity scales according to a quadratic spring tension formula, combining a base force (650 units) with an accelerated spring coefficient (850 units) multiplied by the pull ratio. This creates progressive resistance that rewards deep, intentional pulls.
- Deadzone Cancellation: Releasing the pouch within a 20-pixel radius of the resting anchor safely resets the band without consuming ammunition or firing the stone. An alternate tap on desktop or second-finger tap on mobile aborts an active pull immediately.
- Dynamic Band Layering and Thinning: As tension increases, the visual width of the rubber bands dynamically stretches and thins from 6.2 pixels down to 2.8 pixels. When idle or pulled lightly, bands simulate catenary sag.
- Visual Depth Stacking: Rendering follows a precise six-layer order: ForkBack prong, LeftBand, loaded stone, leather pouch, RightBand, and ForkFront prong. This creates three-dimensional depth with zero 3D engine overhead.
- Elastic Release Recoil: Upon release, the slingshot executes a 0.14-second damped sinusoidal recoil oscillation, simulating the physical snapback of latex bands.
// 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. Projectile Arsenal and Material Damage Modeling
A tactical destruction game requires distinctive projectile behaviors that match different architectural vulnerabilities. Lastik: Stone Siege equips players with four regional stone types inspired by Malaysian geology:
- River Pebble (Batu Sungai): The standard round river stone with a 1.0x mass and 1.0x velocity multiplier, providing dependable penetration, high bounce, and balanced trajectory stability.
- Granite Boulder (Batu Pejal): A massive charcoal rock with a 3.2x mass multiplier and 0.7x launch speed, carrying immense kinetic momentum to crush fortified lower-tier stone pillars.
- Flint Stone (Batu Api): A volcanic projectile that detonates into an explosive radial shockwave on impact or via a mid-air screen tap, launching nearby structural beams outward with rapid velocity impulses.
- Split Slate (Batu Serpih): A brittle multi-layered slate projectile that splits into three distinct sub-projectiles in an expanding spread cone upon tapping the screen mid-flight.
Structural materials respond to projectile kinetic energy using calibrated mechanical attributes:
- Wood Planks: 1.0x mass, 30 HP, medium friction (0.4), and a low damage threshold (25 units).
- Bamboo Poles: Lightweight segmented beams with high springiness and low structural mass.
- Stone Blocks: 4.0x mass, 120 HP, high friction (0.7), and a high damage threshold (75 units), effectively absorbing light pebble hits while demanding heavy boulder impacts.
- Terracotta Clay Pots (Labu Sayong): 0.5x mass, 10 HP, and a fragile 8-unit threshold, instantly shattering upon direct contact into terracotta shards.
Impacts exceeding damage thresholds deplete structural health and spawn directional debris shards that inherit kinetic momentum, triggering crushing domino cascades across neighboring structures.
5. Audio Synthesis: Real-Time Web Audio over Multi-Megabyte Sound Packs
Audio files typically consume over half of the total asset payload in casual web games. Bundling background music tracks, impact variations, and UI chimes in pre-rendered WAV or MP3 files commonly adds 10 to 15 megabytes of compressed data. Decoding those files on mobile devices consumes device RAM and risks audio thread glitches.
Lastik: Stone Siege bypasses audio download overhead entirely by synthesizing all sound effects and gameplay music in real time using the native Web Audio API:
- Procedural Sound Effects: Tension stretch sounds modulate sawtooth oscillators from 90 Hz to 160 Hz. Slingshot release sweeps a sine oscillator from 320 Hz down to 70 Hz. Wood fractures, stone clacks, and clay shatters route pitch-bent triangle and high-pass oscillators through biquad filters. Explosions sweep low-frequency sawtooth waves down to 20 Hz, triggering automatic ducking on active music channels.
- Algorithmic 16-Step Music Sequencer: The title and gameplay soundtracks are generated programmatically without pre-recorded loops. Operating at 104 BPM (title) and 118 BPM (gameplay), the custom sequencer steps through a Southeast Asian D-minor and Gamelan pentatonic scale. It coordinates synthetic kick drums, filtered wood clicks, hi-hat noise bursts, sawtooth basslines, chiming bells, and warm triangle synthesizer pads.
- Hardware-Clock Accuracy: All synthesizer voices schedule notes directly against the continuous hardware clock (
AudioContext.currentTime). Music tempo and sound effects remain sample-accurate even if visual rendering fluctuates during dense particle explosions.
// 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);
}The total audio asset download size for the entire procedural synthesis engine is exactly 0 bytes.
6. Testing & Tooling: 78 Automated Regression Tests and the Physics Playground
Maintaining reliable physics interactions across endless procedural sectors requires rigorous automated validation. Lastik: Stone Siege relies on a dual-track testing and tuning architecture:
- Automated Python Test Suite (
test_game_logic.py): A comprehensive test suite containing 78 unit and regression tests executes in under 0.3 seconds. The suite verifies pull clamping geometry, non-linear launch velocity math, kinematic trajectory parabolas, damage threshold formulas, star rating rules, and DOM state transitions. - Asset Integrity Verification: Automated image array tests examine the alpha channels of sliced sprite assets. Tests verify that the isolated wooden slingshot fork prong contains zero baked-in bands or pouches, confirming that elastic bands are generated dynamically in code.
- The Asset & Physics Playground (
playground.html): A standalone browser-based developer harness provides an isolated visual workbench. The playground allows developers to adjust spring tension constants, test stone impact reactions, inspect rotated bounding boxes, trigger debris shard physics, and audition synthesizer frequencies in isolation before committing gameplay balances. - Edge Deployment Pipeline: The game deploys directly to Cloudflare Pages via Wrangler (
npm run deploy). Static assets are distributed across edge data centers worldwide, delivering sub-second initial load times across all target regions. - Cross-Browser & Device Verification: Headless and visual test runs verified consistent 60 FPS performance, touch-event responsiveness, and sound playback across Safari (iOS 16+), Chrome Android, and evergreen desktop browsers (Firefox, Chrome, Edge).
Built with Antigravity and Gemini
Creating a physics destruction game with a zero-dependency custom engine, real-time procedural audio, and extensive automated test suites requires fast iteration across multiple disciplines. For Lastik: Stone Siege, the entire engineering lifecycle was directed, coded, and tested inside Antigravity using Gemini:
- Slingshot kinematics, quadratic spring tension equations, and rotated bounding-box collision math were derived and validated directly within conversational threads.
- The procedural Web Audio synthesis engine, including all physical impact sound effects and the 16-step algorithmic soundtrack, was coded in vanilla JavaScript with zero external audio libraries.
- The master asset generation prompt sheets (
NANOBANANA_PROMPTS.md) were structured for Google Flow and Imagen 3 to establish consistent cartoon game art across all projectiles, materials, and monkey troops. - The 78-test Python test suite was authored and run locally, validating physics formulas and regression stability with instant test feedback.
- Mobile viewport adaptations, touch event listeners, and full-screen handlers were verified across browser sessions using automated Playwright workflows.
Production Metrics Summary
| Metric | Measurement |
|---|---|
| Production JavaScript Bundle | Under 44 kB gzipped (212 kB uncompressed, zero external npm dependencies) |
| Total Web Payload | Under 1.8 MB (including all compressed visual sprites and backgrounds) |
| Cold Startup Time | Under 450 milliseconds on mobile 4G connections |
| Target Frame Rate | Stable 60 FPS across desktop and mobile browsers |
| Audio Asset Payload | Exactly 0 bytes for sound effects and procedural music sequencer |
| Automated Verification | 78 automated unit and regression tests passing in 0.29 seconds |
| Deployment Target | Cloudflare Pages (Progressive Web App with edge distribution) |
| Playable Live URL | https://angrybird-2d.pages.dev |
| Source Repository | github.com/ihsanberahim/angrybird-2d |
Experience the Destruction Live
Stretch the slingshot, adjust your trajectory arc, and watch fortified jungle towers collapse in real-time physics.
👉 Play Lastik: Stone Siege Now in Your Browser
(Loads in under a second. Compatible with desktop browsers and mobile touch screens.)