:video_game: 2D game engine for manage collisions. Made with javascript and CSS Grid Layout.
Example:
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);
burnout.defineAvatar({
className: 'avatar--up',
side: {
up: 'avatar--up',
down: 'avatar--down',
left: 'avatar--left',
right: 'avatar--right',
},
position: {
rowStart: 7,
columnStart: 7,
rowEnd: 8,
columnEnd: 8,
},
static: true, // New for controls the static position in map
});
Set different styles for all avatar positions:
burnout.defineAvatar({
className: 'player',
side: { // New Object
up: 'player--up', // Up class
down: 'player--down', // Down class
left: 'player--left', // Left class
right: 'player--right', // Right class
},
position: {
rowStart: 7,
columnStart: 7,
rowEnd: 8,
columnEnd: 8,
}
});
Callback for collision moment:
burnout.defineBlock({
className: 'wall',
collision: true,
position: {
rowStart: 20,
columnStart: 20,
rowEnd: 21,
columnEnd: 21,
action: (blockPosition) => { // Callback for collision moment
console.log(blockPosition);
},
}
});
New over moment and callback:
burnout.defineBlock({
className: 'grass',
over: true, // New option for track the over in a block
position: {
rowStart: 20,
columnStart: 20,
rowEnd: 21,
columnEnd: 21,
action: (blockPosition) => { // Callback for over moment
console.log(blockPosition);
},
}
});
New methods for get DOM references:
burnout.getMap();
burnout.getView();
burnout.getAvatar();
burnout.getBlock({
rowStart: 10,
columnStart: 10,
rowEnd: 11,
columnEnd: 11,
});