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

<noinclude>
== 刮刮乐重构版 ==
使用方式：修改第 222-224 行的图片URL，然后保存此页面
当前配置的图片：
* 底图（bg）：https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png
* 覆盖图（cover）：https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png
* 底层图（revealed）：https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg
</noinclude>

<includeonly>
<style>
/* === 核心容器 === */
.ggl-game-root {
    max-width: 400px; /* 限制最大显示宽度，防止在大屏太巨大 */
    margin: 20px auto;
    font-family: 'Courier New', monospace;
    user-select: none;
}

.game-header {
    text-align: center;
    color: #555;
    margin-bottom: 10px;
    font-weight: bold;
}

/* === 彩票视觉部分 === */
.ticket-wrapper {
    position: relative;
    width: 100%;
    /* 核心：保持 1075:1911 的宽高比 */
    padding-bottom: 177.76%; 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border-radius: 8px;
}

/* === 刮奖区定位 (关键) === */
.scratch-grid-overlay {
    position: absolute;
    /* 以下百分比是根据 1075x1911 图和 846x1020 区域计算得出 */
    width: 78.7%;   /* 846 / 1075 */
    height: 53.4%;  /* 1020 / 1911 */
    left: 10.65%;   /* (100% - 78.7%) / 2 */
    top: 34%;       /* 估算黄色区域距离顶部的距离，可根据实际效果微调 */
    
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    /* 消除格子间隙，因为你的图是连续的 */
    gap: 0; 
}

/* === 格子样式 === */
.grid-cell {
    width: 100%;
    height: 100%;
    background-size: 100% 100%; /* 强制图片拉伸填满格子 */
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* 初始文字透明 (刮开前看不到字) */
    color: transparent; 
    font-weight: bold;
    font-size: 14px;
    /* 文字描边，防止在复杂背景看不清 */
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; 
}

/* 刮开后的状态 */
.grid-cell.revealed {
    cursor: default;
    color: #d32f2f; /* 刮开后文字颜色 */
}

/* === 底部控制区 (重写布局) === */
.controls-area {
    margin-top: 15px;
    display: flex;
    justify-content: space-between; /* 左右分布 */
    align-items: flex-end;
}

/* 左侧：气泡+颜文字 */
.mascot-box {
    flex: 1;
    text-align: left;
    margin-right: 10px;
}
.speech-bubble {
    background: #fff;
    border: 1px solid #333;
    border-radius: 8px 8px 8px 0;
    padding: 8px;
    font-size: 12px;
    margin-bottom: 5px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    min-height: 20px;
    line-height: 1.3;
}
.mascot-face {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: 5px;
}

/* 右侧：按钮 */
.action-btn {
    padding: 0 20px;
    height: 40px;
    font-size: 14px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}
