写一个能在浏览器打开的烟花表白代码
时间: 2023-02-24 08:04:26 浏览: 120
下面是一个简单的烟花表白代码,你可以在浏览器中打开并运行:
```
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<script>
const canvas = document.getElementById("fireworks");
const ctx = canvas.getContext("2d");
let particles = [];
let hue = 0;
let limiterTotal = 5;
let limiterTick = 0;
let timerTotal = 80;
let timerTick = 0;
let mousedown = false;
let mx;
let my;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function updateCoords(e) {
mx = e.clientX;
my = e.clientY;
}
function setParticleDirection(p) {
let angle = (Math.random() * Math.PI * 2).toFixed(2);
let velocity = (Math.random() * 1).toFixed(2);
p.x = p.x + Math.cos(angle) * velocity;
p.y = p.y + Math.sin(angle) * velocity;
}
function updateParticles() {
for (let i = 0; i < particles.length; i++) {
let p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.alpha -= 0.05;
if (p.alpha <= 0) {
particles.splice(i, 1);
}
}
}
function drawParticles() {
for (let i = 0; i < particles.length; i++) {
let p = particles[i];
ctx.beginPath();
ctx.fillStyle = `hsla(${p.hue}, 100%, 50%, ${p.alpha})`;
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false);
ctx.fill();
}
}
function createParticles(x, y) {
hue = Math.random() * 360;
for (let i = 0; i < 50; i++) {
let p = {
x: x,
y: y,
vx: Math.random() * 3 - 1.5,
vy: Math.random() * 3 - 1.5,
alpha: 1,
hue: hue,
radius: Math.random() * 2
};
particles.push(p);
setParticleDirection(p);
}
}
canvas.addEventListener("mousemove", updateCoords, false);
canvas.addEventListener("mousedown", function(e) {