Poly Skyscraper

Inspiration

We wanted to build something that makes geometry and basic physics feel practical rather than abstract. Games like Poly Bridge are popular because breaking structures under load gives instant, intuitive feedback. We realized that same visual feedback loop could help middle schoolers understand concepts like vector loads, ratios, and triangular rigidity without feeling like they are doing standard math worksheets.

What it does

Poly Skyscraper is an interactive web game where players design and build mid-rise to high-rise structures on a 2D grid canvas.

• Blueprint Mode: Players draw steel beams, concrete columns, and cables using a snap-to-grid coordinate plane. Every placement updates real-time math stats like overall height, perimeter, surface area, and total material cost.
• Stress Test Simulation: Switching to simulation mode runs a 2D physics engine that applies gravity and horizontal wind forces. Beams change color from green to red based on real-time tension and compression stress. If a structural joint exceeds its limit, the tower collapses.
• Math Puzzles: Levels set strict goals—such as reaching a target height under a specific budget, balancing the center of mass within the foundation, or forming stable triangular trusses.

How we built it

• Frontend: React with TypeScript, bundled with Vite and styled using Tailwind CSS.
• Physics Engine: Matter.js handles rigid-body dynamics, constraint forces, and joint breaking logic.
• Rendering: HTML5 Canvas handles custom low-poly background gradients, node snapped guides, and dynamic color-coding for stress loads.
• State Management: Zustand manages active inventory, budget constraints, and current level objectives.

Challenges we ran into

1. Mapping Physics Constraints to Math Values: Converting raw pixel distances and force vectors from Matter.js into clean, readable middle school math metrics (like meters, kilonewtons, and cost values) required fine-tuning scale factors so the math made practical sense.
2. Stress Color Calculation: Real-time tension and compression forces can fluctuate quickly in a 2D physics simulation. We had to average constraint stress over multiple frames to prevent screen flickering while keeping the green-to-red stress visual clear.
3. Performance: Running a dynamic physics canvas with dozens of connected beams alongside active React state updates caused framedrops on lower-end devices. Moving canvas rendering loops outside of React's render cycle fixed the frame rate.

Accomplishments that we're proud of

• Getting structural snapping and low-poly grid drawing to feel crisp and responsive.
• Implementing live color-coded stress feedback that lets players see structural load changes as wind blows against their tower.
• Building a system where algebra equations (budget caps) and geometry problems (truss stability) naturally determine whether a player wins a level.

What we learned

• How to extract constraint force telemetry out of Matter.js for custom canvas rendering.
• How tricky it is to balance realistic structural physics with accessible game design so levels stay fun instead of frustrating.

What's next for Poly Skyscraper

• Custom Level Builder: Allow teachers and students to create and share their own structural challenge maps.
• More Material Types: Add glass facades, tuned mass dampers, and foundation piling options for advanced levels.
• Classroom Mode: A simple dashboard for teachers to assign specific geometry problems and monitor student solution budgets.

Built With

• canvas
• css3
• html5
• javascript
• matter.js
• node.js
• react
• tailwindcss
• typescript
• vite
• zustand