The Combat Loop Prototype

What you’re building

This is the one. Everything before this lesson was research, planning, and business strategy. Right now you are building the first thing someone can actually play. A BloodRayne-inspired combat room — side-scrolling, fast, violent — running in your browser. Thirty minutes from now you will be slashing through an enemy with blade combos, dodging attacks with i-frames, watching health bars drain, and filling a blood rage meter that rewards aggression. All built by an AI CLI from a single prompt.

Rayne never waited around. Neither should you.

💬This is your proof-of-concept moment

Every game studio pitch starts with a playable prototype. Not a slide deck. Not a design document. A thing someone can pick up and feel. When you show investors, collaborators, or a publisher what “BloodRayne remake” means, you open a browser tab and hand them the keyboard. This lesson builds that artifact. It is rough, it uses placeholder art, and the animation is basic — but the combat loop is real, and that is what matters.

The game runs entirely in the browser using Phaser 3. No Unity install, no Godot download, no compiled binaries. You edit code, refresh the browser, and see the result. That tight feedback loop is exactly why Phaser is the right engine for prototyping with AI CLI tools — the AI writes JavaScript, you open index.html, and you are playing.

ℹSoftware pattern: Game loop with state management

Every action game is a loop: read input, update state, render frame. The combat prototype adds layered state — player state (idle, attacking, dodging, hurt), enemy state (idle, patrol, attacking, dying), and global state (health, rage meter). This state machine pattern applies to any interactive system, not just games.

The showcase

Here is what you will have when the AI finishes building:

Player character with idle, run, attack, dodge, and hurt animations (colored rectangles for now — art comes later)
Blade combo system — press Z up to three times for a light-light-heavy chain, each hit with different damage and knockback
Dodge roll on X with invincibility frames — 0.3 seconds where you pass through enemy attacks untouched
Enemy that patrols, chases when you get close, attacks on a cooldown, and has a health bar that drains
Player health bar at the top left, enemy health bar above the enemy sprite
Hit feedback — screen flashes red on player damage, enemy flashes white on hit, knockback on both
Blood rage meter that fills with every successful hit, displayed as a red bar below the health bar
Keyboard controls — arrow keys to move, Z to attack, X to dodge

Everything runs from a single index.html file that loads Phaser from CDN. No build tools, no bundler, no npm install. Open the file in your browser and play.

The prompt

Open your terminal, navigate to your project folder, start your AI CLI tool, and paste this prompt:

Build a playable Phaser 3 combat prototype inspired by BloodRayne. This is a
side-scrolling 2D action game running entirely in the browser. Create a single
folder called combat-prototype with these files:

PROJECT STRUCTURE:
combat-prototype/
  index.html       (loads Phaser 3 from CDN, contains all game code inline)

GAME SPECIFICATIONS:

1. CANVAS AND SCENE
   - 800x450 pixel canvas, black background
   - Single scene called CombatRoom
   - Phaser 3 loaded from CDN: https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js
   - All game code in a single <script> block inside index.html
   - Simple ground platform at the bottom (gray rectangle, full width)
   - Optional: dark atmospheric background gradient (deep red to black)

