kaplay-beta

KAPLAY

Kaplay is the spiritual successor (and fork) of Kaboom, a JavaScript library that helps you make games fast and fun! For now, there's links to the Kaboom documentation and examples, but in the future, they will be linked to our own site.

KAPLAY is a JavaScript library that helps you make games fast and fun!

Start playing around with it in the KAPLAYGROUND

Examples

// initialize context
kaplay();

// 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();
});

KAPLAY 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 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 kaplay

import kaplay from "kaplay";

kaplay();

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

also works with CommonJS

const kaboom = require("kaplay");

Note that you'll need to use a bundler like esbuild or webpack to use Kaboom with NPM

Browser CDN

This exports a global kaplay function

<script src="https://unpkg.com/kaplay@3000.1.17/dist/kaboom.js"></script>
<script>
kaplay()
</script>

or use with es modules

<script type="module">
import kaplay from "https://unpkg.com/kaplay@3000.1.17/dist/kaboom.mjs"
kaplay()
</script>

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

Documentation

• v3001: https://kaplayjs.com/
• v3000: https://kaboomjs.com/
• v2000: https://2000.kaboomjs.com/
• v0.5.0: https://legacy.kaboomjs.com/

Community

• Discord Server
• GitHub Discussions
• Twitter

Games

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

• on Itch.io
• on Replit
• on Newgrounds

Credits

• Thanks to tga for all his work on the original Kaboom.js
• 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, used in KAPLAY sprites