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
// 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);
});
The fastest way to start a KAPLAY game is with create-kaplay
$ npm init kaplay mygame
This will create a directory called mygame
for you, containing all the files we need
$ cd mygame
$ npm run dev
Then open https://localhost:5173 and edit src/game.js
$ 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 KAPLAY with NPM
This exports a global kaplay
function
<script src="https://unpkg.com/[email protected]/dist/kaboom.js"></script>
<script>
kaplay()
</script>
or use with es modules
<script type="module">
import kaplay from "https://unpkg.com/[email protected]/dist/kaboom.mjs"
kaplay()
</script>
works all CDNs that supports NPM packages, e.g. jsdelivr, skypack
- v3001: https://kaplayjs.com/
- v3000: https://kaboomjs.com/
- v2000: https://2000.kaboomjs.com/
- v0.5.0: https://legacy.kaboomjs.com/
Collection of games made with Kaboom, selected by Kaboom, here.
- 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