随机能量领取

vue 写一个随机产生能量 点击领取页面 下面代码由cursor生成

<template>
    <view class="bubble-container">
        <view v-for="(bubble, index) in bubbles" :key="index" class="bubble-item" :style="bubble.style"
            @click="handleReceive(index)">
            <view class="bubble-content">
                <view class="bubble-icon">⚡️</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'BubbleReceive',
    data() {
        return {
            bubbles: [],
            maxBubbles: 5, // 最大显示数量
            bubbleInterval: null
        };
    },
    mounted() {
        this.startBubbleGeneration();
    },
    beforeDestroy() {
        if (this.bubbleInterval) {
            clearInterval(this.bubbleInterval);
        }
    },
    methods: {
        startBubbleGeneration() {
            // 每3秒生成一个新气泡
            this.bubbleInterval = setInterval(() => {
                if (this.bubbles.length < this.maxBubbles) {
                    this.generateBubble();
                }
            }, 3000);
        },
        generateBubble() {
            const bubble = {
                style: {
                    left: `${Math.random() * 80 + 10}%`, // 随机水平位置
                    animationDelay: `${Math.random() * 2}s`, // 随机动画延迟
                    transform: `scale(${Math.random() * 0.3 + 0.7})` // 随机大小
                }
            };
            this.bubbles.push(bubble);
        },
        handleReceive(index) {
            // 添加点击动画
            const bubble = this.bubbles[index];
            bubble.style.animation = 'pop 0.3s ease-out';

            // 触发领取事件
            this.$emit('receive');

            // 移除气泡
            setTimeout(() => {
                this.bubbles.splice(index, 1);
            }, 300);
        }
    }
};
</script>

<style scoped>
.bubble-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
}

.bubble-item {
    position: absolute;
    bottom: 0;
    pointer-events: auto;
    animation: float 3s ease-in-out infinite;
}

.bubble-content {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
    cursor: pointer;
}

.bubble-icon {
    font-size: 24px;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

@keyframes pop {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
</style>