This is a web version of the classic snake game.
pnpm install # install dependencies
pnpm dev # vite, localhost:5173
pnpm build # bundle in dist/
pnpm test # vitestIt is written with React 19, XState 5, and thi.ng/transducers.
Keyboard:
| control set | left | down | up | right |
|---|---|---|---|---|
| arrow | ← | ↓ | ↑ | → |
| hjkl | h | j | k | l |
Mobile: gamepad shows < 768 viewport width when the gamepad setting is responsive, and shows for all sizes when the gamepad setting is on.
- Speed: snake velocity in MS
- Board width & board height: what you expect =)
- Overlap: game over if the snake hits itself
- Wall: game over if the snake hits a wall
- Gamepad: whether or not to show the gamepad
- Theme: light or dark mode
Settings persist via local storage. Board width & board height are calculated in order to adjust to the viewport width & height unless they have been customized.
Like Settings, High Score persists via local storage.
Run pnpm build to build with Vite.
| dependency | purpose |
|---|---|
| pnpm | packages |
| Vite | bundling, local dev, build, testing |
| React | frontend library/architecture |
| XState | state management |
| thi.ng/transducers | fun with FP |
| classnames | help with vanilla css |
.
├── dist
└── src
├── components
├── hooks
├── machines
└── stories
React & XState have overlapping terminology, so beware the homonyms.
What is often thought of (in React world, at least) as “app state” is in this app the XState context. The XState states themselves are statechart states.
This XState context plugs into the React app via a React context provider. Note that a React context is agnostic as to what type of app state it’s providing to the app; the fact that it just so happens to be providing something that’s also called “context” is coincidental.
| XState Context | management of the app’s values that change over time |
| XState States | a model of the app in terms of statechart states |
| React Context | an arbitrary collection of app state that can reach all descendants |
| React Provider | a given React context’s root component |
Here is the statechart:
Run unit tests with pnpm test for Vitest.