@acm-97/react-snake-game

This repo is based on the idea of the classic snake games, with the exception that this component accepts some options, which makes it more customizable, something I wanted for my project and I have not found in others.

You can clone it and step by step create your own NPM package and publish it.

It is simple React counter.

Live Demo

Table of Contents

• @acm-97/react-snake-game
  • Table of Contents
  • Installation
  • Available props
    • State props
    • Styles props
  • Some usage examples

Installation

npm install @acm-97/react-snake-game

or

yarn add @acm-97/react-snake-game

Available props

Props	Description
onGameOver	you can pass a function here and recive the number of points collected
onEatFood	do anything after eat
onMove	you can pass a function here and recive the current positions of snake's head and food
styles	you can pass in plain object styles here
state	this is like the initial state for the component

State props

Props	Default	Description
snakeCoordinates	[[0,0],[2,0]]	initial position for the snake
foodCoordinates	random	initial position for the food
direction	RIGHT	initial direction for the snake to move
speed	200	speed of the snake
isRunning	false	tells the component if the snake can move or not
generateObstacles	false	to add another level of difficulty you can add obstacles along the way
numObstacles	4	number of obstacles to add

Styles props

Props	Description
gameArea	plain object styles for the game area container
snake	plain object styles for the snake element
food	plain object styles for the food element
obstacles	plain object styles for obstacle element

Styles can also be accessed through the .class selector

• for gameArea: .game-area
• for snake: .snake-body and .snake-body-part-"specific part(number) of the snake"
• for food: .food-wrapper and .food
• for obstacles: .obstacle

Some usage examples

For a basic usage add GameArea to your component:

import GameArea from '@acm-97/react-snake-game';

const Component = () => (
  <GameArea state={{ isRunning }} />
);

If you want some obstacles in the way add the option generateObstacles to your component's state:

import GameArea from '@acm-97/react-snake-game';

const Component = () => (
  <GameArea state={{ isRunning, generateObstacles: true }}
);

If you want to display the score for every game, add onGameOver to your component:

import React, { useState } from 'react';
import GameArea from '@acm-97/react-snake-game';

const Component = () => {
  const [score, setScore] = useState(0);

  const stopGame =(value: number) => {
      setScore(value);
  };

  return  (
    <div>
      <GameArea state={{ isRunning }} onGameOver={stopGame} />
      <div>
        SCORE: {score}
      </div>
    </div>
)};