• Stars
    star
    2,376
  • Rank 18,416 (Top 0.4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ’₯ JavaScript game library

Kaboom

kaboom

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

Start playing around with it in the Kaboom Playground

Examples

// initialize context
kaboom()

// 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()
})

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 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 Kaboom game is with create-kaboom

$ npm init kaboom 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

Install as NPM Package

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

or use with es modules

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

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

Documentation

Dev

  1. npm install to install dev packages
  2. npm run dev to start dev server
  3. go to http://localhost:8000/ and pick an example
  4. edit examples in examples/ to test

Check out CONTRIBUTION.md for full info.

Community

Games

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

Misc

More Repositories

1

clui

CLUI is a collection of JavaScript libraries for building command-driven interfaces with context-aware autocomplete.
TypeScript
1,233
star
2

upm

β • Universal Package Manager - Python, Node.js, Ruby, Emacs Lisp.
Go
1,021
star
3

ReplitLM

Inference code and configs for the ReplitLM model family
Python
900
star
4

polygott

Base Docker image for the Repl.it evaluation server
Shell
386
star
5

codemirror-vim

Vim keybindings for CM6
JavaScript
244
star
6

prybar

Pry open those interpreters.
Go
242
star
7

play

The easiest way to start coding games and graphics projects in Python
Python
182
star
8

replit-py

A helpful Python package that helps you build excellent things inside Repls! πŸ’»
Python
151
star
9

crosis

A JavaScript client that speaks Replit's container protocol
TypeScript
102
star
10

codemirror-interact

TypeScript
92
star
11

ReplitClient.js

A JavaScript client library used to connect to the server-side code execution service
67
star
12

replit-vscode

Replit in vscode
TypeScript
54
star
13

evalbot

A bot that speaks code
JavaScript
48
star
14

codemirror-indentation-markers

A CodeMirror extension that renders indentation markers
TypeScript
44
star
15

repl.sh

Sometimes you need a shell (alpha release)
JavaScript
37
star
16

extensions

A client library for the Replit Extensions API
TypeScript
33
star
17

Codemirror-CSS-color-picker

A codemirror extension that adds a color picker input next to CSS color values. Development happens on Replit, just fork and hit run! https://replit.com/@util/Codemirror-CSS-color-picker
TypeScript
30
star
18

codemirror-vscode-keymap

VSCode keyboard shortcuts for CodeMirror 6
TypeScript
29
star
19

nixmodules

Nix
27
star
20

codemirror-lang-svelte

Svelte language support for CodeMirror 6
TypeScript
26
star
21

codemirror-minimap

Minimap extension for Codemirror 6
TypeScript
25
star
22

river

Long-lived Streaming Remote Procedure Calls
TypeScript
24
star
23

database-go

Go client for Repl.it Database
Go
22
star
24

pyright-extended

pyright with yapf and ruff
Python
20
star
25

nixpkgs-replit

Nix
19
star
26

rfbproxy

An RFB proxy that enables WebSockets and audio.
Nix
19
star
27

blog

the code behind https://blog.replit.com/
EJS
19
star
28

replit-code-exec

A library that allows interacting with Replit's code-exec API
Python
18
star
29

protocol

The Protocol definition file and language bindings
JavaScript
17
star
30

codemirror-emacs

Emacs keybindings for CM6
TypeScript
14
star
31

express-router-async

Creates an express router augmented with promise handling routes
JavaScript
13
star
32

replbox

JavaScript
12
star
33

codemirror-lang-nix

A Nix language mode for CodeMirror 6
TypeScript
11
star
34

kaboomware

TypeScript
9
star
35

go-replidentity

Go implementation of Repl Identity
Go
9
star
36

nix-editor

an automatic editor for replit.nix files
Rust
8
star
37

extensions-react

Replit Extensions React Client
TypeScript
8
star
38

replit-ai-python

The library for Replit AI
Python
7
star
39

repl-auth

Allow your users to sign in with Replit!
JavaScript
7
star
40

audio-libs

Audio bindings for javascript
Python
6
star
41

toml-editor

Rust
6
star
42

codemirror-lang-csharp

TypeScript
6
star
43

homebrew-tap

Homebrew tap for Repl.it open-source.
Ruby
5
star
44

replit-node

A node.js library that helps you build excellent things inside Repls!
TypeScript
5
star
45

replit-ai-modelfarm-typescript

TypeScript
4
star
46

nixsysdeps

A mapping from language packages to nixpkgs system dependencies
Shell
4
star
47

codemirror-lang-solidity

CodeMirror 6 extension for Solidity language support and syntax highlighting
TypeScript
4
star
48

ztoc-rs

SOCI ztoc index builder
Rust
4
star
49

alcor

Serialize and hydrate complex javascript objects
TypeScript
4
star
50

replkit

TypeScript
3
star
51

kaboomsite

Website for Kaboom.js
JavaScript
2
star
52

example-repltweet

An example of using replit-py for exploring the world of web applications! πŸ—Ί
JavaScript
2
star
53

abcd-amasad

abcd-amasad created by GitHub Classroom
HTML
2
star
54

scoop-bucket

Scoop bucket for Repl.it open-source.
2
star
55

heroku-bot

A bot that responds to a slack slash command with a diff of commits going out to heroku
JavaScript
1
star
56

ruspty

PTY for Bun (and Node) through Rust FFI
JavaScript
1
star
57

repl-auth-node

Nodejs client for Repl Auth functions!
JavaScript
1
star
58

protocol-go

Mirror for Go package for repl.it protocol. Actual package here https://github.com/replit/protocol/
1
star