Neon Vector Defender

Inspiration

To create a modern take on classic vector arcade games with strategic depth, combining the aesthetic of 1980s wireframe graphics with contemporary web technologies and progression systems.

Overview

Neon Vector Defender is a browser-based arcade defense game where players protect the System Core—a digital mainframe containing humanity's preserved knowledge—against waves of corrupted geometric entities called Vots (Viral Object Threads).

Players control a ship that must neutralize incoming threats across fifty campaign levels organized into ten narrative arcs[Arc 1 with 5 levels, implemented in the current game version]. The game features multiple Vot types with distinct behaviors, from fast-moving triangular vectors to heavily armored square anomalies and projectile-firing diamond shooters.

It consists of a progression system with Data Fragments (soft currency) earned through combat and Core Cycles (premium currency) from level completion. Players unlock achievements, compete on leaderboards, and pursue daily, weekly, and monthly quest objectives. The game uses a three-attempt system: failing a level three times resets progress, creating meaningful tension while allowing players to learn through repeated attempts.

How it was built

The rendering system was built using HTML5 Canvas with custom WebGL shaders for post-processing effects including bloom, chromatic aberration, and particle rendering. Vot movement was implemented using flow field pathfinding rather than traditional A* algorithms, allowing hundreds of entities to navigate dynamically without individual path recalculation.

The audio subsystem uses Web Audio API for procedural sound synthesis, with all effects generated dynamically based on in-game events. Background music layers respond to gameplay intensity, with parameters influenced by Vot count, player health, and session duration.

For the Devvit deployment, it was built using the @devvit/start build system with a Hono-based server handling API routes for score persistence and leaderboard management through Reddit's Redis storage.

Challenges during Development

Mostly:

• Configuring the build system to properly bundle client and server code separately while externalizing platform-provided dependencies
• Implementing flow field pathfinding that produces natural swarm behaviors without overwhelming performance with hundreds of active entities
• Balancing particle effects and bloom rendering to achieve the signature neon aesthetic while maintaining 60 FPS with 200+ active entities
• Creating procedural audio that responds dynamically to gameplay state without external audio assets
• Designing touch controls for mobile that feel responsive while not obscuring the gameplay area

Accomplishments that we're proud of

Built a game for the Reddit Devvit platform with integrated leaderboards and score persistence

Successfully achieved 60 FPS performance with 200+ simultaneous entities through object pooling and ECS architecture.

Created a fully procedural audio system with no external assets that dynamically responds to gameplay intensity.

What I learnt

• Flow field pathfinding creates more organic and visually interesting enemy movement patterns than traditional pathfinding algorithms
• Procedural audio synthesis through Web Audio API can create rich soundscapes without asset loading overhead
• Touch controls require careful consideration of screen real estate and visual feedback to feel responsive on mobile devices

What's next for Neon Vector Defender

• Complete additional narrative arcs beyond the current 1
• Implement multiplayer co-op mode with shared System Core defense
• Expand quest system with more varied objectives
• Integrate Reddit-specific features like flair rewards for achievement unlocks

Built With

• canvas
• devvit
• hono
• html5
• javascript
• redis
• typescript
• web-audio-api
• webgl