微件:GGLScratchGame

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

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

(＾▽＾)

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

<style> .ggl-root {

 position: relative;
 width: 375px;
 margin: auto;
 aspect-ratio: 1075 / 1911;
 font-family: sans-serif;

}

.ggl-overlay {

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

}

.ggl-start-btn {

 font-size: 18px;
 padding: 12px 24px;
 cursor: pointer;

}

.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: 6px;
 width: 100%;
 height: 100%;

}

.ggl-cell {

 position: relative;
 overflow: hidden;

}

.ggl-cell img, .ggl-cell canvas {

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;

}

.ggl-mascot {

 position: absolute;
 left: 6%;
 top: 110%;
 bottom: 8%;
 font-size: 22px;

}

.ggl-bubble {

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

}

.ggl-controls {

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

}

1. ggl-scan {

 opacity: .3;
 top: 110%;

}

1. ggl-scan.active {

 opacity: 1;

} </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 startBtn = document.querySelector('.ggl-start-btn');

 let currentTicket = 0;
 let revealedCount = 0;
 let ticketsLeft = 3;
 let dataCount = 0;
 let started = false;

 const TICKETS = [
   { mascot:"", text:"点击开始，抽一张彩票。" },
   { mascot:"(＾▽＾)", text:"第一次总会中点 Data。" },
   { mascot:"(・∀・)", text:"连着点，会触发规则哦。" },
   { mascot:"(ﾉ◕ヮ◕)ﾉ", text:"中奖了！Data 2MB！" },
   { mascot:"(・_・)", text:"……刚才那样不太对。" },
   { mascot:"(；ﾟДﾟ)", text:"好像哪里不对劲。" },
   { mascot:"", text:"什么都没有。" },
   { mascot:"...", text:"���▒▒▒▒▒▒" },
   { mascot:"", text:"你是谁？" },
   { mascot:"", text:"停下来。" },
   { mascot:"平安喜乐", text:"你知道的太多了。" }
 ];

 function initTicket() {
   grid.innerHTML = "";
   revealedCount = 0;
   scanBtn.classList.remove("active");

   const ticket = TICKETS[currentTicket];
   mascot.textContent = ticket.mascot || "";
   bubble.textContent = ticket.text || "";

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

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

       revealedCount++;

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

     grid.appendChild(cell);
   }
 }

 scanBtn.addEventListener('click', () => {
   if (!scanBtn.classList.contains('active')) {
     bubble.textContent = "请先完成当前彩票。";
     return;
   }

   if (currentTicket === 9) {
     bubble.textContent = "停下来。";
     currentTicket++;
     initTicket();
     return;
   }

   if (currentTicket === 10) {
     document.body.style.filter = "invert(1)";
     bubble.style.background = "#000";
     bubble.style.color = "red";
     mascot.textContent = "平安喜乐";
     bubble.textContent = "你知道的太多了。";

     setTimeout(() => {
       location.href = "/index.php?title=六世恶言之一";
     }, 1500);
     return;
   }

   currentTicket++;
   initTicket();
 });

 startBtn.addEventListener('click', () => {
   overlay.style.display = "none";
   started = true;
   initTicket();
 });

})(); </script>