Notice

Replit no longer maintains Kaboom. You may be interested in the community fork KaPlay.

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 contextkaboom()// define gravitysetGravity(2400)// load a sprite called "bean"loadSprite("bean","sprites/bean.png")// compose the player game object from multiple components and add it to the gameconstbean=add([sprite("bean"),pos(80,40),area(),body(),])// press space to jumponKeyPress("space",()=>{// this method is provided by the "body" component abovebean.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 of 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

Start a Project With create-kaboom

The fastest way to start a Kaboom game is with create-kaboom

$ npm init kaboom mygame

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

$ cd mygame
$ npm run dev

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

Install as NPM Package

$ 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@3000/dist/kaboom.js"></script><script>kaboom()</script>

or use with es modules

<scripttype="module">importkaboomfrom"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
2. npm run dev to start dev server
3. go to http://localhost:8000/ and pick an example
4. edit examples in examples/ to test

Check out CONTRIBUTION.md for full info.

Community

• Discord Server
• GitHub Discussions
• Twitter

Games

Collection of games made with Kaboom, selected by Kaboom, here.

• on Itch.io
• on Replit
• on Newgrounds

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