微件:GGLScratchGame

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

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

     剩余彩票：— 张　
     DATA：—

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

     <button class="ggl-redeem-hit" id="ggl-redeem-hit"></button>

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

<style> /* ===== 基础 ===== */ .ggl-root{width:375px;margin:auto;font-family:sans-serif;position:relative} .ggl-top{text-align:center;font-size:14px;margin-bottom:6px}

.ggl-mask{

 position:absolute;inset:0;z-index:50;
 background:#000d;display:flex;
 align-items:center;justify-content:center

} .ggl-start-btn{padding:12px 20px;font-size:16px}

/* ===== 外框 ===== */ .ggl-frame{

 padding:10px;
 border:3px solid #ff00aa;
 box-shadow:0 0 12px #ff00aa88;

}

/* ===== 彩票 ===== */ .ggl-ticket{position:relative;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,.ggl-cover{

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

} .ggl-cover{

 background:center/cover no-repeat;
 cursor:pointer

} .ggl-reward{

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

}

/* ===== 吉祥物 ===== */ .ggl-mascot{

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

} .ggl-bubble{

 position:absolute;
 left:6%;top:103%;
 width:60%;
 background:#fff;
 padding:6px;
 font-size:13px

}

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

 position:absolute;
 right:6%;top:103%

}

1. ggl-scan{opacity:.3}
2. ggl-scan.active{opacity:1}

/* ===== 兑奖区 ===== */ .ggl-redeem-hit{

 position:absolute;
 bottom:1%;
 width:48%;
 height:10%;
 background:transparent;
 border:none;
 cursor:pointer;

}

/* ===== 反色剧情 ===== */ .ggl-invert{

 filter:invert(1) hue-rotate(180deg);

} </style>

<script> (function(){

/* DOM */ const root = document.getElementById('ggl-root'); const grid = document.querySelector('.ggl-grid'); const bubble = document.querySelector('.ggl-bubble'); const mascot = document.querySelector('.ggl-mascot'); const scan = document.getElementById('ggl-scan'); const leftEl = document.getElementById('ggl-left'); const dataEl = document.getElementById('ggl-data'); const mask = document.getElementById('ggl-mask'); const redeem = document.getElementById('ggl-redeem-hit');

/* 图片 */ const COVER = 'https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png'; const OPEN = 'https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg';

/* 剧情票 */ const TICKETS = [

 {left:3,data:0,bubble:'你好。',rewards:{12:'DATA'}},
 {left:2,data:1,bubble:'第一张。',rewards:{1:'连',3:'着',16:'四',19:'个'}},
 {left:1,data:2,bubble:'你是谁？',rewards:{}},
 {left:0,data:'—',bubble:'你知道的太多了。',lock:true,invert:true}

];

let index=0, revealed=0, canScan=false;

/* 构建 */ function build(){

 const t=TICKETS[index];
 grid.innerHTML=;
 revealed=0;canScan=false;
 root.classList.toggle('ggl-invert',!!t.invert);

 leftEl.textContent=t.left;
 dataEl.textContent=t.data;
 mascot.textContent=t.mascot||;
 bubble.textContent=t.bubble||;
 scan.classList.remove('active');

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

${t.rewards?.[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) enableScan();
     };
   }else{
     cover.style.display='none';
   }

   grid.appendChild(cell);
 }
 if(t.lock) enableScan();

}

/* 扫描 */ function enableScan(){

 canScan=true;
 scan.classList.add('active');

} scan.onclick=()=>{

 if(!canScan)return;
 index++;
 if(index<TICKETS.length) build();

};

/* 兑奖区 */ redeem.onclick=()=>{

 bubble.textContent='提示：兑奖区刮开后将视为无效哦。';

};

/* 初始化 */ mask.onclick=()=>{

 mask.remove();
 build();

};

/* 测试 */ document.addEventListener('keydown',e=>{

 if(e.shiftKey&&e.key==='D'){
   document.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
   revealed=30;
   enableScan();
 }

});

})(); </script>