.action-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.action-btn:disabled {
    background: #ccc;
    box-shadow: none;
}
.action-btn.next { background: #4CAF50; }
.action-btn.danger { background: #000; color: red; border: 1px solid red; }

/* 结局特效 */
.invert-filter { filter: invert(100%); background: black !important; }
.crash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: black; color: red; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
}
</style>

<!-- HTML 结构 -->
<!-- WIDGET_PARAMS: bg={{{bg}}}, cover={{{cover}}}, revealed={{{revealed}}} -->
<div class="ggl-game-root" id="ggl-root">
    <div class="game-header">
        GGL-LOTTERY | 剩余: <span id="count-val">3</span>
    </div>

    <!-- 1. 彩票底图层 -->
    <!-- 用 data-* 属性存放参数，避免style属性中的模板解析失败 -->
    <div class="ticket-wrapper" id="ticket-bg" data-bg="{{{bg|图片1.png}}}" data-cover="{{{cover|刮开前.png}}}" data-revealed="{{{revealed|刮开后.jpg}}}">
        
        <!-- 2. 刮奖区覆盖层 (绝对定位) -->
        <div class="scratch-grid-overlay" id="scratch-grid">
            <!-- JS 生成格子 -->
        </div>

        <!-- ID 显示 (可选，定位在右上角或哪里，这里为了简洁先隐藏或微调) -->
        <div style="position: absolute; top: 2%; right: 5%; color: white; font-weight: bold; font-size: 12px;">
            NO.<span id="ticket-id">001</span>
        </div>
    </div>

    <!-- 3. 底部控制 -->
    <div class="controls-area">
        <div class="mascot-box">
            <div class="speech-bubble" id="mascot-text">请刮开所有区域...</div>
            <div class="mascot-face" id="mascot-face">(・ω・)</div>
        </div>
        <button id="main-btn" class="action-btn">扫描结果</button>
    </div>
</div>

<!-- 伪词条 -->
<div id="fake-wiki-entry" style="display:none; padding:20px; background:#fff; border:1px solid #ccc; max-width:800px; margin:20px auto;">
    <h1 style="border-bottom: 1px solid #aaa;">六世恶言</h1>
    <div style="margin-top:10px;">
        <p><b>描述：</b>“六世恶言”是一种具有高度认知危害的网络异常...</p>
        <hr>
        <p><b>收藏品3：</b> [回复] <b>“它是我藏在赛博刮刮乐内的，是被惩罚的人。”</b></p>
    </div>
</div>

<script>
(function() {
    var root = document.getElementById('ggl-root');
    if (!root) return;

    // ===== 参数配置 =====
    // 直接在这里修改图片URL
    var imgBg = 'https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png';
    var imgCover = 'https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png';
    var imgRevealed = 'https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg';
    
    // 调试：打印最终获取的参数
    console.log('Widget参数:', { imgBg, imgCover, imgRevealed });
    
    // 应用背景图
    var elTicketBg = document.getElementById('ticket-bg');
    if (elTicketBg && imgBg) {
        elTicketBg.style.backgroundImage = "url('" + imgBg + "')";
    }
    var TOTAL_CARDS = 11;
    var currentIdx = 0;
    var remain = 3;
    var isScanned = false;
    var revealedCount = 0;

    // DOM
    var elCount = root.querySelector('#count-val');
    var elGrid = root.querySelector('#scratch-grid');
    var elBtn = root.querySelector('#main-btn');
    var elBubble = root.querySelector('#mascot-text');
    var elFace = root.querySelector('#mascot-face');
    var elId = root.querySelector('#ticket-id');
    var elFakeEntry = document.getElementById('fake-wiki-entry');

    // 数据
    var cards = [
        { type: 'n', face: '', text: '结果：谢谢惠顾。' },
        { type: 'n', face: '(・ω・)', text: '检测到异常字符。' },
        { type: 'b', face: '(^▽^)', text: '恭喜！触发连击，奖励+2张！' },
        { type: 'n', face: 'o(*≧▽≦)ツ', text: '结果：1 Data 2。好耶！' },
        { type: 'c', face: '( ･_･)', text: '结果：中奖...？数据好像变了。' },
        { type: 'x', face: '', text: '对象已消失。', val: 'Data' },
        { type: 'g', face: '...', text: 'ERR_#0x00 数据损坏', val: '???' },
        { type: 'p', face: '', text: '声音检测："好痛！"', val: 'Pain' },
        { type: 't', face: '', text: '收到文本："你是谁？"', val: 'Info' },
        { type: 's', face: '', text: '警告：立即停止操作。', val: '停下' },
        { type: 'f', face: 'ERROR', text: '你知道的太多了。', val: '平安喜乐' }
    ];

    function setMascot(txt, face) {
        if(txt) elBubble.innerText = txt;
        if(face !== undefined) elFace.innerText = face;
    }

    function randVal() {
        var arr = ['10mb', '50Gb', '5Kb', '1Tb', '福', '寿', '乐', '奖', '空'];
        return arr[Math.floor(Math.random() * arr.length)];
    }

    function initCard(idx) {
        isScanned = false;
        revealedCount = 0;
        elBtn.innerText = "扫描结果";
        elBtn.className = "action-btn";
        elBtn.disabled = false;
        elBtn.style = "";

        elId.innerText = (idx+1).toString().padStart(3,'0');
        elCount.innerText = remain;

        var d = cards[idx];
        elGrid.innerHTML = '';
        setMascot("请刮开所有区域...", d.face);

        if(d.type === 's') { // Stop
            elBtn.style.border = "2px solid red";
            elBtn.style.color = "red";
        }

        for(var i=0; i<30; i++) {
            var cell = document.createElement('div');
            cell.className = 'grid-cell';
            
            // 1. 设置刮开前的图 (覆盖层)
            cell.style.backgroundImage = "url('" + imgCover + "')";

            // 决定内容
            var val = d.val ? d.val : randVal();
            if(idx === 2 && (i===10 || i===11)) val = "大奖";
            if(idx === 8) val = "你是谁";

            cell.dataset.val = val;

            // 点击事件
            (function(c, cIdx, cVal, idxI){
                c.addEventListener('click', function() {
                    if(c.classList.contains('revealed') || isScanned) return;
                    
                    // 2. 切换为刮开后的图
                    c.classList.add('revealed');
                    c.style.backgroundImage = "url('" + imgRevealed + "')";
                    c.innerText = cVal; // 显示文字
                    
                    revealedCount++;

                    // 剧情触发
                    if(cIdx === 5) { // 消失
                        setMascot(["别点了","我在看你"][Math.floor(Math.random()*2)], "");
                        c.innerText = ""; 
                    }
                    if(cIdx === 7) { // 痛
                         c.innerText = ["痛!","别!"][Math.floor(Math.random()*2)];
                         c.style.color = "red";
                         setMascot("别挠我！", ">_<");
                    }
                    if(cIdx === 4 && revealedCount === 15) { // 改字
                         setMascot("诶...？", "(;ﾟдﾟ)");
                         if(elGrid.children[29]) {
                             elGrid.children[29].dataset.val = "中奖";
                         }
                    }
                });
            })(cell, idx, val, i);

            elGrid.appendChild(cell);
        }
    }

    elBtn.addEventListener('click', function() {
        if(isScanned) {
            // Next
            currentIdx++;
            if(currentIdx < TOTAL_CARDS) initCard(currentIdx);
        } else {
            // Scan
            if(revealedCount < 30 && currentIdx < 9) {
                if(!confirm("还没刮完，确定扫描吗？")) return;
            }
            
            var d = cards[currentIdx];
            isScanned = true;
            elBtn.innerText = "扫描中...";
            
            setTimeout(function(){
                setMascot(d.text);
                
                if(d.type === 'b') { remain += 2; elCount.innerText = remain; }
                if(d.type === 'f') { doEnd(); return; }
                if(d.type === 's') {
                    setTimeout(function(){
                         setMascot("严重错误。排出异物...");
                         elBtn.innerText = "取出未知票据";
                         elBtn.className = "action-btn danger";
                    }, 800);
                    return;
                }

                remain--;
                elCount.innerText = remain;
                if(remain < 0) {
                    setMascot("票据耗尽。");
                    elBtn.disabled = true;
                    return;
                }
                elBtn.innerText = "再来一张";
                elBtn.classList.add('next');
            }, 500);
        }
    });

    function doEnd() {
        document.body.classList.add('invert-filter');
        setTimeout(function(){
            var div = document.createElement('div');
            div.className = 'crash-screen';
            div.innerText = "FATAL ERROR";
            document.body.appendChild(div);
            setTimeout(function(){
                div.remove();
                document.body.classList.remove('invert-filter');
                root.style.display = 'none';
                if(elFakeEntry) elFakeEntry.style.display = 'block';
                window.scrollTo(0,0);
                alert("【系统提示】收到新短信。");
            }, 3000);
        }, 1500);
    }

    initCard(0);
})();
</script>
</includeonly>