Dino Runner Game React component
A canvas endless-runner in the style of the offline dino game, pixel-drawn running dino, procedurally spawned cactus obstacles, three difficulty speeds, tap/space/arrow-up to jump, and a high-score tracker.
About the Dino Runner Game component
Dino Runner Game is an endless runner in the style of the browser's offline dinosaur game. The dino runs to the right on its own, cacti come in at random gaps, and you jump over them with Space, the up arrow or a tap. Each cactus cleared is a point, the game speeds up as you go, and touching a cactus ends the run.
Players choose Easy, Medium or Hard before a run, which sets the starting speed, and defaultDifficulty sets which one is selected first. The high score is saved in localStorage, and storageKey keeps it separate when there is more than one game on a site. The game is drawn on a 320px tall canvas that fills the width of its container, and it stops while it is scrolled out of view. It can also open as a popup from a pill button.
When to use it
Use it on a 404 or offline page, a maintenance or launch countdown, or a developer portfolio, where the browser-dinosaur reference fits.
For a game with more going on, use Snake Game or Space Invaders Game.
Installation
Add the Dino Runner Game component to your project with the shadcn CLI. It lands in components/dino-runner-game.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/dino-runner-gameOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<DinoRunnerGame /> 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 |
|---|---|---|
| defaultDifficulty | "easy" | "medium" | "hard" | "medium" |
| storageKey | string | "" |
| asPopup | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| widgetIcon | string | — |
- defaultDifficulty"easy" | "medium" | "hard"Default: "medium"
- storageKeystringDefault: ""
- 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 Dino Runner Game with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Dino Runner Game FAQ
- How do I jump?
- Press Space, the up arrow or tap the game. The same keys start a run from the menu, and Enter also starts one.
- Does it get harder over time?
- Yes. The speed goes up a little at regular intervals during a run, on top of the starting speed of the chosen difficulty.
- Can the dino duck?
- No. There are only cacti, so jumping is the only move.
- Can I change the colors?
- There is no theme prop. The dino, the cacti and the white court are drawn in the canvas code, so change the fill colors in drawDino and drawCactus at the top of the file.
