react-immutable-snake

react-immutable-snake is a Snake clone with a twist!

• The game logic is handled with immutable states (via react-redux). This means it's easy to save a history of game frames, which allows us to rewind time and render snapshots for each game frame.
• The game is rendered with Canvas API (via react-konva), so we are getting a high-performant, hardware-accelerated rendering.

Live demo: https://react-immutable-snake.netlify.app

Hooks

useKeyPress

Responds to keyboard events with the given callback

(callback: (e: KeyboardEvent) => any) => void

useKeyPress((e) => console.log(`${e.keyCode} was pressed!`)

useInterval

Sets an interval

(callback: () => any, delay: number) => void

useInterval(() => console.log(props.count), 1000)

useDirectionalInput

Responds to directional input with the given control scheme (according to the rules of Snake)

(
  scheme: Record<
    'left' | 'up' | 'right' | 'down',
    {
      readonly keyCode: number
      readonly callback: () => any
    }
  >,
  active: boolean,
  delay: number,
) => void

useDirectionalInput(
  {
    left: {
      keyCode: 37,
      callback: handleMoveLeft,
    },
    up: {
      keyCode: 38,
      callback: handleMoveUp,
    },
    right: {
      keyCode: 39,
      callback: handleMoveRight,
    },
    down: {
      keyCode: 40,
      callback: handleMoveDown,
    },
  },
  shouldRespondToDirectionalInput,
  50,
)

Local development

Clone this repository, and install the dependencies:

$ git clone https://github.com/TomerRon/react-immutable-snake
$ cd react-immutable-snake
$ yarn

Start the development server:

$ yarn start

Deployment

Deploy the app to Netlify by initializing a new Netlify site:

$ yarn netlify init --manual

Then deploy to a staging enviornment:

$ yarn deploy

Or deploy to production:

$ yarn deploy:prod

License

This project is licensed under the ISC License - see the LICENSE.md file for details.