Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/replit/kaboom
💥 JavaScript game library
https://github.com/replit/kaboom
fun game gamedev javascript
Last synced: 10 days ago
JSON representation
💥 JavaScript game library
- Host: GitHub
- URL: https://github.com/replit/kaboom
- Owner: replit
- License: mit
- Created: 2020-12-21T20:21:52.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-04T04:55:13.000Z (3 months ago)
- Last Synced: 2024-10-15T08:41:04.409Z (24 days ago)
- Topics: fun, game, gamedev, javascript
- Language: TypeScript
- Homepage: https://kaboomjs.com
- Size: 79.2 MB
- Stars: 2,662
- Watchers: 50
- Forks: 226
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-game-engine-dev - Kaboom - Simple 2D framework. (Libraries / JavaScript)
README
# Notice
Replit no longer maintains Kaboom. You may be interested in the community fork [KaPlay](https://github.com/marklovers/kaplay).
# Kaboom
[**Kaboom**](https://kaboomjs.com) is a JavaScript library that helps you make games fast and fun!
Start playing around with it in the [Kaboom Playground](https://kaboomjs.com/play)
## Examples
```js
// 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.
```js
// 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
```js
// .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`](https://github.com/replit/kaboom/tree/master/pkgs/create)
```sh
$ npm init kaboom mygame
```
This will create a directory called `mygame` for you, containing all the files we need
```sh
$ cd mygame
$ npm run dev
```
Then open http://localhost:5173 and edit `src/game.js`
### Install as NPM Package
```sh
$ npm install kaboom
```
```js
import kaboom from "kaboom"
kaboom()
add([
text("oh hi"),
pos(80, 40),
])
```
also works with CommonJS
```js
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
```html
kaboom()
```
or use with es modules
```html
import kaboom from "https://unpkg.com/kaboom@3000/dist/kaboom.mjs"
kaboom()
```
works all CDNs that supports NPM packages, e.g. jsdelivr, skypack
## Documentation
- **v3000**: https://kaboomjs.com/
- **v2000**: https://2000.kaboomjs.com/
- **v0.5.0**: https://legacy.kaboomjs.com/
## Dev
1. `npm install` to install dev packages
1. `npm run dev` to start dev server
1. go to http://localhost:8000/ and pick an example
1. edit examples in `examples/` to test
Check out [CONTRIBUTION.md](CONTRIBUTING.md) for full info.
## Community
- [Discord Server](https://discord.gg/aQ6RuQm3TF)
- [GitHub Discussions](https://github.com/replit/kaboom/discussions)
- [Twitter](https://twitter.com/Kaboomjs)
### Games
Collection of games made with Kaboom, selected by Kaboom, [here](https://itch.io/c/2645141/made-in-kaboom).
- [on Itch.io](https://itch.io/games/tag-kaboomjs)
- [on Replit](https://replit.com/apps/kaboom)
- [on Newgrounds](https://www.newgrounds.com/search/conduct/games?tags=kaboomjs)
## Misc
- This project has no relation to Activision's game [Kaboom!](https://en.wikipedia.org/wiki/Kaboom!_(video_game))
- Thanks to [lajbel](https://lajbel.github.io/) for help building the Kaboom community
- Thanks to [abrudz](https://github.com/abrudz) for the amazing [APL386 font](https://abrudz.github.io/APL386/)
- Thanks to [Polyducks](http://polyducks.co.uk/) for the amazing [kitchen sink font](https://polyducks.itch.io/kitchen-sink-textmode-font) font
- Thanks to [0x72](https://0x72.itch.io/) for the amazing [Dungeon Tileset](https://0x72.itch.io/dungeontileset-ii)
- Thanks to [Kenney](https://kenney.nl/) for the amazing [1-Bit Platformer Pack](https://kenney.nl/assets/1-bit-platformer-pack)
- Thanks to [mulfok](https://twitter.com/MulfoK) for the amazing [mulfok32](https://lospec.com/palette-list/mulfok32) color palette
- Find bitmap fonts: [Oldschool PC Font](https://int10h.org/oldschool-pc-fonts)
- Featured on [Console 50](https://console.substack.com/p/console-50)
- Thanks to [Umayr](https://github.com/umayr) for kindly offering the "kaboom" npm package name
- Please buy fireworks on [kaboom.com](http://www.kaboom.com/)
- [How to do a KABOOM on a Trampoline](https://www.youtube.com/watch?v=3CemcWdc_Hc)