website/102.html at main · shenyuhao1/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colors = ['red', 'orange', 'yellow', 'green', 'black', 'blue', 'purple'];
const burstAltitude = 150; // Y position where balloons burst
const balloons = [];

class Balloon {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = canvas.height;
        this.speed = Math.random() * 2 + 1;
        this.baseSize = 30;
        this.size = this.baseSize;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.burst = false;
    }

    update() {
        if (!this.burst) {
            this.y -= this.speed;
            // Increase size based on altitude
            this.size = this.baseSize + (canvas.height - this.y) * 0.1;

            // Check burst condition
            if (this.y < burstAltitude) {
                this.burst = true;
                // Random delay for bursting
                setTimeout(() => this.pop(), Math.random() * 1000);
            }
        }
    }

    pop() {
        // Animate popping effect
        const popInterval = setInterval(() => {
            this.size += 2;
            if (this.size > 60) clearInterval(popInterval);
        }, 50);

        // Remove from array after animation
        setTimeout(() => {
            balloons.splice(balloons.indexOf(this), 1);
        }, 300);
    }

    draw() {
        if (!this.burst) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size/2, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.strokeStyle = 'black';
            ctx.stroke();

            // Draw string
            ctx.beginPath();
            ctx.moveTo(this.x, this.y + this.size/2);
            ctx.lineTo(this.x, this.y + this.size/2 + 30);
            ctx.stroke();
        }
    }
}

// Create new balloons periodically
setInterval(() => {
    if (balloons.length < 15) {
        balloons.push(new Balloon());
    }
}, 2000);

// Animation loop
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    balloons.forEach(balloon => {
        balloon.update();
        balloon.draw();
    });

    requestAnimationFrame(animate);
}

animate();
</script>
</body>
</html>