写一个HBuilder X中自动播放动态烟花的代码

在HBuilder X中，可以使用HTML5的Canvas元素和JavaScript来实现自动播放动态烟花的效果。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自动播放动态烟花</title>
    <style>
        #canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // 获取画布元素
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // 设置画布大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 创建烟花粒子对象
        function Particle(x, y) {
            this.x = x;
            this.y = y;
            this.radius = Math.random() * 2 + 1;
            this.vx = Math.random() * 2 - 1;
            this.vy = Math.random() * 2 - 1;
            this.alpha = 1;
        }

        // 更新烟花粒子的位置和透明度
        Particle.prototype.update = function() {
            this.x += this.vx;
            this.y += this.vy;
            this.alpha -= 0.01;
        }

        // 绘制烟花粒子
        Particle.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
            ctx.fill();
        }

        // 创建烟花
        function Firework() {
            this.x = Math.random() * canvas.width;
            this.y = canvas.height;
            this.particles = [];
            this.isExploded = false;
        }

        // 更新烟花的位置和粒子
        Firework.prototype.update = function() {
            this.y -= 2;

            if (this.y < canvas.height / 2) {
                this.isExploded = true;
                this.explode();
            }
        }

        // 绘制烟花
        Firework.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
            ctx.fillStyle = "white";
            ctx.fill();
        }

        // 烟花爆炸
        Firework.prototype.explode = function() {
            for (var i = 0; i < 50; i++) {
                var particle = new Particle(this.x, this.y);
                this.particles.push(particle);
            }
        }

        // 更新画布
        function updateCanvas() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < fireworks.length; i++) {
                fireworks[i].update();
                fireworks[i].draw();

                for (var j = 0; j < fireworks[i].particles.length; j++) {
                    fireworks[i].particles[j].update();
                    fireworks[i].particles[j].draw();

                    if (fireworks[i].particles[j].alpha <= 0) {
                        fireworks[i].particles.splice(j, 1);
                    }
                }

                if (fireworks[i].isExploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                }
            }

            if (Math.random() < 0.05) {
                fireworks.push(new Firework());
            }

            requestAnimationFrame(updateCanvas);
        }

        // 创建烟花数组
        var fireworks = [];

        // 启动动画
        updateCanvas();
    </script>
</body>
</html>
将以上代码保存为一个HTML文件，然后在HBuilder X中运行该文件，即可看到自动播放动态烟花的效果。