查看“︁微件:GGLScratchGame”︁的源代码

<div class="ggl-root">

  <!-- 初始化遮罩 -->
  <div class="ggl-mask" id="ggl-mask">
    <button class="ggl-start-btn">来一张彩票…<br>…不，三张吧</button>
  </div>

  <!-- 顶部 -->
  <div class="ggl-top">
    <div class="ggl-rule">刮开奖券 · 在整张刮完后交由bot扫描<br>刮出数字即能获得对应额度的data<br>当“平”“安”“喜”“乐”四个字连城一条线时，可再获得一张刮刮卡<br>看不懂也没关系！bot会告诉你结果！</div>
    <div class="ggl-left">
      剩余彩票：<span id="ggl-left">—</span> 张　
      可提现 DATA：<span id="ggl-data">—</span>
    </div>
  </div>

  <!-- 洋红外框 -->
  <div class="ggl-frame">
    <div class="ggl-ticket">

      <img class="ggl-bg"
        src="https://wm.gaoice.run/images/b/b6/%E5%9B%BE%E7%89%871.png">

      <!-- 刮奖区 -->
      <div class="ggl-scratch-area">
        <div class="ggl-grid"></div>
      </div>

      <!-- 兑奖区透明按钮 -->
      <button class="ggl-redeem-hit" id="ggl-redeem-hit"></button>

      <!-- 吉祥物 & 气泡 -->
      <div class="ggl-mascot"></div>
      <div class="ggl-bubble"></div>

      <!-- 控制 -->
      <div class="ggl-controls">
        <button id="ggl-scan">扫描结果</button>
      </div>

    </div>
  </div>
</div>

<style>
.ggl-root{width:375px;margin:auto;font-family:sans-serif;position:relative}
.ggl-mask{position:absolute;inset:0;background:#000d;z-index:99;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-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{display:grid;width:100%;height:100%;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("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") 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%;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%}
#ggl-scan{opacity:.3}
#ggl-scan.active{opacity:1}

.ggl-redeem-hit{
  position:absolute;bottom:1%;left:2%;
  width:48%;height:10%;
  background:transparent;border:none;cursor:pointer
}
</style>

<script>
(function(){

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 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';

/* ===== 11 张剧情票 ===== */
const TICKETS = [
 {left:2,data:0,mascot:'',bubble:'你好。',rewards:{0:'畅',1:'舒',2:'遂',3:'顺',4:'达',5:'欢',6:'5',7:'欣',8:'怡',9:'和',10:'睦',11:'融',12:'洽',13:'美',14:'善',15:'吉',16:'昌',17:'20',18:'兴',19:'平',20:'安',21:'喜',22:'乐',23:'平',24:'安',25:'盛',26:'喜',27:'乐',28:'悦',29:'睦'}},
 {left:1,data:1,mascot:'(＾▽＾)ﾉ',bubble:'第一张，只中了 DATA。',rewards:{0:'畅',1:'舒',2:'遂',3:'顺',4:'达',5:'平',6:'安',7:'喜',8:'乐',9:'和',10:'睦',11:'安',12:'1',13:'美',14:'善',15:'吉',16:'昌',17:'喜',18:'盛',19:'兴',20:'欢',21:'平',22:'悦',23:'乐',24:'欣',25:'怡',26:'洽',27:'融',28:'欢',29:'怡'}},
 {left:2,data:2,mascot:'(ﾉ◕ヮ◕)ﾉ',bubble:'连着刮出了四个字！',rewards:{1:'1',2:'2',3:'3',4:'4',5:'5',6:'6',7:'7',8:'8',9:'9',10:'10',11:'11',12:'12',13:'13',14:'14',15:'15',16:'16',17:'17',18:'18',19:'19',20:'20',21:'21',22:'22',23:'23',24:'24',25:'25',26:'26',27:'27',28:'28',29:'29',30:'30'}},
 {left:2,data:4,mascot:'(＾▽＾)',bubble:'中了刮刮乐！DATA 2MB',rewards:{8:'DATA',14:'🎟'}},
 {left:2,data:5,mascot:'(・_・)',bubble:'什么都没有。',rewards:{22:'DATA'}},
 {left:1,data:5,mascot:'(；ﾟДﾟ)',bubble:'好像哪里不对。',rewards:{}},
 {left:0,data:5,mascot:'',bubble:'什么都没有。',rewards:{6:'🎟'}},
 {left:0,data:7,mascot:'...',bubble:'▒▓░▒▓▒▓',rewards:{3:'DATA',18:'DATA'}},
 {left:1,data:'—',mascot:'',bubble:'哦 嗯 嘿 哈',rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA']))},
 {left:0,data:'—',mascot:'',bubble:'你是谁？',lock:true,rewards:{}},
 {left:'▒▓░▒▓▒▓',data:'▒▓░▒▓▒▓',mascot:'平安喜乐',bubble:'你知道的太多了。',final:true,rewards:{}}
];

let idx = 0;
let revealed = 0;

function build(){
  const t = TICKETS[idx];
  grid.innerHTML='';
  revealed=0;

  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 c=document.createElement('div');
    c.className='ggl-cell';
    c.innerHTML=`
      <img src="${OPEN}">
      <div class="ggl-reward">${t.rewards?.[i]||''}</div>
      <div class="ggl-cover"></div>
    `;
    const cover=c.querySelector('.ggl-cover');
    if(!t.lock){
      cover.onclick=()=>{
        if(c.dataset.done)return;
        c.dataset.done=1;
        cover.style.display='none';
        if(++revealed===30)scan.classList.add('active');
      };
    }
    grid.appendChild(c);
  }

  if(t.lock) scan.classList.add('active');
}

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

redeem.onclick=()=>{
  bubble.textContent='(；ﾟДﾟ)提示：兑奖区刮开后将视为无效哦。';
};

mask.onclick=()=>{
  mask.remove();
  build();
};

/* 测试：Shift + D */
document.addEventListener('keydown',e=>{
  if(e.shiftKey&&e.key.toLowerCase()==='d'){
    grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
    revealed=30;
    scan.classList.add('active');
  }
});

})();
</script>