burnout.js

:video_game: The 2D game engine for manage collisions. Made with javascript and CSS Grid Layout. :heartbeat:

Features

Grid based map (Powered by Grid Layout API).
Create and position blocks in the map (Following the Grid Layout API).
Create an avatar for playing the game.
Set different styles for all avatar sides.
Register blocks for collisions with avatar (with configurable callbacks).
Register blocks for avatar over (with configurable callbacks).
Set multiple type of controls using plugins.
Developer mode for easily style the map.
Easily access to map, view, avatar and blocks DOM references.

How to use?

Install

Tip: Verify if you have node and yarn installed.

$ yarn add burnoutjs

Setup

ES6/ECMAScript 2015 module:

Tip: Use Webpack (or similar module bundler) to manage the components.

import burnout from 'burnoutjs';

CommonJS module:

Tip: Use Browserify (or similar module bundler) to manage the components.

const burnout = require('burnoutjs');

Create you game

1 - Define your map:

burnout.defineMap({
  developer: true,
  blockSize: 10,
  map: {
    cols: 30,
    rows: 30,
  },
  view: {
    cols: 15,
    rows: 15,
  },
});

2 - Create as many blocks as you like:

A simple block

burnout.defineBlock({
  className: 'block',
  position: {
    rowStart: 20,
    columnStart: 20,
    rowEnd: 21,
    columnEnd: 21,
  }
});

A block with collision and callback action

burnout.defineBlock({
  className: 'wall',
  collision: true,
  position: {
    rowStart: 20,
    columnStart: 20,
    rowEnd: 21,
    columnEnd: 21,
    action: blockPosition => {
      console.log(blockPosition);
    },
  }
});

A block with over and callback action

burnout.defineBlock({
  className: 'grass',
  over: true,
  position: {
    rowStart: 20,
    columnStart: 20,
    rowEnd: 21,
    columnEnd: 21,
    action: blockPosition => {
      console.log(blockPosition);
    },
  }
});

A block with interaction (with a() button) and callback action

burnout.defineBlock({
  className: 'grass',
  interaction: true,
  position: {
    rowStart: 20,
    columnStart: 20,
    rowEnd: 21,
    columnEnd: 21,
    action: blockPosition => {
      console.log(blockPosition);
    },
  }
});

3 - Define your avatar.

burnout.defineAvatar({
  className: 'player',
  side: {
    up: 'player--up',
    down: 'player--down',
    left: 'player--left',
    right: 'player--right',
  },
  position: {
    rowStart: 7,
    columnStart: 7,
    rowEnd: 8,
    columnEnd: 8,
  },
  static: false,
});

4 - Set all game controls.

Install a plugin for manage controls:

$ yarn add burnout-keyboard-controls-plugin

Import the plugin:

import keyboardControlsPlugin from 'burnout-keyboard-controls-plugin';

Use:

burnout.defineControlsPlugin(keyboardControlsPlugin);

5 - Render the game in the DOM.

const container = document.getElementById('anyDomElement');
burnout.renderMap(container);

Result (with a collision block):

Collision example with keyboard controls:

Game demo

Red border: Camera/view of the game.
Black border: All game map.
Purple block: The avatar controlled via keyboard.
Green block: A single block for collision.

More features

burnout.getMap();

burnout.getView();

burnout.getAvatar();

burnout.getBlock({
  rowStart: 10,
  columnStart: 10,
  rowEnd: 11,
  columnEnd: 11,
});

<hr>

Development

Getting started

Clone this repository and install its dependencies:

$ git clone https://github.com/burnoutjs/burnoutjs.git
$ cd burnoutjs
$ yarn

Build

Builds the library to dist:

$ yarn build

Builds the library, then keeps rebuilding it whenever the source files change using rollup-watch:

$ yarn dev

Code Style

Follow the JS Code Style Guide by Afonso Pacifer.

All code style are automatic validate with ESLint:

Tests

Run all unit tests:

$ yarn test