Generation Prompt
Page: Neuroevolution - Frogger AI
Slogan: "Neural networks that evolve to cross the road"
Structure:
- Widget before:title → h1 + p.slogan centered
- Widget left:history → Fitness history graph (canvas)
- Widget left:network → Neural network visualization (canvas)
- Widget right:stats → Statistics (generation, best score, alive, crossed)
- Widget right:controls → Play/Reset + Batch training
- Widget right:options → Settings
- Main → section.container.visual.size-600 ratio-1-1 with canvas 600×450
- Widget modal:claude → Documentation
Game config:
- 6 road lanes with cars moving in alternating directions
- Safe zones (green grass) at top (goal) and bottom (start)
- Frogs: 20px size, can jump up/left/right with cooldown
- Cars: 60×30, speed varies by lane (inner faster)
- Max score: 65535 (auto-win)
Neural network:
- Input size: 8 (frog x/y normalized, distance to nearest car for 3 lanes)
- Hidden layers: configurable (default [12])
- Output size: 3 (jump up, move left, move right)
- Activation: ReLU/Tanh/Sigmoid (selectable)
- Threshold: 0.5 for actions
Controls:
- Population: 10-500 (default 50)
- Mutation: 0-100% slider (default 20%)
- Network: dropdown (6/8/10/12/16/8-8/12-12)
- Activation: dropdown (ReLU/Tanh/Sigmoid)
- Speed: dropdown (0.5x/1x/2x/4x)
- Show Best: checkbox
- Play/Pause + Reset buttons
- Batch training: count input + Train button
Keyboard:
- Space: toggle play/pause
- Escape: stop batch training
Genetic algorithm:
- Elite count: 5
- Crossover: uniform crossover
- Mutation: Gaussian (rate adjustable, strength 0.3)
- Selection: fitness-based
Game loop:
1. Frogs decide actions based on neural network output
2. Move frogs according to decisions (with cooldown)
3. Update car positions (wrap around screen)
4. Check collisions → dead frogs
5. Update score (time alive + progress bonus + crossing bonus)
6. All dead or max score → next generation