Getting the package from a CDN provider is the quickest and easiest way to start using Kaboom.
<script type="module"> // import kaboom lib import kaboom from "https://unpkg.com/kaboom/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 in a
.html file and open with the browser. This will give you the standard fullscreen Kaboom canvas. Feel free to put more HTML in there.
The Kaboom package is deployed to NPM, so it's availbale on various CDN providers, like
The example above is using Kaboom with es6 module, you can also just include it with a
With NPM it's easier have some other packages and do version control, also it's easier to get typescript autocomplete support and stuff, but it requires a bit more setup.
$ npm install kaboom
but you'll need to use a bundler to use Kaboom with NPM. There's a lot of options like
vite, etc, here I'll give a short example of how to use Kaboom with
Once you have
esbuild installed, and you have this in a
import kaboom from "kaboom"; kaboom(); add([ text("hello"), pos(120, 80), ]);
$ esbuild game.js --bundle > build.js
and it'll find the Kaboom package and include it in the built
build.js in your HTML and you're good to go. Feel free to automate this process.
You might have encountered errors when trying to
$ python3 -m http.serverif you have python3 installed
$ python -m SimpleHTTPServerif you have python2 installed
$ serveif you have serve installed
$ caddy file-serverif you have caddy installed
$ static-hereif you have static-here installed
Let's say you have a folder structure like this:
. ├── sprites │ ├── froggy.png │ └── cloud.png ├── sounds │ └── horse.png └── index.html
and you have the static file server running on port
8000, just go to
http://localhost:8000/index.html, and you should be able to load stuff from relative paths like
loadSprite("froggy", "sprites/froggy.png"); laodSound("horse", "sounds/horse.mp3");
To learn more check out this MDN doc.
Replit has templates that gets rid of manual setup. Fork from either of these 2 templates:
This is a complete package including
A lighter version that only contains the barebone HTML and JS file.
Cool! Now you should be all ready to start using Kaboom. Try this intro tutorial if you don't know how to start.