Kaboom

A JavaScript library that helps you make games fast and fun

Game engine
replit/kaboomkaboomjs.comkaboom

README

Kaboom


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

Examples


  1. ``` js
  2. // initialize context
  3. kaboom()

  5. // load a sprite called "bean"
  6. loadSprite("bean", "sprites/bean.png")

  8. // compose the player game object from multiple components and add it to the game
  9. const bean = add([
  10.     sprite("bean"),
  11.     pos(80, 40),
  12.     area(),
  13.     body(),
  14. ])

  16. // press space to jump
  17. onKeyPress("space", () => {
  18.     // this method is provided by the "body" component above
  19.     bean.jump()
  20. })
  21. ```

Kaboom uses a powerful component system to compose game objects and behaviors.

  1. ``` js
  2. // add a game obj to the scene from a list of component
  3. const player = add([
  4.     // it renders as a sprite
  5.     sprite("bean"),
  6.     // it has a position
  7.     pos(100, 200),
  8.     // it has a collider
  9.     area(),
  10.     // it is a physical body which will respond to physics
  11.     body(),
  12.     // it has 8 health
  13.     health(8),
  14.     // or give it tags for easier group behaviors
  15.     "player",
  16.     "friendly",
  17.     // plain objects fields are directly assigned to the game obj
  18.     {
  19.         dir: vec2(-1, 0),
  20.         dead: false,
  21.         speed: 240,
  22.     },
  23. ])
  24. ```

Blocky imperative syntax for describing behaviors

  1. ``` js
  2. // .onCollide() comes from "area" component
  3. player.onCollide("enemy", () => {
  4.     // .hurt() comes from "health" component
  5.     player.hurt(1)
  6. })

  8. // check fall death
  9. player.onUpdate(() => {
  10.     if (player.pos.y >= height()) {
  11.         destroy(player)
  12.         gameOver()
  13.     }
  14. })

  16. // if 'player' onCollide with any object with tag "enemy", run the callback
  17. player.onCollide("enemy", () => {
  18.     player.hp -= 1
  19. })

  21. // all objects with tag "enemy" will move towards 'player' every frame
  22. onUpdate("enemy", (e) => {
  23.     e.move(player.pos.sub(e.pos).unit().scale(e.speed))
  24. })

  26. // move up 100 pixels per second every frame when "w" key is held down
  27. onKeyDown("w", () => {
  28.     player.move(0, 100)
  29. })
  30. ```

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)

  1. ```sh
  2. $ npm init kaboom mygame
  3. ```

This will create a directory called mygame for you, containing all the files we need

  1. ```sh
  2. $ cd mygame
  3. $ npm run dev
  4. ```

Then open http://localhost:5173 and edit src/game.js

Install as NPM Package


  1. ```sh
  2. $ npm install kaboom
  3. ```

  1. ``` js
  2. import kaboom from "kaboom"

  4. kaboom()

  6. add([
  7.     text("oh hi"),
  8.     pos(80, 40),
  9. ])
  10. ```

also works with CommonJS

  1. ``` js
  2. const kaboom = require("kaboom")
  3. ```

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

  1. ``` html
  2. <script src="https://unpkg.com/kaboom/dist/kaboom.js"></script>
  3. <script>
  4. kaboom()
  5. </script>
  6. ```

or use with es modules

  1. ``` html
  2. <script type="module">
  3. import kaboom from "https://unpkg.com/kaboom/dist/kaboom.mjs"
  4. kaboom()
  5. </script>
  6. ```

works all CDNs that supports NPM packages, e.g. jsdelivr, skypack

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 for more

Community


[Itch.io Community](https://kaboomjs.itch.io/kaboom/community)
[Discord Server](https://discord.gg/aQ6RuQm3TF)
[GitHub Discussions](https://github.com/replit/kaboom/discussions)
Twitter

Games


[on Itch.io](https://itch.io/games/tag-kaboomjs)
[on Replit](https://replit.com/apps/kaboom)
on Newgrounds

Misc


- Thanks to LaJBel for help building the Kaboom community
- Thanks to abrudz for the amazing APL386 font
- Thanks to Polyducks for the amazing kitchen sink font font
- Thanks to 0x72 for the amazing Dungeon Tileset
- Thanks to Kenney for the amazing 1-Bit Platformer Pack
- Thanks to mulfok for the amazing mulfok32 color palette
- Find bitmap fonts: Oldschool PC Font
- Featured on Console 50
- Thanks to Umayr for kindly offering the "kaboom" npm package name
- Please buy fireworks on kaboom.com
- Documentation for v0.5 here
- How to do a KABOOM on a Trampoline