Giter Club home page Giter Club logo

kaboom's Introduction

Kaboom Logo

๐Ÿ’ฅ KABOOM.JS ๐Ÿ’ฅ

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

GitHub GitHub issues GitHub last commit
Start playing around with it in the Kaboom Playground

Community

Twitter Follow

Examples

// initialize context
kaboom()

// load a sprite called "froggy"
loadSprite("froggy", "sprites/froggy.png")

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

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

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

NPM

$ npm install kaboom
import kaboom from "kaboom"

kaboom()

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

also works with CommonJS

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/dist/kaboom.js"></script>
<script>
kaboom()
</script>

or use with es modules

<script type="module">
import kaboom from "https://unpkg.com/kaboom/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 and the website (the website might take some time to build for the first time)
  3. go to http://localhost:3000/play
  4. edit demos in demo/ to test
  5. make sure not to break any existing demos

also check out CONTRIBUTION.md

Community

Itch.io Community
Discord Server
GitHub Discussions
Twitter

Games

on Itch.io
on Replit
on Newgrounds

Misc

kaboom's People

Contributors

charlestudor avatar codergautam avatar dainfloop avatar donno2048 avatar epicgamer007 avatar fabtjar avatar finnp avatar johnathonnow avatar kgish avatar kusstar avatar l3gomancer avatar lajbel avatar lirantal avatar malted avatar mamamia5x avatar mannysz avatar masad-frost avatar mgmarlow avatar micheg avatar oaklandgit avatar rildev avatar rish avatar sixhobbits avatar slmjkdbtl avatar stutz avatar triptych avatar wbourne0 avatar worktheclock avatar wozza365 avatar ykdojo avatar

Stargazers

 avatar  avatar

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.