Published
Edited
Dec 27, 2021
Insert cell
Insert cell
Insert cell
cnv = html`<canvas class="game" height="320" width="480"></canvas>`
Insert cell
k = Kaboom({
global: false,
width: 480,
height: 320,
canvas: cnv,
background: [0,0,256]
})
Insert cell
main = {
// k.scene("main", ()=> {
// k.add([
// k.text("oh hi", 32),
// k.pos(100, 100),
// ]);
// })

// k.go("main")
k.loadBean()
k.scene("main", ()=>{
const player = k.add([
k.sprite("bean"), // renders as a sprite
k.pos(120, 80), // position in world
k.area(), // has a collider
k.body(), // responds to physics and gravity
]);
k.onKeyPress("space", () => {
// .jump() is provided by the body() component
player.jump();
});
});
k.go("main")
}
Insert cell
Kaboom = (await import('https://cdn.skypack.dev/kaboom@next?min')).default
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more