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);
});
create-kaplay
The fastest way to start a KAPLAY game is with
create-kaplay
$ create-kaplay 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
$ 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/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
Collections of games made with KAPLAY (and Kaboom), selected by KAPLAY: