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

<noinclude>
<!-- 这里是文档区，只有在编辑Widget页面时看得到 -->
这个Widget用于生成SCP风格的伪刮刮乐游戏。
调用方法: {{#widget:ScpScratchGame}}
</noinclude>

<includeonly>
<!-- 1. CSS 样式部分 -->
<style>
/* 游戏容器 */
.scp-scratch-game-wrapper {
    font-family: 'Courier New', Courier, monospace;
    background: #f0f0f0;
    border: 2px solid #333;
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    user-select: none;
    position: relative;
    color: #333; /* 强制字体颜色，防止Wiki深色模式影响 */
}

/* 顶部 */
.game-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 18px;
}

/* 主体布局 */
.game-body {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* 左侧终端 */
.broadcast-terminal {
    flex: 1;
    min-width: 200px;
    background: #222;
    color: #0f0;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    border: 4px inset #555;
    height: 400px; /* 固定高度防止抖动 */
}
.terminal-screen {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
    font-family: monospace;
    white-space: pre-wrap; /* 保留换行 */
}
.mascot-area {
    height: 40px;
    text-align: center;
    font-size: 24px;
    color: yellow;
    border-top: 1px solid #444;
    padding-top: 5px;
}

/* 右侧彩票 */
.ticket-container {
    width: 300px; 
    background: #fff;
    border: 2px dashed #999;
    padding: 10px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    position: relative;
    transition: transform 0.5s;
}

.ticket-header {
    background: #d32f2f;
    color: white;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.scratch-grid-area {
    background: #fdd835;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    margin-top: 10px;
    border: 2px solid #f9a825;
}

/* 格子样式 */
.grid-cell {
    width: 100%;
    aspect-ratio: 1; /* 保持正方形 */
    background: #111;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.1);
}

.grid-cell:hover {
    background: #333;
}

/* 刮开后的状态 */
.grid-cell.revealed {
    background: #eee;
    color: #333;
    cursor: default;
    font-weight: bold;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}

/* 票根颜文字 */
.ticket-footer {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    position: relative;
    height: 30px;
}
.mascot-on-ticket {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 20px;
    font-weight: bold;
}

/* 按钮 */
.game-controls {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
.main-btn {
    padding: 10px 30px;
    font-size: 18px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.main-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.main-btn.next-mode {
    background: #4CAF50;
}

/* 特效类 */
.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="scp-scratch-game-wrapper" id="scp-game-root">
    <!-- 顶部状态栏 -->
    <div class="game-header">
        <span class="ticket-counter">当前剩余彩票: <span id="count-val">3</span> 张</span>
    </div>

    <div class="game-body">
        <!-- 左侧：播报终端 -->
        <div class="broadcast-terminal">
            <div class="terminal-screen" id="terminal-screen">SYSTEM READY...
请刮开右侧彩票所有区域
然后点击[扫描结果]</div>
            <div class="mascot-area" id="mascot"></div>
        </div>

        <!-- 右侧：彩票主体 -->
        <div class="ticket-container" id="ticket-container">
            <div class="ticket-header">
                <div class="ticket-logo">SC-LOTTERY</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-footer">
                兑奖期限：即开即兑
                <div class="mascot-on-ticket" id="ticket-mascot"></div>
            </div>
        </div>
    </div>

    <!-- 底部操作区 -->
    <div class="game-controls">
        <button id="action-btn" class="main-btn">扫描结果</button>
    </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;">
            <b>项目编号：</b> SCP-XXX<br>
            <b>项目等级：</b> Keter
        </div>
        <p><b>描述：</b>六世恶言是一种异常的网络模因，常伪装成互动式网页游戏。</p>
        <p>收藏品1：[短信] 你好，我查到了这个域名的注册人...</p>
        <p>收藏品2：[短信] 网站被篡改过，我已经把消息群发了。</p>
        <p>收藏品3：[回复] <b>它是我藏在赛博刮刮乐内的，是被惩罚的人。</b></p>
    </div>
</div>

<!-- 3. JavaScript 逻辑部分 -->
<script>
(function() {
    // 只有当页面存在游戏容器时才运行
    var root = document.getElementById('scp-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 elTerminal = root.querySelector('#terminal-screen');
    var elMascotTicket = root.querySelector('#ticket-mascot');
    var elTicketId = root.querySelector('#ticket-id-display');
    var elFakeEntry = document.getElementById('fake-wiki-entry');

    // 剧情配置
    var cardsData = [
        { type: 'normal', mascot: '', broadcast: '扫描完成。\n结果：谢谢惠顾。\n并没有什么特别的。' },
        { type: 'normal', mascot: '(・ω・)', broadcast: '扫描完成。\n检测到异常字符。\n规则更新：右下角的生物似乎在观察你。' },
        { type: 'bonus', mascot: '(^▽^)', broadcast: '扫描完成。\n恭喜中奖！\n系统检测到连击，奖励2张彩票！' },
        { type: 'normal', mascot: 'o(*≧▽≦)ツ', broadcast: '扫描完成。\n结果：1 Data 2。\n它看起来很开心。' },
        { type: 'cheat', mascot: '( ･_･)', broadcast: '扫描完成。\n结果：中奖...？\n刚才数据似乎被修改了。' },
        { type: 'narrative_bubble', mascot: '', broadcast: '扫描完成。\n对象已消失。\n错误：无法解析部分单元格交互。', override: 'Data' },
        { type: 'glitch', mascot: '...', broadcast: 'ERR_#0x00\n数据损坏\n请勿$$%^&', override: '???' },
        { type: 'pain', mascot: '', broadcast: '声音检测：\n"别碰我！"\n"好痛！"', override: 'Pain' },
        { type: 'talk', mascot: '', broadcast: '接收到文本信息：\n"你是谁？"\n"为什么要这样做？"', override: 'Info' },
        { type: 'stop', mascot: '', broadcast: '警告：\n立即停止操作。\n立即停止操作。', override: '停下' },
        { type: 'final', mascot: 'ERROR', broadcast: '你知道的太多了。', override: '平安喜乐' }
    ];

    function log(text) {
        elTerminal.innerText += '\n\n' + text;
        elTerminal.scrollTop = elTerminal.scrollHeight;
    }

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

    function loadCard(index) {
        isScanned = false;
        revealedCount = 0;
        elBtn.innerText = "扫描结果";
        elBtn.className = "main-btn"; // reset class
        elBtn.disabled = false;
        elTicketId.innerText = (index + 1).toString().padStart(3, '0');
        elCount.innerText = remainingTickets;

        var data = cardsData[index];
        elGrid.innerHTML = '';
        elMascotTicket.innerText = data.mascot;
        
        // 样式重置
        elBtn.style.border = "none";
        elBtn.style.background = "#2196F3";

        // 卡片10: 红色边框警告
        if (data.type === 'stop') {
             elBtn.style.border = "3px solid red";
             elBtn.style.background = "#d32f2f";
        }

        for (var i = 0; i < 30; i++) {
            var cell = document.createElement('div');
            cell.className = 'grid-cell';
            
            var content = data.override ? data.override : generateRandomContent();
            
            // 卡片3的作弊
            if(index === 2 && i === 10) content = "大奖"; 
            if(index === 2 && i === 11) content = "大奖"; 
            
            // 卡片9 (index 8) 尝试交流
            if(index === 8) content = "你是谁";

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

            // 绑定点击（闭包处理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;

                    // 剧情触发
                    // 剧情6: 气泡说话
                    if(cIdx === 5) {
                        var msg = ["别点了", "我在看你", "停下"][Math.floor(Math.random()*3)];
                        log("Unknown: " + msg);
                        c.innerText = ""; 
                    }
                    // 剧情8: 喊疼
                    if(cIdx === 7) {
                        var snds = ["痛!", "别!", "啊!"];
                        c.innerText = snds[Math.floor(Math.random()*3)];
                        c.style.color = "red";
                    }
                    // 剧情5: 颜文字改字
                    if(cIdx === 4 && revealedCount === 15) {
                        elMascotTicket.innerText = '(;ﾟдﾟ)';
                        log("... (检测到数据篡改)");
                        // 找个没开的改成中奖
                         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;
            log('>>> 正在扫描...');
            
            setTimeout(function(){
                log(data.broadcast);
                
                // 剧情3: 加票
                if (data.type === 'bonus') {
                    remainingTickets += 2;
                    elCount.innerText = remainingTickets;
                }
                
                // 剧情10: 吐出黑卡
                if (data.type === 'stop') {
                    setTimeout(function(){
                        log("CRITICAL ERROR. EJECTING...");
                        elBtn.innerText = "取出未知票据";
                        elBtn.classList.add('next-mode');
                        elBtn.style.background = "#000";
                    }, 1000);
                    return;
                }

                // 剧情11: 结局
                if (data.type === 'final') {
                    triggerEnding();
                    return;
                }

                remainingTickets--;
                elCount.innerText = remainingTickets;

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

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

            }, 500);
        }
    });

    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><div style='font-size:16px; margin-top:20px;'>Redirecting...</div>";
            document.body.appendChild(crash);
            
            // 3秒后跳转到伪词条
            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>