微件:GGLScratchGame

   <button class="ggl-start-btn">点击开始</button>

     刮开奖券 · 每张需点完 30 格才能扫描

     剩余彩票：11 张

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

(＾▽＾)

准备开始。

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

<style> /* ===== 根容器 ===== */ .ggl-root {

 width: 375px;
 margin: 0 auto;
 font-family: sans-serif;
 position: relative;

}

/* ===== 初始化遮罩 ===== */ .ggl-mask {

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

} .ggl-start-btn {

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

}

/* ===== 顶部 ===== */ .ggl-top {

 text-align: center;
 font-size: 14px;
 margin-bottom: 6px;

} .ggl-rule {

 margin-bottom: 4px;

}

/* ===== 彩票 ===== */ .ggl-ticket {

 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 {

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

}

/* ===== 单格 ===== */ .ggl-cell {

 position: relative;
 overflow: hidden;

} .ggl-cell img {

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

} .ggl-reward {

 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: bold;
 pointer-events: none;

} .ggl-cover {

 position: absolute;
 inset: 0;
 background: url("") center/cover;
 cursor: pointer;

}

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

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

} .ggl-bubble {

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

}

/* ===== 控制 ===== */ .ggl-controls {

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

}

1. ggl-scan {

 opacity: .3;
 top: 105%

}

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 ticketLeft = document.getElementById('ggl-ticket-left');
 const mask = document.getElementById('ggl-start-mask');

 const TICKETS = [
   { mascot:'(＾▽＾)', text:'欢迎，开始吧。', rewards:['DATA'] },
   { mascot:'(ﾉ◕ヮ◕)ﾉ', text:'可以连字哦。', rewards:['DATA','DATA','DATA','DATA'] },
   { mascot:'(・∀・)', text:'中了刮刮乐！', rewards:['DATA'] },
   { mascot:'(・_・)', text:'什么都没有。', rewards:[] },
   { mascot:'(；ﾟДﾟ)', text:'不太对劲。', rewards:['DATA'] },
   { mascot:, text:'……', rewards:[] },
   { mascot:'...', text:'▒▓░▒▓', rewards:['DATA'] },
   { mascot:, text:'哦 嗯 嘿 哈', rewards:['DATA','DATA'] },
   { mascot:, text:'你是谁？', rewards:Array(30).fill('DATA') },
   { mascot:, text:'停下来。', rewards:[], lock:true },
   { mascot:'平安喜乐', text:'你知道的太多了。', end:true }
 ];

 let ticketIndex = 0;
 let revealed = 0;

 function updateTop() {
   ticketLeft.textContent = TICKETS.length - ticketIndex;
 }

 function buildTicket() {
   grid.innerHTML = ;
   revealed = 0;
   scanBtn.classList.remove('active');

   const t = TICKETS[ticketIndex];
   mascot.textContent = t.mascot || ;
   bubble.textContent = t.text || ;

   const rewardMap = Array(30).fill();
   (t.rewards||[]).forEach((r,i)=>rewardMap[i]=r);

   for (let i=0;i<30;i++) {
     const cell = document.createElement('div');
     cell.className = 'ggl-cell';
     cell.innerHTML = `
       <img src="">

${rewardMap[i]}

     `;
     const cover = cell.querySelector('.ggl-cover');
     if (!t.lock) {
       cover.onclick = () => {
         if (cell.dataset.done) return;
         cell.dataset.done = 1;
         cover.style.display = 'none';
         revealed++;
         if (revealed === 30) scanBtn.classList.add('active');
       };
     }
     grid.appendChild(cell);
   }
 }

 scanBtn.onclick = () => {
   if (!scanBtn.classList.contains('active')) return;
   ticketIndex++;
   updateTop();
   if (TICKETS[ticketIndex]?.end) {
     document.body.style.filter='invert(1)';
     setTimeout(()=>location.href='/index.php?title=六世恶言之一',1200);
   } else {
     buildTicket();
   }
 };

 mask.onclick = () => {
   mask.remove();
   updateTop();
   buildTicket();
 };

})(); </script>