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

<div class="ggl-root">

  <!-- 初始化遮罩 -->
  <div class="ggl-mask" id="ggl-mask">
    <button class="ggl-start-btn">开始抽奖</button>
  </div>

  <!-- 顶部 -->
  <div class="ggl-top">
    <div class="ggl-rule">刮开奖券 · 每张需点完 30 格才能扫描</div>
    <div class="ggl-left">剩余彩票：<span id="ggl-left">—</span> 张</div>
  </div>

  <!-- 彩票 -->
  <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>

    <div class="ggl-mascot"></div>
    <div class="ggl-bubble"></div>

    <div class="ggl-controls">
      <button id="ggl-scan">扫描结果</button>
    </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: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("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%;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%}
#ggl-scan{opacity:.3}
#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="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">
      <div class="ggl-reward">${t.rewards?.[i]||''}</div>
      <div class="ggl-cover"></div>
    `;
    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>