Kaboom.js is a JavaScript library that helps you make games fast and fun!

Start playing around with it in the Kaboom Playground

Examples

// initialize contextkaboom()// load a sprite called "froggy"loadSprite("froggy","sprites/froggy.png")// compose the player game object from multiple components and add it to the gameconstfroggy=add([sprite("bean"),pos(80,40),area(),body(),])// press space to jumponKeyPress("space",()=>{// this method is provided by the "body" component abovefroggy.jump()})

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

// add a game obj to the scene from a list of componentconstplayer=add([// it renders as a spritesprite("bean"),// it has a positionpos(100,200),// it has a colliderarea(),// it is a physical body which will respond to physicsbody(),// it has 8 healthhealth(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" componentplayer.onCollide("enemy",()=>{// .hurt() comes from "health" componentplayer.hurt(1)})// check fall deathplayer.onUpdate(()=>{if(player.pos.y>=height()){destroy(player)gameOver()}})// if 'player' onCollide with any object with tag "enemy", run the callbackplayer.onCollide("enemy",()=>{player.hp-=1})// all objects with tag "enemy" will move towards 'player' every frameonUpdate("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 downonKeyDown("w",()=>{player.move(0,100)})

Usage

NPM

$ npm install kaboom

importkaboomfrom"kaboom"kaboom()add([text("oh hi"),pos(80,40),])

also works with CommonJS

constkaboom=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

<scriptsrc="https://unpkg.com/kaboom/dist/kaboom.js"></script><script>kaboom()</script>

or use with es modules

<scripttype="module">importkaboomfrom"https://unpkg.com/kaboom/dist/kaboom.mjs"kaboom()</script>

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

Dev

1. npm run setup to setup first time (installing dev packages)
2. npm run dev to watch & build lib and the website (the website might take some time to build for the first time)
3. go to http://localhost:3000/play
4. edit demos in demo/ to test
5. make sure not to break any existing demos

also check out CONTRIBUTION.md

Community

GitHub Discussions

Discord

Twitter

Games

on Itch.io

on Replit

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
• 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