<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Main Page with Fireworks Background</title>
<style>
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #000;
}
#fireworks-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="fireworks-canvas"></canvas>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
function initFireworks() {
var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;
canvas = document.getElementById("fireworks-canvas");
context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
stage = new createjs.Stage(canvas);
stage.autoClear = false;
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
createjs.Ticker.setFPS(50);
createjs.Touch.enable(stage);
stage.update();
GRAVITY = 1;
K = 0.9;
SPEED = 12;
ToRadian = function (degree) {
return degree * Math.PI / 180.0;
};
Fireworks = class Fireworks {
constructor(sx = 100, sy = 100, particles = 70) {
this.sx = sx;
this.sy = sy;
this.particles = particles;
this.sky = new createjs.Container();
this.r = 0;
this.h = Math.random() * 360 | 0;
this.s = 100;
this.l = 50;
this.size = 3;
for (let i = 0; i < this.particles; i++) {
let speed = Math.random() * 12 + 2;
let circle = new createjs.Shape();
circle.graphics.f(`hsla(${this.h}, ${this.s}%, ${this.l}%, 1)`).dc(0, 0, this.size);
circle.snapToPixel = true;
circle.compositeOperation = "lighter";
let rad = ToRadian(Math.random() * 360 | 0);
circle.set({
x: this.sx,
y: this.sy,
vx: Math.cos(rad) * speed,
vy: Math.sin(rad) * speed,
rad: rad
});
this.sky.addChild(circle);
}
stage.addChild(this.sky);
}
explode() {
if (this.sky) {
this.h++;
for (let p = 0; p < this.sky.children.length; p++) {
let circle = this.sky.getChildAt(p);
circle.vx = circle.vx * K;
circle.vy = circle.vy * K;
circle.x += circle.vx;
circle.y += circle.vy + GRAVITY;
this.l = Math.random() * 100;
this.size = this.size - 0.001;
if (this.size > 0) {
circle.graphics.c().f(`hsla(${this.h}, 100%, ${this.l}%, 1)`).dc(0, 0, this.size);
}
}
if (this.sky.alpha > 0.1) {
this.sky.alpha -= K / 50;
} else {
stage.removeChild(this.sky);
this.sky = null;
}
}
}
};
fireBoss = [];
setInterval(function () {
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}, 40);
setInterval(function () {
let x = Math.random() * canvas.width | 0;
let y = Math.random() * canvas.height | 0;
fireBoss.push(new Fireworks(x, y));
fireBoss.push(new Fireworks(x, y));
}, 1300);
repeat = function () {
for (let i = 0; i < fireBoss.length; i++) {
if (fireBoss[i].sky) {
fireBoss[i].explode();
}
}
stage.update();
};
createjs.Ticker.on("tick", repeat);
stage.addEventListener("stagemousedown", function () {
fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
});
}
initFireworks();
</script>
</body>
</html>
index.html
index.html