Published
Edited
Jun 8, 2021
Also listed in…
Kaboom Examples
Insert cell
Insert cell
Insert cell
container = html`
<div class="container">
<canvas id="rpg"></canvas>
</div>`

Insert cell
k = KABOOM({
width: 180,
height: 180,
scale: 4,
canvas: document.getElementById("rpg"),
clearColor: [0,0,0,1]
});
Insert cell
Insert cell
scene_main = ()=>{
const levels = [
[
"################################################################",
"#==============================================================#",
"#==============================================================#",
"#⟶⟶⟶⟶⌉=========================================================#",
"#====V=========================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"#==============================================================#",
"################################################################"
],
[
" ",
" b ",
" ",
" ",
" p ",
" ",
" ",
" b ",
" ",
" ",
]
];

k.addLevel(levels[0],{
width: 16,
height: 16,
pos: k.vec2(10, 10),
"=": [
k.sprite("grass")
],
"#":[
k.sprite("tree"),
k.solid()
],
"^":[
k.sprite("bigtree"),
k.solid()
],
"⌉":[
k.sprite("path_left_down"),
],
"⟶":[
k.sprite("path_left_right")
],
"V": [
k.sprite("path_up_down")
]

});
k.addLevel(levels[1],{
width: 16,
height: 16,
pos: k.vec2(10, 10),
"p":[
k.sprite("player"),
"player",
k.solid()
],
"b":[
k.sprite("boo"),
k.solid(),
"enemy"
]
});

const player = k.get("player")[0];

// camera position follow player
player.action(() => {
k.camPos(player.pos);
});

// add life meter
const scorebox = k.add([
k.rect(100,11),
k.pos(12,12),
k.layer("ui"),
k.color(0,0,0)
])
const score = k.add([
k.text("Life: ****"),
k.pos(13, 13),
k.layer("ui"),
k.color(1,1,1),
{
label: "Life:",
value: "****",
},
]);


const enemy = k.get("enemy")[0];
k.keyPress("left", () => {
player.moveLeft();
const targets = player.resolve()
if (targets.length
&& targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y)
) {
player.moveRight()
}
});

k.keyPress("right", () => {
player.moveRight();
// handle tile collision
const targets = player.resolve()
if (targets.length
&& targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y)
) {
player.moveLeft()
}
});

k.keyPress("up", () => {
player.moveUp();
// handle tile collision
const targets = player.resolve()
if (targets.length
&& targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y)
) {
player.moveDown()
}
});
k.keyPress("down", () => {
player.moveDown();
const targets = player.resolve()
if (targets.length
&& targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y)
) {
player.moveUp()
}
});

k.keyPress("space", () => {
if (music.paused()) {
music.play();
} else {
music.pause();
}
});

k.action("enemy", (e)=>{
//const chance = getRandomInt(0,100);
const chance = k.rand(0,100);
if(chance > 98){
const dir = Math.floor(k.rand(1,5));
console.log("dir", dir)
switch(dir){
case 1:
e.moveUp();
break;
case 2:
e.moveDown();
break;
case 3:
e.moveLeft();
break;
case 4:
e.moveRight()
break;
}
}
});

// play sound
const music = k.play("bgsound", {
loop: true
});
music.volume(0.3)
k.volume(0.3)

// layers stuff
k.layers([
"bg",
"obj",
"ui"
], "obj"); // obj is "default" layer

// don't move the UI in the view port
k.camIgnore([ "ui", ]);

}
Insert cell
Insert cell
main = {
// load sprites
k.loadSprite("grass", await FileAttachment("tile_0000.png").url())
k.loadSprite("tree", await FileAttachment("tile_0013.png").url())
k.loadSprite("player", await FileAttachment("tile_0119@1.png").url())
k.loadSprite("bigtree", await FileAttachment("tile_0016.png").url())
k.loadSprite("boo", await FileAttachment("tile_0125@1.png").url())
k.loadSprite("splash", await FileAttachment("DOT Matrix.png").url())

k.loadSprite("path_left_down", await FileAttachment("tile_0086@1.png").url())
k.loadSprite("path_left_right", await FileAttachment("tile_0087@1.png").url())
k.loadSprite("path_up_down", await FileAttachment("tile_0104@1.png").image())
// load sounds
k.loadSound("bgsound", await FileAttachment("The Hero.ogg").url())
// scenes ( levels in RPG)
k.scene("splashscreen", scene_splashscreen )
k.scene("main", scene_main);
k.scene("intro", scene_intro);

k.start("splashscreen")
}
Insert cell
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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