• Stars
    star
    2,524
  • Rank 18,178 (Top 0.4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 7 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,240
star
2

upm

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

ReplitLM

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

polygott

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

codemirror-vim

Vim keybindings for CM6
JavaScript
278
star
6

prybar

Pry open those interpreters.
Go
245
star
7

play

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

replit-py

A helpful Python package that helps you build excellent things inside Repls! ๐Ÿ’ป
Python
156
star
9

rippkgs

A CLI for indexing and searching packages in Nix expressions
Rust
137
star
10

crosis

A JavaScript client that speaks Replit's container protocol
TypeScript
111
star
11

codemirror-interact

TypeScript
101
star
12

ReplitClient.js

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

replit-vscode

Replit in vscode
TypeScript
57
star
14

codemirror-indentation-markers

A CodeMirror extension that renders indentation markers
TypeScript
53
star
15

evalbot

A bot that speaks code
JavaScript
48
star
16

codemirror-minimap

Minimap extension for Codemirror 6
TypeScript
42
star
17

river

๐ŸŒŠ Long-lived Streaming Remote Procedure Calls
TypeScript
39
star
18

nixmodules

Nix
38
star
19

repl.sh

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

database-node

Node.js client for Replit Database
TypeScript
37
star
21

extensions

A client library for the Replit Extensions API
TypeScript
34
star
22

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
33
star
23

codemirror-lang-svelte

Svelte language support for CodeMirror 6
TypeScript
30
star
24

codemirror-vscode-keymap

VSCode keyboard shortcuts for CodeMirror 6
TypeScript
30
star
25

pyright-extended

pyright with yapf and ruff
Python
23
star
26

database-go

Go client for Repl.it Database
Go
23
star
27

codemirror-emacs

Emacs keybindings for CM6
TypeScript
21
star
28

nixpkgs-replit

Nix
20
star
29

rfbproxy

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

replit-code-exec

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

blog

the code behind https://blog.replit.com/
EJS
18
star
32

protocol

The Protocol definition file and language bindings
JavaScript
17
star
33

express-router-async

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

codemirror-lang-nix

A Nix language mode for CodeMirror 6
TypeScript
12
star
35

replbox

JavaScript
12
star
36

extensions-react

Replit Extensions React Client
TypeScript
10
star
37

kaboomware

TypeScript
9
star
38

go-replidentity

Go implementation of Repl Identity
Go
9
star
39

nix-editor

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

toml-editor

Rust
8
star
41

replit-ai-python

The library for Replit AI
Python
7
star
42

ruspty

PTY for Bun (and Node) through Rust FFI
JavaScript
7
star
43

repl-auth

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

audio-libs

Audio bindings for javascript
Python
6
star
45

replit-ai-modelfarm-typescript

TypeScript
5
star
46

codemirror-lang-solidity

CodeMirror 6 extension for Solidity language support and syntax highlighting
TypeScript
5
star
47

replit-node

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

codemirror-lang-csharp

TypeScript
5
star
49

replkit

TypeScript
4
star
50

kaboomsite

Website for Kaboom.js
JavaScript
4
star
51

nixsysdeps

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

ztoc-rs

SOCI ztoc index builder
Rust
4
star
53

alcor

Serialize and hydrate complex javascript objects
TypeScript
4
star
54

river-babel

cross-language testing for @replit/river
TypeScript
3
star
55

replit_rtld_loader

A dynamic runtime shared library loader for Repls that supports system dependency assistance and handles binary segregation by Nix channel.
C
3
star
56

example-repltweet

An example of using replit-py for exploring the world of web applications! ๐Ÿ—บ
JavaScript
2
star
57

abcd-amasad

abcd-amasad created by GitHub Classroom
HTML
2
star
58

replit-object-storage-python

The library for Replit Object Storage
Python
2
star
59

protocol-go

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

scoop-bucket

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

heroku-bot

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

overlang

Nix overlays for every programming need
Nix
1
star
63

replit-object-storage-typescript

The TypeScript library for Replit Object Storage
TypeScript
1
star
64

pid2-github-import-test

1
star
65

repl-auth-node

Nodejs client for Repl Auth functions!
JavaScript
1
star