📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
May 30, 2022
Kaboom =(await import('https://unpkg.com/kaboom@2000.2.9/dist/kaboom.mjs?module')).default
cnv = htl.html`
<canvas
class="demo"
height="480"
width="640"
></canvas>`
k = Kaboom({
global: false, // don't pollute global with Kaboom methods
width: 640,
height:480,
canvas: cnv.querySelector('canvas'),
background: [0,0,256]
})
starting = {
k.loadBean();
k.scene("main", () => {
// notice this game entity is not effected by the onUpdate as it does not have a "bean" tag.
k.add([
k.text("Kaboom + Tags = Awesome ", {
size: 16
}),
k.pos(10, 5),
]);
for (let i = 0; i< k.randi(10,100); i++){
addPlayer(getRandomInt(600),getRandomInt(400))
}
k.onUpdate("bean", (b)=> {
// find every game object with the tag "bean" and update it every frame
const x_range = 40
const y_range = 40
// move it a little, randomly
b.move(getRandomInt(x_range) - getRandomInt(x_range),getRandomInt(y_range)-getRandomInt(y_range));
// if it goes off screen, remove it
if (b.pos.x < 0 || b.pos.x > 640 || b.pos.y < 0 || b.pos.y > 480) {
k.destroy(b)
}
b.angle= getRandomInt(30); // change the angle of rotation based on the rotate() attribute added on creation
})
});
k.go("main");
}
k.get("bean")
addPlayer = (x,y)=> {
// a method that creates a player object of tag "bean"
// x = x position
// y = y position
k.add([
k.sprite("bean"), // renders as a sprite
k.pos(x, y), // position in world
k.color(getRandomInt(255), getRandomInt(255), getRandomInt(255)),
"bean", // tag bean - used later onUpdate to find all the objects tagged "bean"
k.rotate(0),
k.origin("center")
]);
}
getRandomInt= (num)=>{
//return Math.round( Math.random() * (modulo-1));
return k.randi(0,num)
}
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.
