Space Invaders Game React component
A canvas Space Invaders, a descending grid of pixel-drawn invaders that shoot back, three difficulty levels, keyboard controls on desktop and on-screen move/fire buttons on mobile, with a win/lose end screen.
About the Space Invaders Game component
Space Invaders Game is a shoot 'em up drawn on a canvas, with the invaders lined up to spell 404. You steer a ship along the bottom with the left and right arrow keys and fire with Space; holding Space fires a short burst and then pauses briefly. The invaders fire back at random, one hit ends the game, and clearing every invader wins it. Each invader destroyed is a point.
Players pick Easy, Medium or Hard, which change how often the invaders fire and how fast your ship and shots move, and Restart deals a fresh board. The wave waits for your first key press, so it never plays itself to a loss before anyone has touched it. On touch screens left, right and fire buttons appear under the board. The canvas fits the container width and is sharp on high-density screens, and lightMode switches to a light board.
When to use it
Use it on a 404 page, where the invaders spell out the error, or on a developer or gaming portfolio as a popup game.
For a runner with a single control, use Dino Runner Game. For a slower puzzle, use Minesweeper Game.
Installation
Add the Space Invaders Game component to your project with the shadcn CLI. It lands in components/space-invaders-game.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/space-invaders-gameOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SpaceInvadersGame /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| lightMode | boolean | false |
| accentColor | string | "#ffffff" |
| asPopup | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| widgetIcon | string | — |
- lightModebooleanDefault: false
- accentColorstringDefault: "#ffffff"
- asPopupbooleanDefault: false
- trigger"manual" | "delay" | "scroll"Default: "manual"
- delaySecondsnumberDefault: 4
- widgetPosition"bottom-right" | "bottom-left"Default: "bottom-right"
- widgetIconstring
Collections
Use-case pages that compare Space Invaders Game with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Space Invaders Game FAQ
- Do the invaders move or come down?
- No. They stay in their 404 formation and fire at random. The challenge is dodging their shots while you clear them.
- How many lives do I have?
- One. A single enemy shot ends the game, and the end screen shows how many invaders you destroyed.
- How do I play on a phone?
- On touch screens the game shows large left, right and fire buttons under the board. Hold a direction button to keep moving.
- Why doesn't Space fire?
- The game reads keys only while it has focus. Click the game once, or tab to it, then use the arrow keys and Space.
