-
-
-
Submitting with the "almost live" status, as per Valeria Khokhlova.
Inspiration
Three things collided at once this summer. The World Cup is on everyone's mind. One of the hackathon judges named their company Jedi on the Fly. And I have been spending every commute either watching Star Wars: The Clone Wars or deep in Reddit threads debating Anakin Skywalker's success (or failure) of "bringing balance to the Force."
I wanted something that felt like y8.com circa 2007 — the kind of browser game a 10-year-old finds during a free period, plays for 45 minutes trying to beat their own score, and thinks about on the bus ride home.
I went back to the scenes that actually stuck with me as a kid — not the lightsaber duels everyone talks about, but the worlds. The lava rivers of Mustafar. The twin suns over Tatooine. The neon rain of Coruscant at night. The chaos of a trench battle in the Outer Rim. Those are the backdrops. Soccer is just the excuse to visit them.
What it does
May the Kick Be With You is a browser-based arcade free-kick game with four playable Star Wars worlds, each with its own wind physics, unique obstacles, and visual style — all rendered procedurally on HTML5 Canvas with zero external assets.
The mechanics: Click and hold on the ball to charge power. Move your mouse left or right to aim. Release to kick. Longer holds = more power, higher arc, faster flight. A wind indicator tells you which way the Force — and the atmosphere — is pushing your shot. The four worlds: Mustafar — Volcanic lava planet. Lava eruptions burst from the ground with a warning phase before exploding. Outer Rim — Space trench battle. TIE fighters scream across the screen and volley blaster bolts. Coruscant — Rainy neon cityscape. Flying traffic ships weave across the goal. Tatooine — Desert under twin suns. BB-8s roll across at varying speeds.
Scoring: Consecutive goals build your streak. Miss, or get blocked by an obstacle, and your score resets to 0. Your best streak per world is saved locally and displayed on the landing screen's trophy cards — so each world has its own personal record to chase.
How I Built It
The entire game is a single self-contained HTML file — JavaScript, HTML5 Canvas for all rendering, CSS for UI chrome. Every visual element, backgrounds, obstacles, particle effects, wind physics, is drawn procedurally in Canvas at runtime. Technical highlights: Every world renders its background, obstacles, and effects from scratch using Canvas drawing APIs. Mustafar's lava glow, Coruscant's neon rain, Tatooine's heat shimmer — all procedural, no PNGs. Each world has bespoke obstacle logic. Mustafar's eruptions have a telegraphed warning phase before they fire. TIE fighters in the Outer Rim spawn randomly and volley in patterns. Coruscant's traffic follows lane logic. Tatooine's droids vary in speed and spacing. The physics model combines charge-based shot speed, aim direction, arc height, and per-world wind drift into one unified calculation. Wind affects the ball proportionally to how long it's in the air — weak shots drift more, powerful shots cut through. Per-world high scores persist via localStorage. Pendo is integrated for usage analytics.
What's next for May The Kick Be With You
The immediate next step is mobile — specifically building this as a native mobile experience with haptic feedback on goals and misses, touch-optimized controls, and sound effects that make GOALLLLLL feel as good as it looks.
Built With
- claudecode
- css3
- html5
- javascript
- novus
- pendo
- vercel
