微件:GGLScratchGame

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

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

剩余彩票：— 张

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

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

<style> .ggl-root { width:375px;margin:auto;font-family:sans-serif;position:relative } .ggl-mask{position:absolute;inset:0;background:#000d;z-index:20;display:flex;align-items:center;justify-content:center} .ggl-start-btn{padding:12px 20px;font-size:16px}

.ggl-top{text-align:center;font-size:14px;margin-bottom:6px} .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:url("") center/cover;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%;bottom:14%;font-size:20px;color:#000} .ggl-bubble{position:absolute;left:6%;bottom:20%;width:60%;background:#fff;padding:6px;font-size:13px}

.ggl-controls{position:absolute;right:6%;bottom:10%}

1. ggl-scan{opacity:.3}
2. 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 leftEl = document.getElementById('ggl-left'); const mask = document.getElementById('ggl-mask');

/* ====== 剧情彩票定义 ====== */ /*

index: 第几张（0开始）
left: 你希望显示的剩余张数
rewards: { 格子索引: 内容 }

• /

const TICKETS = [

 {
   left: 3,
   mascot: ,
   bubble: '第一张，只中了 DATA。',
   rewards: { 12:'DATA' }
 },
 {
   left: 2,
   mascot: '(ﾉ◕ヮ◕)ﾉ',
   bubble: '连着刮出了四个字！',
   rewards: { 1:'连',2:'着',3:'四',4:'个' }
 },
 {
   left: 3,
   mascot: '(＾▽＾)',
   bubble: '中了刮刮乐！DATA 2MB',
   rewards: { 8:'DATA',14:'🎟' }
 },
 {
   left: 3,
   mascot: '(・_・)',
   bubble: '什么都没有。',
   rewards: {}
 },
 {
   left: 2,
   mascot: '(；ﾟДﾟ)',
   bubble: '好像哪里不对。',
   rewards: { 22:'DATA' }
 },
 {
   left: 1,
   mascot: ,
   bubble: '什么都没有。',
   rewards: {}
 },
 {
   left: 1,
   mascot: '...',
   bubble: '▒▓░▒▓▒▓',
   rewards: { 6:'🎟' }
 },
 {
   left: 2,
   mascot: ,
   bubble: '哦 嗯 嘿 哈',
   rewards: { 3:'DATA',18:'DATA' }
 },
 {
   left: 1,
   mascot: ,
   bubble: '你是谁？',
   rewards: Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA']))
 },
 {
   left: 1,
   mascot: ,
   bubble: '停下来。',
   lock:true,
   rewards: {}
 },
 {
   left: 0,
   mascot: '平安喜乐',
   bubble: '你知道的太多了。',
   rewards: {}
 }

];

let index = 0; let revealed = 0;

function build(){

 const t = TICKETS[index];
 grid.innerHTML=;
 revealed=0;
 scanBtn.classList.remove('active');

 leftEl.textContent = t.left;
 mascot.textContent = t.mascot||;
 bubble.textContent = t.bubble||;

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

${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)scanBtn.classList.add('active');
     };
   }
   grid.appendChild(cell);
 }

}

scanBtn.onclick=()=>{

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

};

mask.onclick=()=>{

 mask.remove();
 build();

};

})(); </script>