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
$ npx create-kaplay mygameThis will create a directory called mygame for you, containing all the files we need
$ cd mygame $ npm run devThen open http://localhost:5173 and edit src/game.js
$ npm install kaplayimport 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
- v3001: https://kaplayjs.com/
- v3000: https://kaboomjs.com/
- v2000: https://2000.kaboomjs.com/
- v0.5.0: https://legacy.kaboomjs.com/
Collections of games made with KAPLAY (and Kaboom), selected by KAPLAY:
- Thanks to tga for all his work on the original Kaboom.js
- Thanks to mulfok for the awesome mulfok32 color palette, used in KAPLAY sprites and art
- Thanks to Pixabay for the great burp sound, used in
burp()function - Thansk to Kenney for all used assets for examples
- 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
