EX QUICK START · RUNNING
Ten lines
to a blast.
This page runs the snippet below, as is. Click the board. Scroll it away and the engine pauses; switch tabs and it stops.
LIVE · CLICK THE BOARD TO BLAST
SOURCE · the whole thing
<canvas id="board" width="640" height="320"></canvas>
<script src="https://coded-dot-design.github.io/fizlet/fizlet.js"></script>
<script>
const { createEngine, effects } = fizlet;
const canvas = document.getElementById("board"), ctx = canvas.getContext("2d");
const engine = createEngine({ root: canvas }), fx = effects();
canvas.onclick = (ev) => fx.blast(ev.offsetX * 640 / canvas.clientWidth, ev.offsetY * 320 / canvas.clientHeight);
engine.add({
step: (e, dt) => fx.step(dt),
render: () => (ctx.clearRect(0, 0, 640, 320), fx.drawGround(ctx), fx.draw(ctx)),
});
engine.start();
</script>