Space Invaders
A vertical-scrolling shoot-'em-up with enemy waves, a scaling boss (REBEL CRUSHER), pause, and highscore persistence.
No highscore record — play now
'use client'
import { SpaceInvaders } from '@/components/games/space-invaders'
function SpaceInvadersDemo() {
return (
<div className="flex w-full items-center justify-center p-4">
<SpaceInvaders className="w-full max-w-sm" />
</div>
)
}
export default SpaceInvadersDemo
Installation
Usage
import { SpaceInvaders } from '@/components/games/space-invaders'
<SpaceInvaders className="w-full max-w-sm" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
config | DeepPartial<SpaceInvadersConfig> | {} | Configuration overrides (colors, speeds, boss, spawn…) |
showControls | boolean | true | Show the controls/status bar |
onScoreChange | (score) => void | - | Called when the score changes |
onStateChange | (state) => void | - | Called on idle/playing/paused/gameOver |
onGameEnd | ({ score, level }) => void | - | Called when the run ends |
className | string | - | Container className |
Theming
Colors default to your theme's CSS variables and adapt to light/dark automatically:
<SpaceInvaders
config={{
colors: {
player: 'var(--foreground)',
playerBullet: 'var(--primary)',
enemyBullet: 'var(--destructive)',
enemy: 'var(--muted-foreground)',
background: 'var(--muted)',
},
}}
/>Controls
| Key | Action |
|---|---|
| ↑↓←→ / WASD | Move |
| Space | Fire (hold to auto-fire) |
| P / Esc | Pause |
Gameplay
Waves of enemies descend and fire back. Every 10th level is a boss fight against REBEL CRUSHER, which scales in health and fire-rate each time (REBEL CRUSHER, II, III…). One hit costs a life; defeating a boss grants a bonus and an extra life.
Hook
For full control, drive the engine yourself:
import { useSpaceInvaders, DEFAULT_CONFIG } from '@/components/games/space-invaders'