🐍 Snake Game
Classic Snake game with 10 challenging levels, obstacles, and increasing difficulty
About This Demo
This demo showcases advanced Xote features through a complete game implementation:
- Game Loop - Recursive setTimeout pattern with level-specific speeds
- Complex State - Multiple signals managing snake, food, obstacles, and game state
- Collision Detection - Spatial logic for walls, obstacles, and self-collision
- Keyboard Input - Effect-based event listeners with proper cleanup
- Progressive Levels - 10 levels with increasing speed and obstacle complexity
- Reactive Rendering - Dynamic grid rendering with Component.list
Game Features
Controls
- Arrow Keys or WASD to move
- Space to pause/resume
- Context-aware buttons for game actions
Progression
- Levels 1-2: Learn the basics (200-180ms)
- Levels 3-4: Obstacles introduced (160-140ms)
- Levels 5-6: Complex patterns (120-110ms)
- Levels 7-8: Advanced challenges (100-90ms)
- Levels 9-10: Expert mode (80-70ms)
Implementation Highlights
The Snake game demonstrates several important patterns:
- Reactive Game Loop - Uses recursive setTimeout with signal-based state updates
- Effect Cleanup - Keyboard listeners properly registered and cleaned up
- Computed Configuration - Level settings computed reactively from level number
- Component Composition - GameGrid, GameInfo, GameControls, GameStatus components
- State Machine - Game states: Paused, Playing, GameOver, LevelComplete
- Dynamic Styling - Reactive style attributes for food position updates