base on 💥 JavaScript game library # Notice Replit no longer maintains Kaboom. You may be interested in the community fork [KaPlay](https://github.com/marklovers/kaplay). # Kaboom  [**Kaboom**](https://kaboomjs.com) is a JavaScript library that helps you make games fast and fun! Start playing around with it in the [Kaboom Playground](https://kaboomjs.com/play) ## Examples ```js // initialize context kaboom() // define gravity setGravity(2400) // load a sprite called "bean" loadSprite("bean", "sprites/bean.png") // compose the player game object from multiple components and add it to the game const bean = add([ sprite("bean"), pos(80, 40), area(), body(), ]) // press space to jump onKeyPress("space", () => { // this method is provided by the "body" component above bean.jump() }) ``` Kaboom uses a powerful component system to compose game objects and behaviors. ```js // add a game obj to the scene from a list of component const player = add([ // it renders as a sprite sprite("bean"), // it has a position pos(100, 200), // it has a collider area(), // it is a physical body which will respond to physics body(), // it has 8 of health health(8), // or give it tags for easier group behaviors "player", "friendly", // plain objects fields are directly assigned to the game obj { dir: vec2(-1, 0), dead: false, speed: 240, }, ]) ``` Blocky imperative syntax for describing behaviors ```js // .onCollide() comes from "area" component player.onCollide("enemy", () => { // .hurt() comes from "health" component player.hurt(1) }) // check fall death player.onUpdate(() => { if (player.pos.y >= height()) { destroy(player) gameOver() } }) // if 'player' onCollide with any object with tag "enemy", run the callback player.onCollide("enemy", () => { player.hp -= 1 }) // all objects with tag "enemy" will move towards 'player' every frame onUpdate("enemy", (e) => { e.move(player.pos.sub(e.pos).unit().scale(e.speed)) }) // move up 100 pixels per second every frame when "w" key is held down onKeyDown("w", () => { player.move(0, 100) }) ``` ## Usage ### Start a Project With `create-kaboom` The fastest way to start a Kaboom game is with [`create-kaboom`](https://github.com/replit/kaboom/tree/master/pkgs/create) ```sh $ npm init kaboom mygame ``` This will create a directory called `mygame` for you, containing all the files we need ```sh $ cd mygame $ npm run dev ``` Then open http://localhost:5173 and edit `src/game.js` ### Install as NPM Package ```sh $ npm install kaboom ``` ```js import kaboom from "kaboom" kaboom() add([ text("oh hi"), pos(80, 40), ]) ``` also works with CommonJS ```js const kaboom = require("kaboom") ``` Note that you'll need to use a bundler like `esbuild` or `webpack` to use Kaboom with NPM ### Browser CDN This exports a global `kaboom` function ```html <script src="https://unpkg.com/kaboom@3000/dist/kaboom.js"></script> <script> kaboom() </script> ``` or use with es modules ```html <script type="module"> import kaboom from "https://unpkg.com/kaboom@3000/dist/kaboom.mjs" kaboom() </script> ``` works all CDNs that supports NPM packages, e.g. jsdelivr, skypack ## Documentation - **v3000**: https://kaboomjs.com/ - **v2000**: https://2000.kaboomjs.com/ - **v0.5.0**: https://legacy.kaboomjs.com/ ## Dev 1. `npm install` to install dev packages 1. `npm run dev` to start dev server 1. go to http://localhost:8000/ and pick an example 1. edit examples in `examples/` to test Check out [CONTRIBUTION.md](CONTRIBUTING.md) for full info. ## Community - [Discord Server](https://discord.gg/aQ6RuQm3TF) - [GitHub Discussions](https://github.com/replit/kaboom/discussions) - [Twitter](https://twitter.com/Kaboomjs) ### Games Collection of games made with Kaboom, selected by Kaboom, [here](https://itch.io/c/2645141/made-in-kaboom). - [on Itch.io](https://itch.io/games/tag-kaboomjs) - [on Replit](https://replit.com/apps/kaboom) - [on Newgrounds](https://www.newgrounds.com/search/conduct/games?tags=kaboomjs) ## Misc - This project has no relation to Activision's game [Kaboom!](https://en.wikipedia.org/wiki/Kaboom!_(video_game)) - Thanks to [lajbel](https://lajbel.github.io/) for help building the Kaboom community - Thanks to [abrudz](https://github.com/abrudz) for the amazing [APL386 font](https://abrudz.github.io/APL386/) - Thanks to [Polyducks](http://polyducks.co.uk/) for the amazing [kitchen sink font](https://polyducks.itch.io/kitchen-sink-textmode-font) font - Thanks to [0x72](https://0x72.itch.io/) for the amazing [Dungeon Tileset](https://0x72.itch.io/dungeontileset-ii) - Thanks to [Kenney](https://kenney.nl/) for the amazing [1-Bit Platformer Pack](https://kenney.nl/assets/1-bit-platformer-pack) - Thanks to [mulfok](https://twitter.com/MulfoK) for the amazing [mulfok32](https://lospec.com/palette-list/mulfok32) color palette - Find bitmap fonts: [Oldschool PC Font](https://int10h.org/oldschool-pc-fonts) - Featured on [Console 50](https://console.substack.com/p/console-50) - Thanks to [Umayr](https://github.com/umayr) for kindly offering the "kaboom" npm package name - Please buy fireworks on [kaboom.com](http://www.kaboom.com/) - [How to do a KABOOM on a Trampoline](https://www.youtube.com/watch?v=3CemcWdc_Hc) ", Assign "at most 3 tags" to the expected json: {"id":"11046","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"