The Dandelion Wars

The Dandelion Wars is a WebXR-only defense game built for js13kGames 2024. You stand in a field, pluck dandelions, and literally blow to launch their seeds at alien invaders. Microphone input is required: if you cannot blow, you cannot fire, and cursed 13-seed flowers can hack the battlefield.

Gameplay loop

• Pick up a dandelion with the VR controller trigger.
• Aim by holding the flower in front of you; the closest enemy to the line from camera to flower is highlighted and targeted.
• Blow into the mic to launch the seeds as a swarm of projectiles.
• Enemies spawn in waves, advance toward the player, and drain lives on impact.
• A cursed 13-seed dandelion can flip the fight by hacking enemies into retaliating.

WebXR input and UI

The game boots into an immersive-vr session with local-floor, bounded-floor, hand-tracking, and layers enabled. Controller rays handle pick-up interactions, while targeting is derived from the camera-to-flower line. Lives and score are rendered as pixel-text on the controllers, and enemy health floats above each target using the same instanced text system.

GPU simulation and targeting

Seed projectiles and enemy ships are simulated on the GPU using a 64x64 float texture (4096 slots):

• computeVelocity.glsl handles attraction to targets, avoidance, collisions, and the cursed 13-seed behavior.
• computePosition.glsl integrates movement for active units only.
• computeAggregate.glsl packs minimal data for async CPU readback, which updates lives, scores, and spawn queues.

A custom GPUComputationRenderer (adapted from Three.js) runs the compute passes and asynchronously reads back buffers so CPU game logic can respond without stalling the render loop.

Rendering and world building

• Terrain is a procedural plane with sinusoidal height displacement and a pixelated grass texture generated at runtime.
• 10,000 instanced grass blades use a custom vertex shader for sway and per-instance randomness.
• Dandelions are assembled from lathe geometries and instanced seeds distributed via a Fibonacci sphere.
• Seed projectiles are instanced meshes whose shader orients them to velocity and tints by owner.
• The sky is a gradient sphere using onBeforeCompile shader injection for a lightweight horizon fade.

Audio and microphone design

Audio is fully procedural:

• A Web Audio music engine schedules chords, melody, and simple drums through oscillators, a low-pass filter, and convolution reverb.
• A mini-synth generates short positional notes for hits and launches using pooled THREE.PositionalAudio instances.
• The mic uses an AnalyserNode FFT to detect breath intensity and to animate seed wobble before launch.

Build constraints

The build pipeline uses Webpack and GLSL minification, then compresses the final bundle with Roadroller and AdvZip to meet the js13kGames 13 KB limit. The competition page lists a 13 KB zip (13,309 bytes) and a WebXR category scorecard.

Scores and feedback (js13kGames 2024 page snapshot)

• WebXR score: 24.4 / 24.8 (normalized 96.23%).
• Criteria: Theme 4 / 4.6, Innovation 4.4 / 4.4, Gameplay 4 / 4.6, Graphics 4 / 4.6, Audio 4.2 / 4.2, Controls 3.8 / 4.6.

Selected expert notes:

• "Super original idea to blow to shoot the dandelion." - Fernando Serrano Garcia, October 4, 2024.
• "The microphone launch is a genuinely new input scheme." - Kieran Farr, October 4, 2024.
• "Amazing fit to the theme." - Sebastien Vandenberghe, October 4, 2024.

Development snapshots

Early progress captures from September 2024 show the core field layout, dandelion scattering, and alien targets taking shape.