Kaboom.js is a JavaScript library that helps you make games fast and fun!
NOTE: still in early active development, expect breaking changes and lots of new features (check out CHANGELOG.md
for these).
(these are for the newest beta version or kaboom@next
)
Lots of iteractive examples here
<script type="module">
// import kaboom lib
import kaboom from "https://unpkg.com/kaboom@next/dist/kaboom.mjs";
// initialize kaboom context
kaboom();
// add a piece of text at position (120, 80)
add([
text("hello"),
pos(120, 80),
]);
</script>
You can paste this directly into an .html
file, open it in browser, and start playing around!
Kaboom uses a powerful component system to compose game objects and behaviors. To make a flappy bird movement you only need a few lines
// init context
kaboom();
// load a default sprite "bean"
loadBean();
// compose the player game object from multiple components
const froggy = add([
sprite("bean"),
pos(80, 40),
area(),
body(),
]);
// press space to jump
keyPress("space", () => {
// this method is provided by the "body" component above
froggy.jump();
});
It's easy to make custom components to compose your game object 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 health
health(8),
// or give it tags for controlling group behaviors
"player",
"friendly",
// plain objects fields are directly assigned to the game obj
{
dir: vec2(-1, 0),
dead: false,
speed: 240,
},
]);
// .collides() comes from "area" component
player.collides("enemy", () => {
// .hurt() comes from "health" component
player.hurt(1)
});
Blocky imperative syntax for describing behaviors
// check fall death
player.action(() => {
if (player.pos.y >= height()) {
destroy(player);
gameOver();
}
});
// if 'player' collides with any object with tag "enemy", run the callback
player.collides("enemy", () => {
player.hp -= 1;
});
// all objects with tag "enemy" will move towards 'player' every frame
action("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
keyDown("w", () => {
player.move(0, 100);
});
$ npm install kaboom@next
import kaboom from "kaboom";
kaboom();
add([
text("oh hi"),
pos(80, 40),
]);
also works with CJS
const kaboom = require("kaboom");
Note that you'll need to use a bundler like esbuild
or webpack
to use Kaboom with NPM
This exports a global kaboom
function
<script src="https://unpkg.com/kaboom@next/dist/kaboom.js"></script>
<script>
kaboom();
</script>
or use with es modules
<script type="module">
import kaboom from "https://unpkg.com/kaboom@next/dist/kaboom.mjs";
kaboom();
</script>
works all CDNs that supports NPM packages, e.g. jsdelivr, skypack
npm run setup
to setup first time (installing dev packages)npm run dev
to watch & build lib- go to http://localhost:8000/demo
- edit demos in
demo/
to test - make sure not to break any existing demos
- 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
- 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
- Old v5.0 website here
- How to do a KABOOM on a Trampoline