Frankenstein Handheld Game

A high-stakes Frankenstein ritual game using a custom console 3D model, particles, procedural audio, and Kiro. Master the controls to bring the monster to life!

Comment

Inspiration

I had wanted to make a 3d playable handset for a while, I made a fried egg handset but never got round to making the game so this project was the perfect opportunity to use Kiro to actualise my project. My inspiration for the Frankenstein Handheld project was a synthesis of two core ideas: the high-stakes atmosphere of classic horror, and the satisfying tactile feedback of retro gaming hardware.

I wanted to move beyond the traditional 2D game format and place the player directly behind a physical object, a custom console to perform a chaotic, timed ritual. This meant bridging the gap between a detailed 3D environment and quick-reaction 2D gameplay. The goal was simple: make the player feel like a mad scientist juggling highly volatile parameters, where the slightest mistake resulted in a dramatic, electrical failure.

What it does

The Frankenstein Handheld is a browser-based ritual simulator disguised as a custom 3D gaming console. Players act as the Mad Scientist, interacting with the console's buttons (D-Pad, A/B, Start) and the joystick to follow precise, timed, on-screen surgical and electrical prompts. The game runs on a Finite State Machine (FSM) that dictates the ritual phases. Success in stabilising the monster leads to the triumphant "It's Alive!" voice payoff, rising eyebrows and exploding particles, while failure also triggers a chaotic explosion of particles, flashing red eyes, shaking bolts and a game reset.

The game features real-time visual feedback, including EKG readings, dynamic particle systems, and procedural audio, creating a high-tension, immersive experience entirely within a single web file.

It is designed to work on desktop and there are multiple options for controls, I prefer to use the four arrows on my keyboard to control the joystick and the mouse to click the Start, A/B and D-Pad. I have also tested it on iPad in Chrome and Safari, it works best with Apple Pencil and you just need to tap for Start, A/B and D-Pad and swipe the joystick in the correct direction.

How I built it

The project was built as a "chimera" of specialised libraries, all orchestrated by a rigorous TypeScript and FSM architecture.

3D Foundation: I began by designing the physical console model in Nomad Sculpt and in Blender. This franken.glb model became the persistent, interactive environment, handled entirely by three.js. Every button press is smoothed out using Tween.js to give it weight and physical authenticity. There is also sound when you press a button and a special ding for the Start button.

Gameplay Logic: I implemented the game using two FSMs: RITUAL_STATE (the current task, e.g., STATE_ENERGY_CHANNEL) and GOLEM_CONDITION (the monster's mood). This separation allowed the visual feedback to constantly react to the golem_madnessLevel independent of the main ritual progression.

Visual Polish: To enhance the horror theme, I created all 2D assets, the monster patient, the table, and the critical Surgeon's Hands using Adobe Fresco. These sprites are dynamically swapped based on the RITUAL_STATE using a Surgeon Sprite Map to guide the player's action. Furthermore, I implemented three.js Particle Systems to represent the raw, volatile power transfer, culminating in a chaotic particle burst on failure.

Immersive Audio: The soundscape was achieved by combining two distinct methods. All dynamic, atmosphere-building sounds (the hum, the static, the heart monitor that scales in BPM) were generated procedurally using Tone.js. For the key narrative payoff, the custom "It's Alive!" voiceover was generated using Suno and embedded directly into the code as a Base64 string, ensuring zero external file reliance.

I used Kiro to implement all of these features and to control the animations for the png files such as the movements of the hands, the particle simulations, where to place the text, when and how actions happen such as button presses, eyebrow raises or the persistent glow of the head stitches.

Challenges I ran into

The biggest challenge was the tight integration between the asynchronous 3D rendering and the synchronous game logic within a single-file environment:

3D-2D Synchronization: Getting the 2D sprites (like the Surgeon's Hands) to align perfectly with the 3D console screen required careful calculation of viewport coordinates and 3D camera angles which was achieved using vibe coding with Kiro.

Initial Audio Glitches: Kiro intergrated Tone.js which required careful initialization to avoid audio glitches, especially when dealing with continuous ambient loops.

Code Consistency: Adhering to the custom Mad Scientist Style Guide (specifically the SCREAMING_SNAKE_CASE for all core functions like HANDLE_PLAYER_INPUT) required setting up a Spec-driven document where I also instructed Kiro on the coding languages I wanted to use.

Accomplishments that I'm proud of

I am most proud that this project is a masterclass in full-stack game development, demonstrating proficiency in:

Cohesive Immersion: Successfully blending a high-fidelity 3D model (the console) with 2D pixel-art gameplay overlays (the patient and surgeon's hands) into a single, seamless, and highly thematic environment.

Dynamic Visuals: Implementing state-driven particle systems using three.js that actively reflect the monster's madness level, moving beyond static visuals to truly dynamic, reactive effects.

Architectural Rigour: Enforcing the custom Mad Scientist Style Guide and building the core game flow around a robust FSM, resulting in highly readable, maintainable, and type-safe code in TypeScript using Kiro.

Technical Completeness: Achieving a fully self-contained experience by utilising Base64 embedding for the critical voice clip and procedural generation via Tone.js, eliminating the need for any external server or file dependencies.

What I learned

The project provided critical lessons in managing complexity in an intensive environment:

I learned that achieving the illusion of the hands performing an action on the 3D table, not just over the screen worked great while using Kiro as it understood where I had placed the hand positions and worked with my animation instructions through vibe coding.

I learned that working with Kiro was really fun because I could work with the files directly on my computer and use terminal and Chrome to see the prototype which I could then screenshot and share with Kiro to get changes made swiftly.

What's next for Frankenstein Ritual Game

For the future of the Frankenstein Ritual Game, I would focus on extending the gameplay and narrative depth:

Procedural Rituals: Introduce a system for generating random ritual sequences and input prompts, ensuring high replayability.

Additional levels with increasing difficulty.

A multiplayer version where there are two surgeons working together to create the monster.

Built With

Share this project:

Updates