KKPLAY

KKPLAY 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.

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

Examples

// initialize context
kkplay();

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

KKPLAY 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-kkplay

The fastest way to start a KKPLAY game is with create-kkplay

$ create-kkplay 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 kkplay

import kkplay from "kkplay";

kkplay();

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

also works with CommonJS

const kkplay = require("kkplay");

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

Browser CDN

This exports a global kkplay function

<script src="https://unpkg.com/[email protected]/dist/kkplay.js"></script>
<script>
kkplay()
</script>

or use with es modules

<script type="module">
import kkplay from "https://unpkg.com/[email protected]/dist/kkplay.mjs"
kkplay()
</script>

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

Documentation

• v3000: https://kaboomjs.com/

Community

• GitHub Discussions

Games

Collection of games made with KKPLAY (and KKPlay), selected by KKPLAY, here.

Credits

• Thanks to tga for all his work on the original KKPlay.js
• Thanks to mulfok for the amazing mulfok32 color palette, used in KKPLAY sprites
• 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