用HTML制作烟花模拟器

原创于 2025-06-28 13:28:49 发布 · 704 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

23 篇文章

订阅专栏

代码如下

<!DOCTYPE html>

<head>

<title>点击放烟花</title>

<style>

body {

margin: 0;

padding: 0;

overflow: hidden;

background-color: #000;

cursor: pointer;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-family: Arial, sans-serif;

}

.instructions {

position: fixed;

bottom: 20px;

text-align: center;

width: 100%;

font-size: 18px;

text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

pointer-events: none;

}

.particle {

position: absolute;

border-radius: 50%;

pointer-events: none;

}

</style>

</head>

<body>

<div class="instructions">点击屏幕任意位置放烟花</div>

document.addEventListener('DOMContentLoaded', () => {

const colors = [

'#FFB6C1', // 浅粉色

'#FFD700', // 金色

'#C0C0C0', // 银色

'#B0E0E6' // 粉蓝色

];

function createFirework(x, y) {

const particleCount = 100;

const angleIncrement = (Math.PI * 2) / particleCount;

const power = 5 + Math.random() * 5;

const color = colors[Math.floor(Math.random() * colors.length)];

// 创建中心点

const center = document.createElement('div');

center.className = 'particle';

center.style.width = '10px';

center.style.height = '10px';

center.style.backgroundColor = color;

center.style.left = `${x - 5}px`;

center.style.top = `${y - 5}px`;

center.style.boxShadow = `0 0 10px 2px ${color}`;

document.body.appendChild(center);

// 中心点动画

setTimeout(() => {

center.style.transform = 'scale(1.5)';

center.style.opacity = '0';

setTimeout(() => {

document.body.removeChild(center);

}, 300);

}, 50);

// 创建粒子

for (let i = 0; i < particleCount; i++) {

const particle = document.createElement('div');

particle.className = 'particle';

const size = 3 + Math.random() * 4;

particle.style.width = `${size}px`;

particle.style.height = `${size}px`;

particle.style.backgroundColor = color;

// 随机调整颜色亮度

if (Math.random() > 0.7) {

particle.style.filter = `brightness(${1 + Math.random() * 0.5})`;

}

const angle = angleIncrement * i;

const velocity = power * 0.5 + Math.random() * power;

const lifetime = 1000 + Math.random() * 500;

particle.style.left = `${x}px`;

particle.style.top = `${y}px`;

document.body.appendChild(particle);

// 粒子动画

const startTime = Date.now();

const vx = Math.cos(angle) * velocity;

const vy = Math.sin(angle) * velocity;

const gravity = 0.05;

function animateParticle() {

const elapsed = Date.now() - startTime;

const progress = elapsed / lifetime;

if (progress >= 1) {

document.body.removeChild(particle);

return;

}

// 抛物线运动

const moveX = vx * elapsed / 100;

const moveY = (vy * elapsed / 100) + (gravity * elapsed * elapsed / 2000);

particle.style.left = `${x + moveX}px`;

particle.style.top = `${y + moveY}px`;

particle.style.opacity = 1 - progress;

requestAnimationFrame(animateParticle);

}

requestAnimationFrame(animateParticle);

}

// 点击事件

document.addEventListener('click', (e) => {

createFirework(e.clientX, e.clientY);

// 随机生成1-3个额外的烟花

const extraFireworks = 1 + Math.floor(Math.random() * 3);

for (let i = 0; i < extraFireworks; i++) {

setTimeout(() => {

const x = e.clientX + (Math.random() - 0.5) * 100;

const y = e.clientY + (Math.random() - 0.5) * 100;

createFirework(x, y);

}, 100 + Math.random() * 200);

}

});

// 触摸事件支持移动设备

document.addEventListener('touchstart', (e) => {

e.preventDefault();

const touch = e.touches[0];

createFirework(touch.clientX, touch.clientY);

// 随机生成1-3个额外的烟花

const extraFireworks = 1 + Math.floor(Math.random() * 3);

for (let i = 0; i < extraFireworks; i++) {

setTimeout(() => {

const x = touch.clientX + (Math.random() - 0.5) * 100;

const y = touch.clientY + (Math.random() - 0.5) * 100;

createFirework(x, y);

}, 100 + Math.random() * 200);

}

}, { passive: false });

});

</script>

</body>

</html>