Walkthrough: Your First Game

Goal: Create two markdown files that will guide all later work.

Create AGENTS.md with:
- Project name: Star Clicker Arena
- Stack: vanilla HTML, CSS, and JavaScript only (no frameworks, no build step)
- How to run: open index.html in a browser
- Rules: keep code simple; prefer few files; do not add npm unless I ask
- Definition of done for any task: game still opens via index.html with no console errors

Create SLICE.md with this vertical slice (do not expand scope):
- Player moves with WASD and arrow keys
- One enemy chases the player slowly
- Space attacks if the player is close enough; enemy loses HP
- Player has HP; touching the enemy damages the player on a cooldown
- On-screen HP text for player and enemy
- Enemy HP 0 → "You Win"; player HP 0 → "You Lose"
- Restart button reloads the match
- Out of scope: multiplayer, levels, inventory, sound (unless free and tiny later), particle engines, external assets required to play

Verification: show me the full contents of both files when done.
Do not create game code yet.

@AGENTS.md @SLICE.md

Goal: Scaffold the game so I can open index.html and see a canvas or playfield with placeholder shapes.

Create:
- index.html — loads css/style.css and js/main.js
- css/style.css — dark background, centered play area, readable HUD text
- js/main.js — starts a requestAnimationFrame loop, draws a player circle and an enemy circle, shows placeholder HP text

Constraints:
- Vanilla HTML/CSS/JS only
- No npm, no bundler
- Keep everything easy to read for a beginner
- Follow SLICE.md scope; movement/combat can be stubs but the page must run

Verification:
1. List the files you created
2. Tell me exactly how to open the game on my computer
3. I will open index.html and should see two shapes and HP text with no browser console errors

After scaffolding, stop and wait for my next message.

@SLICE.md @AGENTS.md @js/main.js @index.html @css/style.css

Goal: Fully implement the vertical slice in SLICE.md using the existing files.

Requirements:
- WASD + arrow key movement for the player; keep player inside the playfield
- Enemy constantly moves toward the player at a slower speed
- Space: if distance to enemy is within attack range, enemy HP decreases; small cooldown so holding space is not instant win
- Contact damage: if enemy touches player, player HP decreases on a short cooldown
- HUD shows Player HP and Enemy HP as numbers
- When enemy HP ≤ 0: freeze gameplay, show "You Win"
- When player HP ≤ 0: freeze gameplay, show "You Lose"
- Restart button (or on-screen button) resets HP and positions and resumes play
- Keep vanilla HTML/CSS/JS; no new libraries

Non-goals: sound, particles, multiple enemies, spritesheets, mobile touch (optional later)

Verification checklist (respond with each item checked):
1. How to move
2. How to attack
3. How contact damage works
4. How to win / lose / restart
5. Confirm no new dependencies were added

I will playtest manually after you finish. Fix any issues I report next.

@js/main.js @SLICE.md

Bug: [what you did] → [what you expected] → [what happened instead].
Browser console errors (if any): [paste]
Fix the smallest change that solves it. Do not add features.

@js/main.js @css/style.css @index.html @SLICE.md

Goal: Small polish pass only. Gameplay rules stay identical.

Add:
- Distinct colors for player vs enemy
- Brief flash or scale pulse on the enemy when hit
- Clearer win/lose panel styling (readable, centered)
- Show attack cooldown or a simple "Ready/Cooling" text if easy

Constraints:
- No new libraries
- No new game mechanics
- Keep performance fine on a laptop

Verification: I refresh index.html, complete one fight, and everything from Phase 3 still works.

# Example next feature prompt (after finish)
@js/main.js @SLICE.md
Add a score that counts seconds survived until win or lose.
Show it in the HUD. Do not change combat math.
Verification: I can see score increase while playing; resets on Restart.