查看“︁微件:GachaBox”︁的源代码

<includeonly>
<style>
.gacha-box {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    border: 3px solid #ff9800;
    box-shadow: 0 4px 20px rgba(255,152,0,0.3);
    margin: 15px 0;
    max-width: 450px;
}
.gacha-btn {
    padding: 12px 30px;
    font-size: 18px;
    background: linear-gradient(135deg, #ff9800, #f44336);
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    animation: pulse 2s infinite;
}
.gacha-btn:disabled {
    background: #ccc;
    animation: none;
    cursor: not-allowed;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,152,0,0.4); }
    50% { box-shadow: 0 0 0 15px rgba(255,152,0,0); }
}
.gacha-result {
    margin-top: 20px;
    animation: popIn 0.5s ease-out;
}
@keyframes popIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.gacha-result img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    border: 3px solid #ffd54f;
    padding: 8px;
    background: #fff8e1;
}
.gacha-rarity {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 5px;
    color: #fff;
}
.gacha-count {
    font-size: 13px;
    color: #888;
    margin-top: 8px;
}
</style>

<div class="gacha-box" id="gacha-box">
    <h3>🎁 植物盲盒</h3>
    <p style="color:#888;font-size:13px;">每次抽取随机获得一个植物卡片！</p>
    <button class="gacha-btn" id="gacha-btn">🔮 开盲盒</button>
    <div class="gacha-count" id="gacha-count">今日剩余：3 次</div>
    <div id="gacha-result"></div>
</div>

<script>
(function() {
    var MAX_DAILY = 3;
    var todayKey = 'gacha_' + new Date().toDateString();
    var used = parseInt(localStorage.getItem(todayKey)) || 0;
    var $btn = document.getElementById('gacha-btn');
    var $count = document.getElementById('gacha-count');
    var $result = document.getElementById('gacha-result');

    function updateCount() {
        var left = MAX_DAILY - used;
        $count.textContent = '今日剩余：' + left + ' 次';
        if (left <= 0) {
            $btn.disabled = true;
            $btn.textContent = '🎴 明天再来';
        }
    }

    // 收集页面上所有植物卡片
    function getPlantCards() {
        var cards = [];
        document.querySelectorAll('.pvzhe-card').forEach(function(card) {
            var name = card.querySelector('.pvzhe-card-name');
            var img = card.querySelector('img');
            if (name && img) {
                var rarity = '普通';
                var bg = card.style.background || getComputedStyle(card).background;
                if (bg.indexOf('linear-gradient') !== -1) {
                    if (bg.indexOf('FFD700') !== -1 || bg.indexOf('FFA000') !== -1) rarity = '至尊金卡';
                    else if (bg.indexOf('42A5F5') !== -1 || bg.indexOf('E3F2FD') !== -1) rarity = '臻享钻卡';
                    else if (bg.indexOf('FF6B6B') !== -1 || bg.indexOf('f8a5c2') !== -1) rarity = '梦幻彩卡';
                    else if (bg.indexOf('FFF9C4') !== -1) rarity = '星光闪卡';
                    else if (bg.indexOf('F3E5F5') !== -1 || bg.indexOf('AB47BC') !== -1) rarity = '升级紫卡';
                }
                cards.push({ name: name.textContent.trim(), img: img.src, rarity: rarity });
            }
        });
        return cards;
    }

    function openGacha() {
        if (used >= MAX_DAILY) return;

        var cards = getPlantCards();
        if (cards.length === 0) {
            $result.innerHTML = '<p style="color:#888;">当前页面没有植物卡片，请到植物大全页面开盲盒～</p>';
            return;
        }

        used++;
        localStorage.setItem(todayKey, used);
        updateCount();

        // 开盲盒动画
        $btn.textContent = '🎰 开盒中...';
        $btn.disabled = true;

        setTimeout(function() {
            var card = cards[Math.floor(Math.random() * cards.length)];
            var rarityColors = {
                '至尊金卡': '#ff9800',
                '臻享钻卡': '#2196F3',
                '梦幻彩卡': '#e91e63',
                '星光闪卡': '#ffc107',
                '升级紫卡': '#9c27b0',
                '普通': '#757575'
            };

            $result.innerHTML =
                '<div class="gacha-result">' +
                    '<a href="/w/' + encodeURIComponent(card.name) + '">' +
                        '<img src="' + card.img + '" alt="' + card.name + '">' +
                    '</a>' +
                    '<div style="font-weight:bold;margin-top:5px;">' + card.name + '</div>' +
                    '<span class="gacha-rarity" style="background:' + (rarityColors[card.rarity] || '#757575') + ';">' + card.rarity + '</span>' +
                '</div>';

            $btn.textContent = '🔮 再开一次';
            $btn.disabled = used >= MAX_DAILY;
            if (used >= MAX_DAILY) {
                $btn.textContent = '🎴 明天再来';
            }
        }, 800);
    }

    document.getElementById('gacha-btn').addEventListener('click', openGacha);
    updateCount();
})();
</script>
</includeonly>