Kaboom
Kaboom is a JavaScript library that helps you make games fast and fun!
Start playing around with it in the Kaboom Playground
Examples
// 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.
// 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
// .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
$ npm init kaboom mygameThis will create a directory called mygame for you, containing all the files we need
$ cd mygame
$ npm run devThen open http://localhost:5173 and edit src/game.js
Install as NPM Package
$ npm install kaboomimport kaboom from "kaboom"
kaboom()
add([
text("oh hi"),
pos(80, 40),
])also works with CommonJS
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
<script src="https://unpkg.com/kaboom@3000/dist/kaboom.js"></script>
<script>
kaboom()
</script>or use with es modules
<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
npm installto install dev packagesnpm run devto start dev server- go to http://localhost:8000/ and pick an example
- edit examples in
examples/to test
Check out CONTRIBUTION.md for full info.
Community
Games
Collection of games made with Kaboom, selected by Kaboom, here.
Misc
- This project has no relation to Activision's game Kaboom!
- 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
- How to do a KABOOM on a Trampoline