react-simple-snake

A simple snake game created with the React JavaScript library.

• Demo
• Installation
  • To add it to your React app
  • To launch the development server
• Dependencies
• Usage
  • To import it in your component
  • Props
• How to play
• High-Score

Demo

A demo is available here.

Installation

To add it to your react app

• npm install react-simple-snake-mobile

To launch the development server

• git clone https://github.com/MaelDrapier/react-simple-snake.git
• cd react-simple-snake
• npm install
• npm start

Dependencies

This project needs react to operate. Install it with npm install react

Usage

To import it in your component

import Snake from 'react-simple-snake'

export default function YourComponent() {
  return (
    <div>
      <Snake />
    </div>
  )
}

Props

All props are optional

| Prop | Type | Default value | Description | | :---------------: | :------: | :-----------: | :----------------------------------------------------------------------------------------------------- | | percentageWidth | number | 40 | A percentage defining the width of the game board, based on the width of the game's parent element | | startSnakeSize | number | 6 | The starting size of the snake | | snakeColor | string | random | The color of the snake | | appleColor | string | random | The color of apples | | onScoreIncrease | function | none | function getting called when the score is increased, with the score as argument |

How to play

You can move the snake with the arrow keys or W / A / S / D or with your fingers on mobile.

High-Score

The highest score is saved locally in the browser's local storage, in a snakeHighScore field.