What I Learned Building TYPO SIEGE in Canvas and TypeScript
I wanted a small project that forced tighter thinking about game loops, input latency, feedback, and browser rendering without hiding behind a framework-heavy stack.
What I built
- A real-time Canvas-based gameplay loop with falling-word enemies and escalating wave difficulty.
- A combo and power-up system that rewards speed instead of just raw accuracy.
- Responsive controls so the game still works on smaller screens and touch devices.
- Synthesized sound effects and persistent scores without pulling in heavy runtime dependencies.
Technical decisions
- Kept rendering in Canvas 2D for direct control over performance and frame updates.
- Modeled game state explicitly in TypeScript to keep enemy logic, scoring, and progression predictable.
- Used Web Audio API and localStorage to add polish while keeping the deployment lightweight.
Why this project matters
- It demonstrates systems thinking in a constrained environment where performance and clarity matter.
- It shows I can build interaction-heavy frontend work without relying on a large framework to do the hard parts.
- It gives hiring teams a concrete example of shipping something playful but technically disciplined.
Links
- GitHub: https://github.com/neutral-Stage/typo-siege
- Live URL: https://typo-siege.vercel.app/
- Primary language: TypeScript
Takeaway
This project reflects the kind of work I enjoy most: shipping practical software, tightening the developer or user workflow, and documenting the technical decisions clearly enough that another engineer can pick it up and keep moving.
