# Prompt: Create Slime Volleyball

Create a Slime Volleyball game - a recreation of the classic 1999 web game. Use vanilla HTML5 Canvas and JavaScript with no frameworks or build step.

## Game Overview

A 2D side-view game where two semi-circular "slimes" hit a ball over a net. Player controls the left slime, AI controls the right. First to 6 points wins.

## Files to Create

1. `index.html` - HTML page with canvas (800x400), minimal CSS
2. `game.js` - All game logic

## Controls

- `A` / `D` - Move left/right
- `W` - Jump
- `SPACE` - Restart after game over

## Game Rules

- Ball hits ground on opponent's side = you score
- Scorer becomes the server
- Ball can bounce off back walls (not out of bounds)
- Unlimited touches per side
- Slimes cannot cross the net

## Physics Specifications

**Constants:**
- Canvas: 800x400
- Ground height: 50px from bottom
- Net: 6px wide, 80px tall, centered
- Slime radius: 50px
- Ball radius: 15px
- Gravity: 0.5 (applied each frame)
- Slime speed: 5
- Slime jump velocity: -10
- Ball max speed: 15

**Slime physics:**
- Instant horizontal movement (no inertia)
- Affected by gravity when jumping
- Can change direction mid-air

**Ball physics:**
- Full momentum and inertia
- Affected by gravity
- Bounces off walls with 0.8 energy retention
- Speed capped at max to prevent glitches

**Ball-slime collision:**
- Slime is a semi-circle (only top half collides)
- Calculate normal vector at collision point on curve
- Reflect ball velocity along normal
- Add slime's velocity to ball (moving into ball = harder hit)
- This means WHERE on the curve you hit determines bounce direction

## Visual Style

- Sky: Light blue (#87CEEB)
- Ground: Gray (#555555)
- Net: White
- Slimes: Yellow (#FFD700)
- Ball: Yellow (#FFD700)
- Slimes have eyes: white circles with black pupils that track ball position

## Game States

1. **SERVING** - Ball bounces on server's slime, locked to their x-position. Starts when player presses any key (or AI timer expires).
2. **PLAYING** - Active gameplay with physics and collision.
3. **POINT_SCORED** - 1-second pause, then reset to SERVING.
4. **GAME_OVER** - Display winner, wait for SPACE to restart.

## Serving Mechanics

- Ball starts on top of server, bouncing up and down
- Ball's x-position is locked to server's x-position
- Ball has vy=-8 bounce velocity
- For player: serve starts when any movement key pressed
- For AI: serve starts after 1-second timer

**Important:** During SERVING state, disable AI movement logic - otherwise AI moves and ball follows (since ball.x is locked to slime.x).

## AI Implementation

### Trajectory Prediction

Simulate ball path frame-by-frame to predict landing spot:
- Apply gravity and velocity each step
- Account for wall bounces
- Return x-position where ball crosses ground level

### Positioning Strategy

**Key insight:** To hit ball toward net, position so ball hits LEFT side of slime curve.
- Target position = predicted landing spot + 25 pixels to the right
- This makes ball hit left side of curve → bounces left toward net

### Movement Logic

```
if ball is on AI's side or coming toward AI:
    move toward target position (landing spot + offset)

    if ball is descending and close:
        jump
        move toward net while jumping (adds momentum to hit)
else:
    return to home position (75% across court)
```

### Jump Conditions

- Ball must be descending (vy > 0)
- Ball must be above slime (dy < 0)
- Ball must be within range (distance < 130)
- Move toward net while jumping to angle the hit

### AI Serving

Two-phase approach:
1. **Move phase:** Move to the RIGHT of where ball will land (away from net). Don't jump until in position.
2. **Jump phase:** Once positioned, wait for ball to descend, then jump while moving toward net.

Random offset (20-50px) each serve for variety in ball placement.

## Common Bugs to Avoid

1. **Ball flies off screen:** Gravity too low. Use 0.5.

2. **Ball moves with AI during serve:** During SERVING, ball.x is locked to slime. If AI logic runs and moves slime, ball follows. Fix: Disable AI movement when AI is server during SERVING state.

3. **AI bounces ball straight up:** AI positions directly under ball, hitting center of curve. Fix: Offset positioning + move toward net while jumping.

4. **Double ball update on serve transition:** When state changes from SERVING to PLAYING mid-frame, both serving code and ball.update() might run. Fix: Use flag to skip serving physics when transitioning.

5. **AI serve doesn't go over net:** AI tries to jump while still moving to position. Fix: Two-phase serve - move first, THEN jump.

## Code Structure

```javascript
// Constants
// Game state variables
// Input handling (keydown/keyup)

class Slime {
    constructor(x, isPlayer)
    update()  // gravity, movement, boundaries
    jump()
    draw()    // semi-circle + eyes
}

class Ball {
    constructor()
    update()  // gravity, movement, wall/net collision
    draw()
}

function checkBallSlimeCollision(ball, slime)
function predictBallLanding()
function updateAIServe(slime)
function updateAI(slime)

function resetBall()
function resetPositions()
function resetGame()
function scorePoint(scorer)

function update()  // main game logic
function draw()    // render everything
function gameLoop()

// Initialize and start
resetPositions()
gameLoop()
```

## Testing Checklist

- [ ] Player can move and jump
- [ ] Ball bounces off slimes correctly
- [ ] Ball bounces off walls and net
- [ ] Scoring works (ball hits ground)
- [ ] Server switches after point
- [ ] Player serve works (ball bounces until key press)
- [ ] AI serve works (ball goes over net)
- [ ] AI returns shots (doesn't just bounce straight up)
- [ ] Game ends at 6 points
- [ ] Restart works
- [ ] Eyes track ball position