Nixon's Pants Missing

    kaboom
    TypeScript icon, indicating that this package has built-in type declarations

    2000.2.10 • Public • Published

    Kaboom Logo

    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 context
    kaboom()
    
    // load a sprite called "froggy"
    loadSprite("froggy", "sprites/froggy.png")
    
    // compose the player game object from multiple components and add it to the game
    const froggy = add([
        sprite("bean"),
        pos(80, 40),
        area(),
        body(),
    ])
    
    // press space to jump
    onKeyPress("space", () => {
        // this method is provided by the "body" component above
        froggy.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 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

    NPM

    $ npm install kaboom
    import 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/dist/kaboom.js"></script>
    <script>
    kaboom()
    </script>

    or use with es modules

    <script type="module">
    import kaboom from "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

    Keywords

    Install

    npm i kaboom

    DownloadsWeekly Downloads

    10,430

    Version

    2000.2.10

    License

    MIT

    Unpacked Size

    1.73 MB

    Total Files

    28

    Last publish

    Collaborators

    • slmjkdbtl