Skip to content

louislugas/kaplay

 
 

Repository files navigation

KAPLAY

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

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 KAPLAY with NPM

Browser CDN

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

Documentation

Community

Games

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

Credits

About

🦖 A JavaScript game library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.0%
  • JavaScript 3.0%