Independent Product Design · Playable AI-Assisted Prototype · v0.97
Kaijū Run | 怪獣ラン
A playable AI-assisted browser game demonstrating game UX, HUD hierarchy, combat feedback, visual direction, and front-end implementation.
Kaijū Run
Playable browser prototype · v0.97
Kaijū Run began as a 0-to-1 experiment in using AI to accelerate concepting and development while applying rigorous product-design thinking.
The functional browser game includes two playable kaijū, three defensive waves, a destroyer boss, resource management, scoring, trivia, and responsive desktop/mobile behavior.
The Opportunity
Prove product thinking through a functional experience—not a static AI demo.
Early visual concepts for Godzilla's Atomic Blast.
Early visual concept designs & art direction Mechagodzilla.
I pushed beyond prompting to build a working prototype with rules, failure states, balance, responsive HUD behavior, sound, and production polish.
The challenge was clarity: communicate enemies, missiles, bombs, wave progress, health, energy, shields, score, boss status, and alerts without overwhelming the player.
Design Strategy
Treat the game as a product system with clear states, hierarchy, feedback, controls, and tuning.
The core loop is simple: learn the controls, survive pressure, use abilities wisely, defeat the boss, and advance to Tokyo.
The HUD uses a predictable scan path: health and energy left, abilities right, and score, wave, and boss status centered.
Short prompts—Incoming Jets, Bomber Alert, Sink The Destroyer, and Tokyo’s Defenseless—keep instructions clear and cinematic.
AI-Assisted Workflow
AI accelerated exploration and implementation; play-testing and design judgment shaped the result.
ChatGPT and AI-assisted coding sped up gameplay ideas, JavaScript, debugging, balance, HUD copy, trivia logic, and implementation. Image generation supported art direction; browser testing shaped the final system.
The prototype uses HTML, CSS, JavaScript Canvas, Bootstrap, AI-assisted coding, browser testing, asset optimization, and QA.
I removed clutter, clarified feedback, tuned difficulty, standardized assets, refined scoring and trivia, and tested across screen sizes.
Game Loop
Three waves, one destroyer boss, one final push into Tokyo.
Start: Choose Godzilla or Mechagodzilla. Shared rules preserve balance; color, audio, attacks, and sprites create distinct identities.
Defensive Wave 1 · 6 jets: Learn movement, attacks, shields, missiles, and survival.
Defensive Wave 2 · 8 jets: Adds pressure, bombers, and screen-space management.
Defensive Wave 3 · 10 jets: Increases missile timing, shield use, and submerging pressure.
Boss Fight · 0/1: Sink the destroyer, then advance toward Tokyo.
Playable Prototype
A compact arcade build focused on readability, timing, and payoff.
Kaijū Run game HUB
The prototype includes three waves, a boss fight, health, energy, shields, Atomic Roar, submerging, bombers, guided missiles, high scores, timed facts, and touch controls.
Trivia adds randomized questions, answer placement, a 15-second timer, clear feedback, score tracking, and a mobile-first mode.
Mechanics & Rules
Core rules for the player, enemies, boss, scoring, and trivia.
Player systems: 150 HP, 100 energy, three shield charges, atomic beam, movement weight, submerging, and Depth Pressure.
Special abilities: Atomic Shield blocks damage; Atomic Roar clears threats once per run without bypassing the boss.
Enemy systems: Jets fire guided missiles; bombers create limited, readable carpet-bombing events.
Boss system: The destroyer uses guided missiles, visible health, and a staged sinking sequence.
Scoring: Rewards destruction, survival, damage control, speed, and boss completion, with shared and local high scores.
Trivia mode: Randomized questions, answers, a 15-second timer, feedback, and a compact arcade score.
Kaijū Attributes
Shared rules, distinct identities: organic atomic power versus mechanical assault.
Mechagodzilla’s red energy language contrasts with Godzilla’s green atomic system.
Godzilla: Green atomic effects, an organic silhouette, matching shield states, and classic roar audio.
Mechagodzilla: Red laser effects, a mechanical silhouette, matching shield states, and a heavier weaponized identity.
Shared baseline: Both characters use the same health, energy, shield, attack, scoring, and collision rules.
Asset System
A compact production kit for characters, enemies, effects, environments, HUD, and audio.
Playable sprites: godzilla-exact.webp, godzilla-shield-exact.webp, mecha-exact.webp, and mecha-shield-exact.webp make character and shield states clear.
Enemy and boss sprites: jet_001.webp, jet_002.webp, jet_003.webp, bomber-01.webp, bomber-02.webp, and destroyer.webp define the threat ladder.
Weapons and effects: laser-weap.webp, laser-weap-red.webp, bomb.webp, kaiju-roar.webp, kaiju-shield.svg, and kaiju-roar.svg clarify attacks and abilities.
Environment assets: wave-green-3840.png, wave-redblue-3840.png, city-green-3840.png, and city-redblue-3840.png create motion without visual noise.
Audio: godzilla_roar.mp3, mecha_godzilla_roar.mp3, arcade blips, and procedural music provide lightweight feedback.
HUD & Feedback Design
The HUD had to stay readable as the action intensified.
Survival data stays left, abilities right, and progression centered, moving from Defensive Wave 1 0/6 through Defensive Wave 2 0/8, Defensive Wave 3 0/10, and Boss Fight 0/1.
Damage tint, shields, particles, splashes, missiles, health, score, trivia states, and short alerts explain events in under a second.
Tuning & Balance
Challenging enough to feel earned, simple enough to read.
Balance keeps the kaijū powerful but vulnerable. Missiles feel dangerous, bombers remain readable, and the boss communicates progress clearly.
Fixed wave targets—6, 8, and 10 jets—make objectives and pacing clear.
Trivia uses the same principle: a 15-second timer, clear answer states, and a repeated correct-answer reveal.
Ravage The City
Version 0.97 is playable and includes trivia mode.
Choose a kaijū, break the perimeter, sink the destroyer, advance toward Tokyo, or play a quick trivia round.
Takeaways
What the project proved about AI-assisted product design.
01
AI moves faster with clear direction; the designer still makes the decisions.
02
Functional prototypes expose state, feedback, hierarchy, edge cases, and pacing.
03
Game UX and product UX share clarity, hierarchy, responsiveness, feedback, and payoff.
Role: Product Definition, Game UX, Interaction Design, Visual Direction, Front-End Development, AI-Assisted Prototyping
Tools: ChatGPT, image generation, AI-assisted coding, HTML, CSS, JavaScript Canvas, Bootstrap, PHP/JSON, asset optimization, and browser QA