react-game-snake

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(
    <SnakeGame
        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"),
);

Context

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

Events

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. |

Options

| 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.

Controls

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

P will pause the game.

R will restart the game.