微件:GGLScratchGame

   <button class="ggl-start-btn">开始抽奖</button>

     点击灰色区域揭示内容，全部揭示后才能扫描。

     剩余彩票：3

   <img class="ggl-bg"
        src="">

     <button id="ggl-scan">扫描结果</button>

<style> .ggl-frame {

 max-width: 420px;
 margin: 20px auto;
 padding: 10px;
 border: 2px solid #333;
 background: #111;
 color: #eee;
 font-family: sans-serif;

}

/* 顶部 */ .ggl-top {

 margin-bottom: 8px;

} .ggl-rules {

 font-size: 12px;
 opacity: .8;

} .ggl-tickets-left {

 font-size: 14px;
 margin-top: 4px;

}

/* 彩票 */ .ggl-root {

 position: relative;
 width: 100%;
 aspect-ratio: 1075 / 1911;

}

.ggl-bg {

 width: 100%;
 display: block;

}

/* 刮奖区 */ .ggl-scratch-area {

 position: absolute;
 left: 10%;
 top: 35%;
 width: 80%;
 height: 53%;

}

.ggl-grid {

 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: repeat(6, 1fr);
 gap: 4px;
 width: 100%;
 height: 100%;

}

/* 单格 */ .ggl-cell {

 position: relative;
 cursor: pointer;

}

.ggl-cover, .ggl-reveal {

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;

}

.ggl-cover {

 z-index: 3;

} .ggl-reveal {

 z-index: 1;

}

/* 奖项层 */ .ggl-prize {

 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 color: #000;
 text-align: center;
 pointer-events: none;

}

/* 吉祥物 & 气泡 */ .ggl-mascot {

 position: absolute;
 left: 6%;
 top: 105%;
 bottom: 8%;
 font-size: 20px;
 color: #000;

}

.ggl-bubble {

 position: absolute;
 left: 6%;
 bottom: 14%;
 top: 100%;
 width: 60%;
 background: rgba(255,255,255,.9);
 color: #000;
 padding: 6px;
 font-size: 13px;

}

/* 扫描 */ .ggl-controls {

 position: absolute;
 right: 6%;
 bottom: 8%;

}

1. ggl-scan {

 opacity: .3;

}

1. ggl-scan.active {

 opacity: 1;

}

/* 遮罩 */ .ggl-overlay {

 position: absolute;
 inset: 0;
 background: rgba(0,0,0,.9);
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: center;

}

.ggl-start-btn {

 padding: 12px 24px;
 font-size: 16px;

} </style> <script> (function () {

 const grid = document.querySelector('.ggl-grid');
 const bubble = document.querySelector('.ggl-bubble');
 const mascot = document.querySelector('.ggl-mascot');
 const scanBtn = document.getElementById('ggl-scan');
 const overlay = document.querySelector('.ggl-overlay');
 const ticketCountEl = document.getElementById('ggl-ticket-count');

 let currentTicket = 0;
 let revealed = 0;
 let ticketsLeft = 3;

 /* 11 张彩票的数据（示例，可继续细填） */
 const TICKETS = [
   {
     mascot: "",
     bubble: "第一次通常会中点 Data。",
     prizes: { 12: "Data" }
   },
   {
     mascot: "(＾▽＾)",
     bubble: "连着点四个字会有奖励。",
     prizes: { 3: "Data", 4: "Data", 5: "Data", 6: "Data" }
   },
   {
     mascot: "(ﾉ◕ヮ◕)ﾉ",
     bubble: "中奖了！Data 2MB。",
     prizes: { 10: "刮刮乐 +1", 15: "Data 2MB" }
   },
   {
     mascot: "(・_・)",
     bubble: "……刚才那样不太对。",
     prizes: {}
   },
   {
     mascot: "(；ﾟДﾟ)",
     bubble: "好像哪里不对。",
     prizes: { 8: "Data" }
   },
   {
     mascot: "",
     bubble: "什么都没有。",
     prizes: {}
   },
   {
     mascot: "...",
     bubble: "▒▒▒▒▒▒▒",
     prizes: { 20: "刮刮乐 +1" }
   },
   {
     mascot: "",
     bubble: "哦嗯嘿哈……别挠我痒痒",
     prizes: { 1: "Data", 2: "刮刮乐 +2" }
   },
   {
     mascot: "",
     bubble: "你是谁？",
     prizes: "ALL_DATA"
   },
   {
     mascot: "",
     bubble: "停下来。",
     lock: true
   },
   {
     mascot: "平安喜乐",
     bubble: "你知道的太多了。",
     end: true
   }
 ];

 function renderTicket() {
   grid.innerHTML = "";
   revealed = 0;
   scanBtn.classList.remove("active");

   const t = TICKETS[currentTicket];
   mascot.textContent = t.mascot || "";
   bubble.textContent = t.bubble || "";
   ticketCountEl.textContent = ticketsLeft;

   for (let i = 0; i < 30; i++) {
     const cell = document.createElement('div');
     cell.className = "ggl-cell";
     cell.dataset.revealed = "0";

     const prizeText =
       t.prizes === "ALL_DATA" ? "Data" :
       t.prizes[i] || "";

     cell.innerHTML = `
       <img class="ggl-reveal"
            src="">

${prizeText}

       <img class="ggl-cover"
            src="">
     `;

     cell.addEventListener('click', () => {
       if (cell.dataset.revealed === "1") return;
       if (t.lock) return;

       cell.dataset.revealed = "1";
       cell.querySelector('.ggl-cover').style.display = "none";
       revealed++;

       if (revealed === 30) {
         scanBtn.classList.add("active");
         bubble.textContent = "已全部揭示，可以扫描。";
       }
     });

     grid.appendChild(cell);
   }
 }

 scanBtn.addEventListener('click', () => {
   if (!scanBtn.classList.contains("active")) return;

   if (TICKETS[currentTicket].end) {
     document.body.style.filter = "invert(1)";
     bubble.style.background = "#000";
     bubble.style.color = "red";
     setTimeout(() => {
       location.href = "/index.php?title=六世恶言之一";
     }, 1500);
     return;
   }

   currentTicket++;
   if (currentTicket < TICKETS.length) {
     renderTicket();
   }
 });

 document.querySelector('.ggl-start-btn').addEventListener('click', () => {
   overlay.style.display = "none";
   renderTicket();
 });

})(); </script>