{"id":13624300,"url":"https://github.com/burnoutjs/burnoutjs","last_synced_at":"2025-04-15T21:30:34.779Z","repository":{"id":31938934,"uuid":"130419025","full_name":"burnoutjs/burnoutjs","owner":"burnoutjs","description":":video_game: 2D game engine for manage collisions. Made with javascript and CSS Grid Layout.","archived":false,"fork":false,"pushed_at":"2022-11-01T00:04:13.000Z","size":380,"stargazers_count":47,"open_issues_count":0,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-07T09:18:01.186Z","etag":null,"topics":["css-grid","css-grid-layout","game-development","game-engine","grid-layout","hacktoberfest","hacktoberfest2021"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/burnoutjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-20T22:23:22.000Z","updated_at":"2024-01-16T21:18:36.000Z","dependencies_parsed_at":"2022-08-02T16:00:38.410Z","dependency_job_id":null,"html_url":"https://github.com/burnoutjs/burnoutjs","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnoutjs%2Fburnoutjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnoutjs%2Fburnoutjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnoutjs%2Fburnoutjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burnoutjs%2Fburnoutjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/burnoutjs","download_url":"https://codeload.github.com/burnoutjs/burnoutjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223660796,"owners_count":17181554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-grid","css-grid-layout","game-development","game-engine","grid-layout","hacktoberfest","hacktoberfest2021"],"created_at":"2024-08-01T21:01:41.155Z","updated_at":"2024-11-08T12:31:21.222Z","avatar_url":"https://github.com/burnoutjs.png","language":"JavaScript","readme":"![burnout.js logologo](docs/burnoutjs-logo.png)\n\n# burnout.js\n\n\u003e :video_game: The 2D game engine for manage collisions. Made with javascript and CSS Grid Layout. :heartbeat:\n\n## Features\n\n- Grid based map (Powered by **Grid Layout API**).\n- Create and position **blocks** in the map (Following the Grid Layout API).\n- Create an **avata**r for playing the game.\n- Set **different styles** for all avatar sides.\n- Register blocks for **collisions** with avatar (with configurable callbacks).\n- Register blocks for avatar **over** (with configurable callbacks).\n- Set **multiple type of controls** using plugins.\n- **Developer mode** for easily style the map.\n- **Easily access** to map, view, avatar and blocks DOM references.\n\n## How to use?\n\n### Install\n\n**Tip:** Verify if you have [node](http://nodejs.org/) and [yarn](https://yarnpkg.com/pt-BR/) installed.\n\n```sh\n$ yarn add burnoutjs\n```\n\n### Setup\n\n#### ES6/ECMAScript 2015 module:\n\n**Tip:** Use [Webpack](https://webpack.github.io/) (or similar module bundler) to manage the components.\n\n```js\nimport burnout from 'burnoutjs';\n```\n\n#### CommonJS module:\n\n**Tip:** Use [Browserify](http://browserify.org/) (or similar module bundler) to manage the components.\n\n```js\nconst burnout = require('burnoutjs');\n```\n\n### Create you game\n\n#### 1 - Define your map:\n\n```js\nburnout.defineMap({\n  developer: true,\n  blockSize: 10,\n  map: {\n    cols: 30,\n    rows: 30,\n  },\n  view: {\n    cols: 15,\n    rows: 15,\n  },\n});\n```\n\n#### 2 - Create as many blocks as you like:\n\n*A simple block*\n\n```js\nburnout.defineBlock({\n  className: 'block',\n  position: {\n    rowStart: 20,\n    columnStart: 20,\n    rowEnd: 21,\n    columnEnd: 21,\n  }\n});\n```\n\n*A block with collision and callback action*\n\n```js\nburnout.defineBlock({\n  className: 'wall',\n  collision: true,\n  position: {\n    rowStart: 20,\n    columnStart: 20,\n    rowEnd: 21,\n    columnEnd: 21,\n    action: blockPosition =\u003e {\n      console.log(blockPosition);\n    },\n  }\n});\n```\n\n*A block with over and callback action*\n\n```js\nburnout.defineBlock({\n  className: 'grass',\n  over: true,\n  position: {\n    rowStart: 20,\n    columnStart: 20,\n    rowEnd: 21,\n    columnEnd: 21,\n    action: blockPosition =\u003e {\n      console.log(blockPosition);\n    },\n  }\n});\n```\n\n*A block with interaction (with a() button) and callback action*\n\n```js\nburnout.defineBlock({\n  className: 'grass',\n  interaction: true,\n  position: {\n    rowStart: 20,\n    columnStart: 20,\n    rowEnd: 21,\n    columnEnd: 21,\n    action: blockPosition =\u003e {\n      console.log(blockPosition);\n    },\n  }\n});\n```\n\n#### 3 - Define your avatar.\n\n```js\nburnout.defineAvatar({\n  className: 'player',\n  side: {\n    up: 'player--up',\n    down: 'player--down',\n    left: 'player--left',\n    right: 'player--right',\n  },\n  position: {\n    rowStart: 7,\n    columnStart: 7,\n    rowEnd: 8,\n    columnEnd: 8,\n  },\n  static: false,\n});\n```\n\n#### 4 - Set all game controls.\n\n*Install a plugin for manage controls:*\n\n```sh\n$ yarn add burnout-keyboard-controls-plugin\n```\n\n*Import the plugin:*\n\n```js\nimport keyboardControlsPlugin from 'burnout-keyboard-controls-plugin';\n```\n\n*Use:*\n\n```js\nburnout.defineControlsPlugin(keyboardControlsPlugin);\n```\n\n#### 5 - Render the game in the DOM.\n\n```js\nconst container = document.getElementById('anyDomElement');\nburnout.renderMap(container);\n```\n#### Result (with a collision block):\n\n*Collision example with keyboard controls:*\n\n![Game demo](docs/demo.gif)\n\n- Red border: Camera/view of the game.\n- Black border: All game map.\n- Purple block: The avatar controlled via keyboard.\n- Green block: A single block for collision.\n\n### More features\n\n```js\nburnout.getMap();\n```\n\n```js\nburnout.getView();\n```\n\n```js\nburnout.getAvatar();\n```\n\n```js\nburnout.getBlock({\n  rowStart: 10,\n  columnStart: 10,\n  rowEnd: 11,\n  columnEnd: 11,\n});\n```\n\n\u003chr\u003e\n\n## Development\n\n### Getting started\n\nClone this repository and install its dependencies:\n\n```sh\n$ git clone https://github.com/burnoutjs/burnoutjs.git\n$ cd burnoutjs\n$ yarn\n```\n### Build\n\nBuilds the library to dist:\n\n```shev\n$ yarn build\n```\n\nBuilds the library, then keeps rebuilding it whenever the source files change using [rollup-watch](https://github.com/rollup/rollup-watch):\n\n```sh\n$ yarn dev\n```\n\n### Code Style\n\nFollow the [JS Code Style Guide](https://github.com/afonsopacifer/code-style-guide/blob/master/js/JS.md) by [Afonso Pacifer](https://github.com/afonsopacifer).\n\n*All code style are automatic validate with [ESLint](http://eslint.org/):*\n\n### Tests\n\n*Run all unit tests:*\n\n```sh\n$ yarn test\n```\n\n\u003chr\u003e\n\n## Versioning\n\nTo keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines.\n\n## Contributing\n\nWant to contribute? [Follow these recommendations](https://github.com/burnoutjs/burnoutjs/blob/master/CONTRIBUTING.md).\n\n## History\n\nSee [Releases](https://github.com/burnoutjs/burnoutjs/releases) for detailed changelog.\n\n## License\n\n[MIT License](https://github.com/burnoutjs/burnoutjs/blob/master/LICENSE.md) © [Afonso Pacifer](https://github.com/afonsopacifer)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburnoutjs%2Fburnoutjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fburnoutjs%2Fburnoutjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburnoutjs%2Fburnoutjs/lists"}