ClipTrap

Inspiration

I wanted to put a fresh spin on classic territory-capturing arcade games like Qix and Volfied. My goal was to combine that vintage spatial puzzle mechanic with actual physics, reactive hazards, and player-authored content.

What it does

You steer a ship to carve up a shifting playfield while dodging enemies. Drawing lines splits the terrain, discarding the smaller section and popping open trapped crates for power-ups like shields or speed boosts. I also built a visual level editor where you can draw custom maps, place hazards, and share your designs directly as a Reddit post.

How I built it

I used Phaser 4 for rendering and WebGL effects, paired with Matter.js to handle the collision and sensor physics. For the heavy lifting on vector geometry, I brought in Paper.js to calculate shape splits and clean up path loops. The level editor is a React and Mantine workspace with an embedded Phaser canvas for instant playtesting.

Challenges I ran into

Real-time vector splitting is surprisingly prone to breaking when players draw messy, self-intersecting loops, so I had to write custom cleaning routines to prevent crashes. Another big headache was making multi-segment enemies like the snake follow each other smoothly. Rigid physics joints looked awful, so I ended up tracking historical coordinate trails to pull trailing segments along behind the leader naturally.

Accomplishments I'm proud of

I'm really happy with how the enemy movement turned out. By projecting velocity vectors along wall normals, I got a sliding, wall-hugging pathing behavior that lets hazards slide along boundaries naturally. I also made the level and enemy generation highly extensible; both map paths and compound enemy segment hierarchies are completely defined and scaled through simple, modular configurations.

What I learned

Gluing a vector math library to a physics engine takes a lot of coordinate translating and boundary syncing. I also realized how crucial Finite State Machines are for keeping a game's code readable and easy to debug when you're managing complex drawing states and AI behaviors.

What's next for ClipTrap

I plan to finish the enemy editor so players can design and share their own custom bosses. I also want to add moving obstacles, timed hazards, and a buried treasure system where you can excavate hidden artifacts under the terrain, something I couldn't quite wrap up in time for this build. At last user flairs.

Built With

• paper
• phaser.js
• react
• typescript