-
-
SHIFTKEEP's seed-vault icon, retained in the Three.js edition. Created for this project with OpenAI image generation.
-
Three.js gameplay: front turrets fire, rear turrets reload. Every shift moves the whole six-position defense. Cinematic view.
-
The 3D title screen. Defend six rescue waves, then carry your formation into endless survival. Actual browser capture.
-
The workshop: buy Pulse, Lance, or Frost; upgrade, repair, and rearrange your formation before the next wave. Browser capture.
-
SHIFTKEEP in Three.js. A brass-and-teal seed-vault diorama, rendered with the game engine and promotional typography.
-
A little steel. A living future. Promotional 3D splash using the game renderer and editorial typography.
Inspiration
What if moving your defenses was also how you reloaded them?
SHIFTKEEP grew from that question: a portrait strategy game with two immediate controls and a tactical decision behind every press. You defend the last seed vault with turrets on a rotating conveyor. A little steel protects a living future.
What it does
Your formation is your reload mechanism. The front row fires into three enemy lanes. The back row reloads. Shifting left or right moves every turret, so recovering one empty weapon changes the coverage of the entire defense.
- Pulse: quick, dependable fire.
- Lance: armor penetration and piercing shots.
- Frost: slows enemies to give the formation time.
From wave two, a fully loaded turret held in reserve banks a charged shot. A Lance hit on a chilled enemy triggers a shatter. Timing turns reloading into an offensive choice.
Between waves, spend scrap on turrets, damage and reload upgrades, hull repairs, and formation changes. Clear six authored rescue waves to save the vault, then carry the same formation, upgrades, scrap, and remaining hull into endless survival. Four encounter patterns mix escalating threats, and the game remembers your best cleared wave in the same browser.
The new Three.js edition presents the arena as a brass-and-teal garden diorama. Distinct turret models, ammunition pips, reserve rings, recoil, beams, frost effects, and shatter fragments make the decisions visible. Seedlings appear as rescue waves are secured. Tactical and cinematic views show the same battlefield, with a graphics-quality toggle for lighter rendering.
The complete single-player loop includes onboarding, victory, defeat, pause, help, sound controls, and restart. The layout stays portrait, with touch buttons, conveyor swipes, and keyboard controls.
How I built it
I directed the project through prompts and feedback in Codex, which performed the substantial implementation work: simulation, interface, progression, the original Canvas version, the Three.js upgrade, packaging, tests, and documentation.
The 3D geometry and effects are built in code. OpenAI's built-in image generation created the original splash artwork and the icon retained in this edition. Game audio and the preview soundtrack are synthesized for the project. The new cover and splash use the actual 3D scene with editorial typography; the title, battlefield, and workshop screenshots are captures of the running browser game.
The playable build uses HTML5, JavaScript, CSS, and Three.js 0.180.0 / WebGL2. All original game code is readable and unminified in the root index.html. Three.js and its MIT license are included separately in vendor/, with assets referenced through relative paths. No AI service, account, or network connection is needed during play.
Challenges I ran into
An early automated strategy found that constantly spinning the formation could beat deliberate positioning. Adding movement and settling time made each shift commit the defense for a moment. Players must balance lane coverage, ammunition, and reserve timing.
The six-wave rescue provides a clear first objective. Optional endless survival lets that tactical system continue, with bounded encounter sizes and a saved best-wave record.
For the visual upgrade, I wanted the extra depth to clarify the game. The renderer reads the existing simulation without changing its rules. Instanced geometry, bounded effect pools, and reduced idle rendering keep the scene's work controlled. Graphics-context loss pauses the run safely.
Accomplishments
One movement system creates positioning, ammunition management, and combo setup. The 3D edition delivers the full rescue and survival loop in a self-contained game ZIP of about 0.51 MB, including the library, well below the event's 35 MB limit.
The exact packaged code passed 26 artifact checks and 28 simulation, interface, and graphics/lifecycle checks. Real browser checks covered portrait layouts and core interactions. Automated controllers completed the rescue and continued into endless survival. These checks are distinct from fresh-player and physical-phone testing.
What I learned
The interesting choice was already inside the constraint: six positions, three lanes, and one formation. Making the consequences readable—and preventing effortless constant rotation—improved the game more than adding another control would have.
How to play
Extract the game ZIP and open index.html, keeping assets/ and vendor/ beside it. Use a browser with WebGL2. Choose Defend the vault, then use Shift Left / Shift Right, swipe the conveyor, or press A/D or the arrow keys. Let turrets settle between shifts. Bring loaded reserves forward, send empty weapons back, and use the workshop between waves.
The replacement 42-second preview demonstrates rotation, reloading, charged reserves, shatters, and endless survival. It uses selected moments from a deterministic engine run through the actual 3D renderer, with animated explanatory text and original synthesized music. It is a mechanics demonstration, not a human-playtest recording.
What's next
Fresh-player and physical-phone playtests will guide onboarding, encounter balance, and accessibility. The Three.js build already includes the complete six-wave rescue and optional endless survival.
Log in or sign up for Devpost to join the conversation.