# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Running the Game

No build step required. Open in browser via XAMPP:

```
http://localhost/minigame/crackegg/
```

Or open `index.html` directly in any browser.

## Architecture

This is a single-file game — all HTML, CSS, and JavaScript live in `index.html`. There are no external dependencies, frameworks, or build tools.

**Asset folders:**
- `img/` — sprites and backgrounds (WebP/PNG)
- `sound/` — background music and crack sound effects (MP3)

**Game flow:**
1. Page loads → `createEggs()` dynamically generates 5 egg `<div>` elements arranged in a 3-row triangle layout
2. First user interaction → background music auto-plays (browser autoplay policy workaround)
3. Player clicks an egg → `handleCrack(egg)` fires: plays crack sound, triggers shake animation, swaps image to `egg_cracked.webp`, disables further clicks on that egg
4. After the first crack, a 1-second timeout reveals `#winnerPage` overlay

**Key state:**
- `gameState.musicOn` — tracks music toggle
- `firstCrack` (boolean closure variable) — ensures winner screen shows only once

**Layout:** Mobile-first, max 400px on desktop. Eggs positioned absolutely within `#eggContainer` using percentage-based `left` values. Each egg has a unique bounce animation duration for visual variety.

**Localization:** The game title is in Chinese (`zh` lang tag). Winner screen has both `winnerBg.webp` (default) and `winnerBg-en.webp` (English variant) — swap the background-image in `#winnerPage` CSS to switch languages.