2. PLAYER CHARACTER (Rayne)
   - 32x48 pixel rectangle, colored dark red (#8B0000)
   - Spawns at left side of screen
   - Movement: arrow keys, run speed 200px/s, with acceleration/deceleration
   - Jump: up arrow, jump velocity -350, gravity 600
   - Three-hit blade combo on Z key:
     * Hit 1 (slash): 10 damage, small knockback, 200ms duration
     * Hit 2 (cross-slash): 15 damage, medium knockback, 250ms duration
     * Hit 3 (heavy cleave): 25 damage, large knockback, 400ms duration
     * Combo window: 500ms between hits to continue chain
     * If combo window expires, reset to hit 1
     * Visual: extend a white attack hitbox rectangle in front of player during each swing
   - Dodge roll on X key:
     * Dash 150px in facing direction over 300ms
     * Invincible during the roll (i-frames -- disable collision with enemy attacks)
     * 800ms cooldown before next dodge
     * Visual: player sprite becomes semi-transparent during dodge
   - Facing direction: flip sprite based on last horizontal input

3. ENEMY (Soldier)
   - 28x44 pixel rectangle, colored dark green (#2F4F2F)
   - Spawns at right side of screen
   - Behavior states:
     * IDLE: stands still for 1-2 seconds
     * PATROL: walks back and forth in a 200px range
     * CHASE: moves toward player at 120px/s when player is within 250px
     * ATTACK: stops and performs a melee strike (20 damage) when within 50px
     * HURT: brief stagger animation (flash white, knockback 100px)
     * DEAD: fall over, fade out, respawn after 3 seconds at original position
   - Attack cooldown: 1.5 seconds between attacks
   - Attack telegraph: enemy flashes yellow for 300ms before striking
   - Health: 100 HP

4. HEALTH BARS
   - Player health bar: top-left corner, 200x16px, red fill on dark background
     * 100 HP max, show numeric value beside the bar
   - Enemy health bar: floating above enemy sprite, 50x6px, red fill
     * Updates in real time as damage is dealt
   - Both bars animate smoothly (tween the width, don't snap)

5. BLOOD RAGE METER
   - Below the player health bar, 200x10px, starts empty
   - Fills by 8% per successful hit on the enemy
   - Drains by 2% per second when not hitting
   - Color gradient: dark red when low, bright crimson at 50%, glowing
     orange-red at 100%
   - At 100%: player attack damage doubles, player sprite tints bright red
   - Rage bonus lasts 5 seconds then meter resets to 0
   - Show "BLOOD RAGE" text that pulses when meter is full

6. HIT FEEDBACK AND GAME JUICE
   - On player hit by enemy: screen flashes red (camera flash), brief screen shake
   - On enemy hit by player: enemy flashes white for 100ms, knockback in
     hit direction, small particle burst (3-5 red squares scatter from hit point)
   - On enemy death: larger particle burst (10-15 red particles), screen
     freeze for 50ms (hit stop)
   - On dodge: brief afterimage effect (semi-transparent copy of player at
     dodge start position, fades over 200ms)
   - Combo counter: display current combo count in large text that fades
     ("x2", "x3") near the player when chaining hits

7. UI OVERLAY
   - Top-left: Health bar + Blood Rage meter
   - Top-right: "COMBAT PROTOTYPE" title text in red, small font
   - Bottom-center: control hints -- "Arrow Keys: Move | Z: Attack | X: Dodge"
   - When enemy dies, show "ENEMY DEFEATED" text center screen for 2 seconds

8. TECHNICAL REQUIREMENTS
   - Use Phaser.Physics.Arcade for all collision and movement
   - All sprites are simple colored rectangles created with graphics objects
     (no external image assets required)
   - Game must run by simply opening index.html in a browser -- no server needed
   - Frame rate target: 60fps
   - All timing uses Phaser delta time, not setTimeout/setInterval

The game should feel fast and responsive -- inspired by BloodRayne's aggressive,
combo-driven combat. The player should feel powerful but vulnerable. The dodge
roll should feel snappy and rewarding. Every hit should have visible and audible
(later) impact.

💡Copy-paste ready

That entire block is the prompt. Paste it exactly as written. The level of detail is deliberate — Phaser has dozens of ways to handle collision, input, and animation, and vague prompts produce games that feel wrong. Every number in that prompt (200px/s run speed, 500ms combo window, 300ms dodge duration) is a tuning value you will adjust later. But you need a working baseline first, and specificity gets you there on the first generation.

What you get

After the AI finishes (typically 90-120 seconds), you will have one file:

combat-prototype/
  index.html

That is the entire game. One file. Open it in your browser.

Play it

cd combat-prototype
# Option 1: Just open the file directly
open index.html        # macOS
xdg-open index.html    # Linux
start index.html       # Windows/WSL

# Option 2: If you need a local server (some browsers block local file access)
npx serve .

Arrow keys to move. Z to attack — hit it three times fast for the full combo chain. X to dodge through the enemy’s attacks. Watch the health bars. Fill the blood rage meter and feel the damage double.

You are playing a game that did not exist three minutes ago.

If something is off

These are the most common issues and the follow-up prompts that fix them:

Problem	Follow-up prompt
Player falls through the floor	`The player falls through the ground platform. Make sure the ground is a static physics body and there's a collider between the player and the ground using this.physics.add.collider(player, ground).`
Combo doesn’t chain — each Z press is hit 1	`The combo system resets every time. Track a comboStep variable (0, 1, 2) and a comboTimer. On Z press, if comboTimer hasn't expired (500ms window), advance to next step. If it expired, reset to step 0. Use this.time.delayedCall for the combo window timer.`
Dodge roll doesn’t grant invincibility	`During dodge roll, the player still takes damage. Set a boolean isDodging to true during the roll, and in the enemy attack overlap check, skip dealing damage if isDodging is true. The i-frames should last the full 300ms dodge duration.`
Enemy doesn’t chase the player	`The enemy stays in PATROL state and never chases. Check the distance between player and enemy every frame -- if Phaser.Math.Distance.Between(player.x, player.y, enemy.x, enemy.y) < 250, switch to CHASE state and set enemy velocity toward the player at 120px/s.`
Health bars don’t update	`The health bars show full health and never change. Make sure the bar fill width is recalculated every frame: fillWidth = (currentHP / maxHP) * barMaxWidth. Use a Phaser.GameObjects.Graphics object and redraw it in the update loop.`

Deep dive

You have a playable prototype. Here is what is happening under the hood and why each system matters.

The combo system is a state machine

The three-hit chain is not three separate attacks — it is a single system with a timer. When you press Z, the game checks: are we inside the combo window? If yes, advance to the next hit (slash, cross-slash, cleave). If the window expired, start over at hit 1. This is the same pattern every action game uses, from Devil May Cry to Hades. The combo window duration (500ms in the prompt) is the first thing you will want to tune — too short and the combo feels impossible, too long and it feels sluggish.

I-frames make dodge feel fair

Invincibility frames during the dodge roll are not a cheat — they are a core design mechanic. Without i-frames, dodging through an attack still deals damage, which makes the dodge feel useless. With i-frames, the player is rewarded for timing their dodge correctly. The 300ms duration and 800ms cooldown create a risk-reward decision: dodge at the right moment and you are untouchable, spam it and you are stuck in cooldown when the next attack comes.

Blood rage rewards aggression

BloodRayne was never a defensive game. Rayne charged in, slashed through enemies, and fed on them to heal. The blood rage meter captures that identity mechanically — stay aggressive and you get rewarded with doubled damage. The drain-over-time (2% per second) means you cannot build rage and then play safe. You have to stay in the fight. This is a design statement: this game rewards the player who pushes forward.

Hit feedback is not optional

The screen flash, knockback, particle burst, and hit-stop on death are not polish — they are communication. Without feedback, the player does not know whether their attack connected. With feedback, every hit feels impactful. Game developers call this “juice” and it is the single biggest difference between a prototype that feels like a tech demo and one that feels like a game.

🔍Why Phaser 3 for a BloodRayne prototype

Phaser 3 runs in the browser. That means: no compile step, no engine install, instant iteration. The AI CLI writes JavaScript, you refresh the page, and you are playing. For a prototype whose purpose is to prove the combat loop feels right, this speed matters more than graphical fidelity. When you are ready for production-quality art and performance, you can port the proven design to Unity, Godot, or Unreal. But you prove the design here, in the browser, where iteration is measured in seconds, not minutes.

Customize it

You have a working combat room. Now make it yours, one prompt at a time.

Add a second enemy type

Add a ranged enemy to the combat room. It's a 24x40 dark purple rectangle
that stands at distance (preferred range: 200-300px from player), fires a
small projectile every 2 seconds, and retreats if the player gets too close.
The projectile is a small yellow circle that travels at 300px/s and deals
15 damage. The ranged enemy has 60 HP. Keep the existing melee soldier.

Add a health drain on blood rage activation

When blood rage reaches 100% and activates, Rayne regenerates 2 HP per
second for the 5-second duration. This references BloodRayne's blood
feeding mechanic -- aggression is how Rayne healed. Show small green
+2 text floating up from the player each heal tick.

Add a combo finisher

If the player completes all 3 hits of the blade combo and presses Z one
more time within 300ms, trigger a finisher move: a wide arc slash that
hits all enemies in a 150px radius for 40 damage with a 100ms screen
freeze and large particle burst. The finisher has a 3-second cooldown
independent of the normal combo. Show "FINISHER" text in gold.

Try it yourself

Paste the main prompt into your AI CLI tool.
Open index.html in your browser and play through a full enemy encounter.
Pay attention to what feels wrong — is the combo window too tight? Is the enemy too aggressive? Is the dodge distance too short? Write down three things you would change.
Pick one of those three things and write a follow-up prompt to fix it. Be specific about the values you want (exact pixels, exact milliseconds).
Try one of the customization prompts above.
Kill the enemy five times in a row using only combos. If you can do it without dodging, the enemy is too passive — adjust its aggression with a follow-up prompt.

This is the loop for the rest of the game-building lessons: generate, play, feel, adjust. The AI writes the code. You make the design decisions. Rayne would approve.

💡You have a playable game

Seriously. You just built a playable combat prototype in your browser from a text prompt. Not a mockup, not a wireframe — a thing with controls, health bars, and a combo system. Every game that ever shipped started as something rougher than this. You are building a BloodRayne remake and you have combat. The next lesson adds movement feel — the physics that make running, jumping, and dashing feel as fluid as the original.

What you'll learn