@acm-97/react-snake-game v1.0.1

@acm-97/react-snake-game

]github-license-url

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

Installation

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

or

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

Available props

State props

Styles props

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>
)};