📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
OublietteKaboom and TagsKaboom JS Demo 001Kaboom JS Template - ( Latest )Hello, Kaboom sprite animationKaboom JS Custom Component TestKaboom JS TemplateUpdating Game Elements in Kaboom JS Without Forcing a RefreshUntitledKaboom: random rotating tileKaboom 0.5.1 -- load fontRPG Tiles: Scatter Art with KaboomDot Matrix RPGKaboom 0.5.1 - BenchmarkKaboom 0.5.1Kaboom - dynamic values
Kaboom RPG Example
Also listed in…
Games
<canvas id="kb"></canvas>
{
// initialize Kaboom and assign to var
let K= KABOOM({
width: 140, // width of canvas
height: 140, // height of canvas
scale: 4,
clearColor: [0, 0, 0, 1],
canvas: document.getElementById("kb"),
});
// Load Images
K.loadSprite("steel", await FileAttachment("steel.png").url());
K.loadSprite("ch1", await FileAttachment("ch1.png").url());
K.loadSprite("ch2", await FileAttachment("ch2.png").url());
K.loadSprite("grass", await FileAttachment("grass.png").url());
K.loadSprite("door", await FileAttachment("door.png").url());
K.loadSprite("key", await FileAttachment("key.png").url());
K.loadSprite("guy", await FileAttachment("guy.png").url());
K.scene("main", (levelIdx) => {
//levelIdx passed in from start()
const characters = {
"a": {
sprite: "ch1",
msg: "ohhi how are you",
},
"b": {
sprite: "ch2",
msg: "get out!",
},
};
const levels = [
[
"=======|==",
"= =",
"= a =",
"= =",
"= =",
"= $ =",
"= =",
"= =",
"= @ =",
"==========",
],
[
"==========",
"= =",
"= $ =",
"= =",
"| =",
"= =",
"= b =",
"= =",
"= @ =",
"==========",
],
];
K.addLevel(levels[levelIdx], {
width: 11,
height: 11,
pos: K.vec2(20, 20),
"=": [
K.sprite("steel"),
K.solid(),
],
"$": [
K.sprite("key"),
"key",
],
"@": [
K.sprite("guy"),
"player"
],
"|": [
K.sprite("door"),
//K.solid(),
"door",
],
any(ch) {
const char = characters[ch];
if (char) {
return [
K.sprite(char.sprite),
//K.solid(),
"character",
{
msg: char.msg,
},
];
}
},
});
const player = K.get("player")[0];
let hasKey = false;
let talking = null;
function talk(msg) {
talking = K.add([
K.text(msg),
]);
}
player.overlaps("key", (key) => {
K.destroy(key);
hasKey = true;
});
player.overlaps("door", () => {
if (hasKey) {
if (levelIdx + 1 < levels.length) {
K.go("main", levelIdx + 1);
} else {
K.go("win");
}
} else {
talk("you got no key!");
}
});
player.overlaps("character", (ch) => {
talk(ch.msg);
});
K.keyPress(["left", "right", "up", "down"], () => {
if (talking) {
K.destroy(talking);
talking = null;
}
});
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.scene("win", () => {
K.add([
K.text("you win!"),
K.pos(K.width() / 2, K.height() / 2),
K.origin("center"),
]);
});
K.start("main", 0);
}
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.
