Git Product home page Git Product logo

kaboom's Introduction

Kaboom Logo

Kaboom.js is a JavaScript library that helps you make games fast and fun!

NOTE: still in early active development, expect breaking changes and lots of new features (check out CHANGELOG.md for these).

Examples

(these are for the newest beta version or kaboom@next)

Lots of iteractive examples here

<script type="module">

// import kaboom lib
import kaboom from "https://unpkg.com/kaboom@next/dist/kaboom.mjs";

// initialize kaboom context
kaboom();

// add a piece of text at position (120, 80)
add([
    text("hello"),
    pos(120, 80),
]);

</script>

You can paste this directly into an .html file, open it in browser, and start playing around!

Kaboom uses a powerful component system to compose game objects and behaviors. To make a flappy bird movement you only need a few lines

// init context
kaboom();

// load a default sprite "bean"
loadBean();

// compose the player game object from multiple components
const froggy = add([
    sprite("bean"),
    pos(80, 40),
    area(),
    body(),
]);

// press space to jump
keyPress("space", () => {
    // this method is provided by the "body" component above
    froggy.jump();
});

It's easy to make custom components to compose your game object 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 health
    health(8),
    // or give it tags for controlling group behaviors
    "player",
    "friendly",
    // plain objects fields are directly assigned to the game obj
    {
        dir: vec2(-1, 0),
        dead: false,
        speed: 240,
    },
]);

// .collides() comes from "area" component
player.collides("enemy", () => {
    // .hurt() comes from "health" component
    player.hurt(1)
});

Blocky imperative syntax for describing behaviors

// check fall death
player.action(() => {
    if (player.pos.y >= height()) {
        destroy(player);
        gameOver();
    }
});

// if 'player' collides with any object with tag "enemy", run the callback
player.collides("enemy", () => {
    player.hp -= 1;
});

// all objects with tag "enemy" will move towards 'player' every frame
action("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
keyDown("w", () => {
    player.move(0, 100);
});

Usage

NPM

$ npm install kaboom@next
import kaboom from "kaboom";

kaboom();

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

also works with CJS

const kaboom = require("kaboom");

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

Browser CDN

This exports a global kaboom function

<script src="https://unpkg.com/kaboom@next/dist/kaboom.js"></script>
<script>
kaboom();
</script>

or use with es modules

<script type="module">
import kaboom from "https://unpkg.com/kaboom@next/dist/kaboom.mjs";
kaboom();
</script>

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

Dev

  1. npm run setup to setup first time (installing dev packages)
  2. npm run dev to watch & build lib
  3. go to http://localhost:8000/demo
  4. edit demos in demo/ to test
  5. make sure not to break any existing demos

Community

Github Discussions

Discord

Misc

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.