This is a web version of the classic snake game.
bun i
yarn dev # vite, localhost:5173
yarn build
yarn test # to use vitest
bun test --watch # to use bun testIt is written with React 18, 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
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 bun build to build with Vite.
| dependency | purpose |
|---|---|
| Bun | packages, testing |
| Vite | bundling, local dev, build, testing |
| React | frontend library/architecture |
| XState | state management |
| thi.ng/transducers | have 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 |
Run unit tests with yarn test for Vitest or bun test --watch for bun test. Same tests, though.