A simple and lightweight library made for easier game development in JavaScript on HTML5 canvas.
npm i game-neat --save
import Game from "game-neat";
const game = Game();
With Scene API you can manipulate with current Scene, so far there is only one Scene.
- setCanvas (element: string | Element): CanvasRenderingContext2D
- setBackground (options: BackgroundOptions): void
- startRender (): void
- stopRender (): void
- onRender (callback: Function): void
With this method you can specify your canvasContext element as a target for Scene rendering. I recommend calling this method right after creating new game.
You can pass selector as a string or directly your canvasContext element.
Returns canvasContext context or throws TypeError exception.
const game = Game();
game.scene.setCanvas("#game");
Sets a background image with url provided in object or background color.
You can set background scrolling speed with verticalSpeed and horizontalSpeed properties.
All those properties can be omitted, so if you want to for example just change scrolling speed you can do this pretty easily. Previous settings will be preserved.
game.scene.setBackground({
backgroundUrl: "road.svg",
verticalSpeed: 5,
horizontalSpeed: 4,
backgroundColor: "#000"
});
// elsewhere
game.scene.setBackground({ horizontalSpeed: 0 }); // only sets horizontal speed to 0
Use this method to initiate scene rendering.
const game = Game();
game.scene.setCanvas("#game");
game.scene.setBackground({
backgroundUrl: "road.svg",
verticalSpeed: 5,
horizontalSpeed: 4,
backgroundColor: "#000"
});
game.scene.startRender();
Empty method, which can be easily overridden, this method will be called every frame.
game.scene.onRender = () => {
console.log("Frame was just rendered");
};
- drawText (options: DrawTextOptions): object
- drawRectangle (options: DrawRectangleOptions): object
- clearText (textId: any): boolean
- setFontSize (fontSize: number): void
- setStrokeColor (color: string): void
- setStrokeAndFillColor (color: string): void
- setFillColor (color: string): void
- setFont (fontFamily: string): void
Draws a text on canvas with specified position, content and possibly alongside dynamic content.
game.draw.drawText({ x: 8, y: 32, content: "Static content" });
const data = { counter: 0 };
game.scene.onRender = () => {
++data.counter;
};
game.draw.drawText({ x: 8, y: 32, content: "Counter: {counter}", data });
Draws a rectangle with given coordinates.
game.draw.drawRectangle({
x1: 24,
y1: 24,
x2: 128,
y2: 52,
fill: true,
fillColor: "#00f017"
});
- createObject (gameObjectId: any, overrideObject?: boolean): GameObject
GameObjectFactory contains only one method - createObject. This method creates an object which then can be instantiated, returns GameObject.
const player = game.gameObjectFactory.createObject("player");
- createInstance (gameObjectId: any): GameObject | undefined
With GameObjectInstanceFactory you can create a new instance.
const player = game.gameObjectFactory.createObject("player");
const playerInstance = game.gameObjectInstanceFactory.createInstance("player"); // or player.id
- readonly isFreeXOnLeft: boolean
- readonly isFreeXOnRight: boolean
- readonly isFreeYOnBottom: boolean
- readonly isFreeYOnTop: boolean
- readonly isColliding: boolean
- setPosition (x: number, y: number): void
- setRelativePosition (x: number, y: number): void
- setSpriteDimensions (width: number, height: number)
- setSprite (imageUrl: string, spriteOptions?: SpriteOptions): HTMLImageElement
- setVerticalSpeed (speed: number): void
- setHorizontalSpeed (speed: number): void
- setSpeed (speed: number): void
- isCollidingWith (instance: GameObject | string): boolean
- onCollision (instance: GameObject): void
- onRender (instance: GameObject): void
- onClick (callback: Function): void
- onMouseMove (callback: Function): void
- onKey (key: string, callback: Function): void
- onKeyUp (key: string, callback: Function): void
Sets a sprite for your object alongside width and height accordingly to image size. Sprite dimensions can be manipulated through spriteOptions.
const player = game.gameObjectFactory.createObject("player");
// Object's width and height is same as image width and height
player.setSprite("player.svg");
// Sprite is resized to 80% size of the original image
player.setSprite("player.svg", { widthMultiplier: .8, heightMultiplier: .8 });
OnKey has two parameters - key as a string, for example "w" and callback which will be called.
const player = game.gameObjectFactory.createObject("player");
const playerInstance = game.gameObjectInstanceFactory.createInstance("player"); // or player.id
playerInstance.onKey("w", () => playerInstance.setRelativePosition(0, -3));
With GameObjectInstanceList you can manipulate with your instances. It's possible to remove single instance with destroy() method, or count() all instances. In count() or findInstancesBy() you can pass either GameObject id or GameObject itself.
- destroy (instance: GameObject): void
- count (gameObject: any | GameObject): number
- findInstancesBy (gameObject: any | GameObject): GameObjectInstanceList
- addSound (soundId: any, soundUrl: string): void
- playSound (soundId: any): void
- stopSound (soundId: any): void
- stopAllSounds (): void
- nextFloat (min?: number, max?: number): number
- next (min?: number, max?: number): number