-
-
Gameplay
Inspiration
I wanted to give Twitch viewers something to compete in without asking them to stop watching the stream and constantly enter commands.
Bottle flipping seemed like a good fit. The goal is immediately recognizable, and a bottle wobbling on the edge of a platform gives everyone a reason to watch. Put a viewer’s profile picture on that bottle, add other players and moving obstacles, and suddenly that landing matters.
That became Bottle Flip Challenge: a tournament where viewers join with one chat command, then watch their bottles compete through a shared physics simulation.
What it does
Viewers type !play in Twitch chat to enter. The game uses their actual Twitch username and profile picture to personalize a bottle, which a robotic arm flips into an obstacle course.
Bottles can collide in midair, bounce off trampolines, get struck by swinging hammers, ride conveyors, catch wind currents, and travel through portals. Those interactions determine what happens. There is no predetermined winner or animation that forces a successful landing.
A bottle must balance on its base or cap for two seconds to advance. A base landing advances one level; a cap landing advances two, without skipping the final stage. The standard course has ten levels, and the first finishers earn up to five podium places.
Each physical arena supports up to 50 bottles. Larger fields are divided into additional arenas within the same competition. Seeded courses provide different platform arrangements, routes, and obstacle combinations between matches while keeping the course consistent for participants within a match.
The streamer can watch the overall action, cycle through occupied levels, follow the leading level, or watch individual players. Viewers can open a separate personal camera to follow their own bottle without changing the streamer’s view.
Creator Clash adds competition between Twitch communities. Instead of only cheering for themselves, viewers can join to help their streamer’s team.
The game is designed to run alongside a stream. It is silent, supports a compact 3:4 OBS presentation, and includes a short host tutorial. Standard, Night, Halloween, and Christmas appearances give streamers different visual options without changing the competition.
How I built it with Codex
I used OpenAI Codex throughout development, from the first playable prototype to the Twitch integration, physics, graphics, room system, and testing.
My role was to define the experience, provide sketches and visual references, review the actual game, and keep refining what did and did not work. Codex implemented changes, inspected browser output, ran tests, and helped investigate problems. Development was a repeated cycle of building, watching, measuring, and correcting.
The application uses TypeScript, Three.js for the dimensional graphics, and Rapier 2D for the underlying physics. Twitch EventSub receives chat commands, and the Twitch API supplies participant identities and profile images.
The host runs the authoritative simulation. Firebase supports hosting, authenticated room ownership, and delivery of match data to independent viewers. Different cameras can show the same competition without changing its physical outcomes.
I also used Codex to run complete matches and compare recorded physics across Chromium and WebKit. The latest verification covered 681 automated tests across the project and Extension work, with 317 replay cases matching in each browser.
Challenges
The hardest part was making the game unpredictable without making it feel arbitrary.
One wind implementation could keep bottles floating above a platform instead of letting them land. Codex helped reproduce the problem and identify the cause. We replaced the constant lift with a stronger opening gust that fades away, giving the obstacle a noticeable effect without trapping bottles indefinitely.
Procedural generation presented a different problem: a map could technically have a new seed while still looking almost identical. I pushed the generator toward multiple recognizable layouts, more substantial structural variation, and compatible obstacle combinations. The goal was a different course, not the same platforms moved slightly sideways.
Camera behavior mattered just as much. Showing every bottle at once could make the action too small to enjoy, while switching subjects too often made it difficult to follow. The shared camera and personal cameras needed different priorities.
We also explored more detailed bottle-material and water models. Some added cost or produced unstable behavior, so they were not shipped. The game uses a simplified physical model with visual water motion, not a full fluid simulation.
What I learned
I learned that passing tests and feeling finished are different things. A mechanic can work correctly but be too weak to notice. A camera can keep a bottle technically on screen while still making its landing hard to watch.
Working with Codex was most useful when I could give it a specific observation, reproduce the problem, and compare the result. Asking for “more polish” was less effective than explaining exactly what felt wrong and checking the next build in motion.
I also learned to separate complexity from quality. A simpler model that behaves consistently and runs smoothly can serve the game better than a more ambitious system that introduces instability.
What I’m proud of
The project connects a very small viewer action to something personal and watchable: type !play, see your own avatar on a bottle, and follow its progress through the tournament.
The real Twitch demonstration shows that complete connection, from the chat message to the actual username and avatar appearing on a bottle and entering a genuine launch. The browser game also supports independent personal viewing, so the main broadcast does not have to choose between showing the competition and following every participant.
Current status and what’s next
The browser game is the main submission and does not require a Twitch Extension. Its built-in Demo uses simulated participants with the same gameplay and physics, allowing the competition to be explored without signing into Twitch.
I have also built a companion Twitch Panel Extension with live viewing and camera controls. Version 0.1.0 is in Hosted Test; it has not been submitted for Twitch review or released publicly.
General cloud publishing remains restricted to the owner pilot. The next release work is completing broader broadcaster, device, and audience-capacity testing, then making hosting available more widely and taking the Extension through review.
Challenges we ran into
Accomplishments that we're proud of
What we learned
What's next for Bottle Flip Challenge
Built With
- chatgpt
- codex
- firebase
- github
- openai
- rapier
- three.js
- twitch
- typescript
