burnout.js
🎮 The 2D game engine for manage collisions. Made with javascript and CSS Grid Layout. 💓
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.
;
CommonJS module:
Tip: Use Browserify (or similar module bundler) to manage the components.
const burnout = ;
Create you game
1 - Define your map:
burnout;
2 - Create as many blocks as you like:
A simple block
burnout;
A block with collision and callback action
burnout;
A block with over and callback action
burnout;
3 - Define your avatar.
burnout;
4 - Set all game controls.
Install a plugin for manage controls:
$ yarn add burnout-keyboard-controls-plugin
Import the plugin:
;
Use:
burnout;
5 - Render the game in the DOM.
const container = document;burnout;
Result (with a collision block):
Collision example with keyboard controls:
- 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;
burnout;
burnout;
burnout;
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
Versioning
To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.
Contributing
Want to contribute? Follow these recommendations.
History
See Releases for detailed changelog.