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

<noinclude>
<!-- Widget文档区 -->
这个Widget用于生成剧情向伪刮刮乐游戏。
调用方法: {{#widget:GGLScratchGame}}
</noinclude>

<includeonly>
<!-- 1. CSS 样式部分 -->
<style>
/* 游戏容器 */
.ggl-scratch-game-wrapper {
    font-family: 'Courier New', Courier, monospace;
    background: transparent;
    padding: 20px;
    max-width: 500px;
    margin: 20px auto;
    user-select: none;
    position: relative;
    color: #333;
    text-align: center;
}

/* 顶部状态栏 */
.game-header {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #555;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

/* 彩票主体容器 */
.ticket-container {
    width: 100%; 
    max-width: 350px; /* 彩票宽度 */
    margin: 0 auto;
    /* --- 在这里替换彩票底图 --- */
    background: #fff; 
    /* background-image: url('你的彩票底图URL'); background-size: 100% 100%; */
    
    border: 2px dashed #999;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: relative;
    border-radius: 5px;
    transition: transform 0.3s;
}

.ticket-header {
    background: #d32f2f; /* 彩票头红色 */
    color: white;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* 刮奖区 */
.scratch-grid-area {
    /* --- 这里是刮奖区的黄色背景 --- */
    background: #fdd835; 
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    border: 2px solid #f9a825;
    margin-bottom: 15px;
}

/* 格子样式 */
.grid-cell {
    width: 100%;
    aspect-ratio: 1;
    /* --- 在这里替换覆盖层图片 --- */
    background: #222; 
    /* background-image: url('你的覆盖层URL'); background-size: cover; */
    
    color: #222; /* 隐藏文字 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    position: relative;
}

.grid-cell:hover {
    opacity: 0.9;
}

/* 刮开后的状态 */
.grid-cell.revealed {
    /* --- 在这里替换刮开后的底图 --- */
    background: #eee;
    /* background-image: url('你的刮开后底图URL'); background-size: cover; */
    
    color: #000;
    cursor: default;
    font-weight: bold;
}

/* === 底部控制区 (新布局) === */
.ticket-controls-area {
    display: flex;
    justify-content: space-between; /* 左右分开 */
    align-items: flex-end; /* 底部对齐 */
    margin-top: 10px;
    min-height: 60px; 
}

/* 左侧：颜文字 + 吐槽气泡 */
.mascot-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1; 
    margin-right: 10px;
    text-align: left;
}

.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 5px rgba(0,0,0,0.1);
    position: relative;
    min-height: 20px;
    line-height: 1.3;
    width: 100%;
}
/* 颜文字本体 */
.mascot-face {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: 5px;
}

/* 右侧：按钮 */
.main-btn {
    padding: 8px 15px;
    font-size: 14px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap; 
    height: 36px;
    box-shadow: 2px 2px 0 #000;
    transition: all 0.1s;
}
.main-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.main-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}
.main-btn.next-mode {
    background: #4CAF50; /* 绿色 */
}
.main-btn.danger-mode {
    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;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-family: monospace;
    text-align: center;
}
</style>

<!-- 2. HTML 结构部分 -->
<div class="ggl-scratch-game-wrapper" id="ggl-game-root">
    <div class="game-header">
        <span>GGL-LOTTERY</span>
        <span>剩余: <span id="count-val">3</span> 张</span>
    </div>

    <!-- 彩票本体 -->
    <div class="ticket-container" id="ticket-container">
        <div class="ticket-header">
            <div class="ticket-logo">SCRATCH-OFF</div>
            <div class="ticket-id">NO. <span id="ticket-id-display">001</span></div>
        </div>
        
        <!-- 刮奖格 -->
        <div class="scratch-grid-area" id="scratch-grid">
            <!-- JS生成 -->
        </div>

        <!-- 底部控制区：左吐槽，右按钮 -->
        <div class="ticket-controls-area">
            <!-- 左下 -->
            <div class="mascot-section">
                <div class="speech-bubble" id="mascot-text">请刮开覆盖层...</div>
                <div class="mascot-face" id="mascot-face">(・ω・)</div>
            </div>
            <!-- 右下 -->
            <button id="action-btn" class="main-btn">扫描结果</button>
        </div>
    </div>
</div>

<!-- 结局伪词条 (隐藏内容) -->
<div id="fake-wiki-entry" style="display:none; padding:20px; background:#fff; border:1px solid #ccc; max-width:800px; margin:0 auto;">
    <h1 style="border-bottom: 1px solid #aaa;">六世恶言</h1>
    <div class="wiki-content">
        <div style="float:right; border:1px solid #333; padding:10px; background:#f9f9f9; width: 250px; margin-left:15px; margin-bottom:10px;">
            <b>档案编号：</b> ERROR-666<br>
            <b>风险等级：</b> 极高<br>
            <b>来源：</b> 网页劫持
        </div>
        <p><b>描述：</b>“六世恶言”是一种具有高度认知危害的网络异常，常伪装成互动式网页组件（如抽奖、刮刮乐）诱导用户点击。</p>
        <hr>
        <h3>调查记录</h3>
        <p><b>收藏品1：</b> [短信记录] “你好，我查到了这个域名的注册人，但是那个地址...是个废弃的火葬场。”</p>
        <p><b>收藏品2：</b> [短信记录] “网站代码被篡改过，不仅仅是我们，我已经把警告短信向所有访问过该IP的人都发了一遍。”</p>
        <p><b>收藏品3：</b> [回复] <b>“它是我藏在赛博刮刮乐内的，是被惩罚的人。”</b></p>
    </div>
</div>

<!-- 3. JavaScript 逻辑部分 -->
<script>
(function() {
    var root = document.getElementById('ggl-game-root');
    if (!root) return;

    var TOTAL_CARDS = 11;
    var currentCardIndex = 0;
    var remainingTickets = 3;
    var isScanned = false;
    var revealedCount = 0;

    var elCount = root.querySelector('#count-val');
    var elGrid = root.querySelector('#scratch-grid');
    var elBtn = root.querySelector('#action-btn');
    var elMascotText = root.querySelector('#mascot-text'); 
    var elMascotFace = root.querySelector('#mascot-face'); 
    var elTicketId = root.querySelector('#ticket-id-display');
    var elFakeEntry = document.getElementById('fake-wiki-entry');

    // 剧情配置
    var cardsData = [
        { type: 'normal', mascot: '', broadcast: '结果：谢谢惠顾。' }, // 1. 无
        { type: 'normal', mascot: '(・ω・)', broadcast: '检测到异常字符。' }, // 2. 颜文字出场
        { type: 'bonus', mascot: '(^▽^)', broadcast: '恭喜！触发连击，奖励+2张！' }, // 3. 欢呼+加票
        { type: 'normal', mascot: 'o(*≧▽≦)ツ', broadcast: '结果：1 Data 2。好耶！' }, // 4. 思考
        { type: 'cheat', mascot: '( ･_･)', broadcast: '结果：中奖...？数据好像变了。' }, // 5. 意识到不对
        { type: 'narrative_bubble', mascot: '', broadcast: '对象已消失。', override: 'Data' }, // 6. 消失
        { type: 'glitch', mascot: '...', broadcast: 'ERR_#0x00 数据损坏', override: '???' }, // 7. 乱码
        { type: 'pain', mascot: '', broadcast: '声音检测："好痛！"', override: 'Pain' }, // 8. 受击
        { type: 'talk', mascot: '', broadcast: '收到文本："你是谁？"', override: 'Info' }, // 9. 交流
        { type: 'stop', mascot: '', broadcast: '警告：立即停止操作。', override: '停下' }, // 10. 停下
        { type: 'final', mascot: 'ERROR', broadcast: '你知道的太多了。', override: '平安喜乐' } // 11. 结局
    ];

    function updateMascot(text, face) {
        if(text) elMascotText.innerText = text;
        if(face !== undefined) elMascotFace.innerText = face;
    }

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

    function loadCard(index) {
        isScanned = false;
        revealedCount = 0;
        
        // 按钮重置
        elBtn.innerText = "扫描结果";
        elBtn.className = "main-btn"; 
        elBtn.disabled = false;
        elBtn.style = ""; // 清除内联样式
        
        elTicketId.innerText = (index + 1).toString().padStart(3, '0');
        elCount.innerText = remainingTickets;

        var data = cardsData[index];
        elGrid.innerHTML = '';
        
        // 更新颜文字，气泡重置为默认提示
        updateMascot("请刮开覆盖层...", data.mascot);
        
        // 卡片10: 红色警告
        if (data.type === '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';
            
            var content = data.override ? data.override : generateRandomContent();
            
            // 特殊格内容修正
            if(index === 2 && (i === 10 || i === 11)) content = "大奖"; 
            if(index === 8) content = "你是谁";

            cell.dataset.content = content;
            cell.dataset.idx = i;

            // 绑定点击
            (function(c, cIdx, d){
                c.addEventListener('click', function() {
                    if (c.classList.contains('revealed') || isScanned) return;
                    
                    c.classList.add('revealed');
                    revealedCount++;
                    c.innerText = c.dataset.content;

                    // 实时剧情吐槽
                    if(cIdx === 5) { // 消失，气泡说话
                        var msg = ["别点了", "我在看你", "停下"][Math.floor(Math.random()*3)];
                        updateMascot(msg, ""); 
                        c.innerText = ""; 
                    }
                    if(cIdx === 7) { // 喊疼
                        c.innerText = ["痛!", "别!", "啊!"][Math.floor(Math.random()*3)];
                        c.style.color = "red";
                        updateMascot("别挠我！", ">_<");
                    }
                    if(cIdx === 4 && revealedCount === 15) { // 改字
                        updateMascot("诶...？", "(;ﾟдﾟ)");
                         var cells = elGrid.querySelectorAll('.grid-cell');
                         if(cells[29]) cells[29].dataset.content = "中奖";
                    }
                });
            })(cell, index, data);

            elGrid.appendChild(cell);
        }
    }

    elBtn.addEventListener('click', function() {
        if (isScanned) {
            // [再来一张]
            currentCardIndex++;
            if (currentCardIndex < TOTAL_CARDS) {
                loadCard(currentCardIndex);
            }
        } else {
            // [扫描结果]
            if (revealedCount < 30 && currentCardIndex < 9) {
                if(!confirm("还没刮完，确定扫描吗？")) return;
            }

            var data = cardsData[currentCardIndex];
            isScanned = true;
            elBtn.innerText = "扫描中...";
            
            setTimeout(function(){
                // 显示扫描结果到气泡里
                updateMascot(data.broadcast);
                
                // 剧情逻辑
                if (data.type === 'bonus') {
                    remainingTickets += 2;
                    elCount.innerText = remainingTickets;
                }
                
                if (data.type === 'stop') {
                    setTimeout(function(){
                        updateMascot("严重错误。排出异物...");
                        elBtn.innerText = "取出未知票据";
                        elBtn.className = "main-btn danger-mode";
                    }, 800);
                    return;
                }

                if (data.type === 'final') {
                    triggerEnding();
                    return;
                }

                remainingTickets--;
                elCount.innerText = remainingTickets;

                if (remainingTickets < 0) {
                    updateMascot("票据耗尽。");
                    elBtn.disabled = true;
                    return;
                }

                elBtn.innerText = "再来一张";
                elBtn.classList.add('next-mode');

            }, 400); 
        }
    });

    function triggerEnding() {
        document.body.classList.add('invert-filter');
        setTimeout(function(){
            var crash = document.createElement('div');
            crash.className = 'crash-screen';
            crash.innerHTML = "<div>FATAL ERROR</div>";
            document.body.appendChild(crash);
            
            setTimeout(function(){
                crash.remove();
                document.body.classList.remove('invert-filter');
                root.style.display = 'none'; // 隐藏游戏
                if(elFakeEntry) elFakeEntry.style.display = 'block'; // 显示伪词条
                window.scrollTo(0,0);
                alert("【系统提示】您收到了一条新短信。");
            }, 3000);
        }, 1500);
    }

    // 启动
    loadCard(0);

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