hbuilderx放烟花代码html
时间: 2023-12-08 21:03:02 浏览: 302
1_烟花代码.html
以下是使用HBuilderX放烟花代码的HTML示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放烟花</title>
<style>
body {
background-color: black;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
var particles = [];
var particleCount = 100;
var particleRadius = 3;
var particleSpeed = 2;
var particleColor = '#fff';
function Particle(x, y, radius, color, speed) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.speed = speed;
this.angle = Math.random() * Math.PI * 2;
this.velocity = {
x: Math.cos(this.angle) * this.speed,
y: Math.sin(this.angle) * this.speed
};
this.gravity = 0.05;
this.friction = 0.99;
this.alpha = 1;
this.update = function() {
this.velocity.x *= this.friction;
this.velocity.y *= this.friction;
this.velocity.y += this.gravity;
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= 0.01;
if (this.alpha <= 0) {
particles.splice(particles.indexOf(this), 1);
}
this.draw();
};
this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
};
}
function createParticles(x, y) {
for (var i = 0; i < particleCount; i++) {
particles.push(new Particle(x, y, particleRadius, particleColor, particleSpeed));
}
}
canvas.addEventListener('click', function(e) {
createParticles(e.clientX, e.clientY);
});
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}
}
animate();
</script>
</body>
</html>
```
你可以将上述代码复制到HBuilderX中的HTML文件中,然后运行该文件即可在浏览器中看到放烟花的效果。
阅读全文