react-game-snake

!Apache License
!GitHub Issues

Play snake with this simple to use typed react component. Demo

Installation

``
npm install react-game-snake --save
`

Usage

`
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Context, SnakeGame } from "react-game-snake";

ReactDOM.render(
colors={{
field: "#bdc3c7",
food: "#9b59b6",
snake: "#3498db",
}}
countOfHorizontalFields={20}
countOfVerticalFields={20}
fieldSize={20}
loopTime={200}
pauseAllowed={true}
restartAllowed={true}
onLoose={(context: Context) => alert(You loosed with ${context.game.points} points.)}
onPause={(context: Context) => alert("paused")}
onRestart={(context: Context) => alert("restarted")}
onResume={(context: Context) => alert("onResume")}
onWin={(context: Context) => alert(You won with ${context.game.points} points.)}
/>,
document.getElementById("react"),
);
`

$3

The context object gets passed to each event of the react component. This object allows you to manipulate the game entirely by just re-setting properties.

Example: Getting player's points
`
context.game.points
`

Example: Moving food to another position
`
context.food = { x: 1, y: 3 };
`

Example: Pausing the game
`
context.updateGame({ pause: true });
`

$3

Each event gets the context passed as the first parameter.

| Name | Trigger |
|--------------|-------------------------------------------------------------------------|
| onLoose | The snake touches herself or one of the walls. |
| onWin | No space left to respawn new food. |
| onRestart | Player pressed R and restartAllowed = true. |
| onPause | Player pressed P, pauseAllowed = true and context.game.pause = false. |
| onResume | Player pressed P, pauseAllowed = true and context.game.pause = true. |
| onLoopStart | Before the game recalculated the context and drawn anything. |
| onLoopFinish | After the game recalculated the context and drawn everything. |

$3

| Name | Type | Description |
|------------------------- |------------------------------------------------------- |-------------------------------------------------------------------- |
| colors | `{ snake: string; food: string; field: string; }`` | Colors to draw the game in. |
| countOfHorizontalFields | number | Count of how many fields the snake can move horizontally. |
| countOfVerticalFields | number | Count of how many fields the snake can move vertically. |
| fieldSize | number | Width and height in px of each field. |
| loopTime | number | The amount of time in ms it takes for the snake to move one field. |
| pauseAllowed | boolean | The player is allowed to pause the game. |
| restartAllowed | boolean | The player is allowed to restart the game. |

Game

A simple game from the late 70s. Goal is it to eat as much food as you can. Touching yourself or the walls will end in a loose. The food will respawn after the snake ate it.

$3

You can control the snake by using WASD or the arrow keys.

P will pause the game.

R will restart the game.