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

<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>
<script>
(function(){

/* ===== DOM ===== */
const root   = document.querySelector('.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 ending = document.getElementById('ggl-ending');

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:'你好。',onScan:'扫描完成：未检测到异常。',onRedeem:'点击兑奖区将作废本票。',rewards:{12:'DATA'}},
 {left:1,data:1,mascot:'(＾▽＾)ﾉ',bubble:'第一张，只中了 DATA。',onScan:'扫描结果：DATA ×1',onRedeem:'兑奖操作不可逆。',rewards:{1:'连',3:'着',16:'四',19:'个'}},
 {left:2,data:2,mascot:'(ﾉ◕ヮ◕)ﾉ',bubble:'连成了一条线。',onScan:'检测到异常排列，追加机会。',onRedeem:'系统记录兑奖请求。',rewards:{1:'平',2:'安',3:'喜',4:'乐'}},
 {left:2,data:4,mascot:'(＾▽＾)',bubble:'中奖了。',onScan:'扫描完成：DATA 2MB',onRedeem:'兑奖成功。',rewards:{8:'DATA'}},
 {left:2,data:5,mascot:'(・_・)',bubble:'什么都没有。',onScan:'扫描完成：空。',onRedeem:'无可兑奖内容。',rewards:{}},
 {left:1,data:5,mascot:'(；ﾟДﾟ)',bubble:'好像哪里不对。',onScan:'扫描警告：结构异常。',onRedeem:'请求被拒绝。',rewards:{}},
 {left:0,data:5,mascot:'',bubble:'什么都没有。',onScan:'扫描完成：无数据。',onRedeem:'兑奖无效。',rewards:{}},
 {left:0,data:7,mascot:'...',bubble:'▒▓░▒▓▒▓',onScan:'▒▓░▒▓▒▓▒▓',onRedeem:'▒▓░▒▓▒▓',rewards:{3:'DATA',18:'DATA'}},
 {left:1,data:'—',mascot:'',bubble:'哦 嗯 嘿 哈',onScan:'扫描结果：DATA 溢出。',onRedeem:'兑奖接口未响应。',rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA']))},

 /* 第十张 */
 {left:0,data:'—',mascot:'',bubble:'你是谁？',onScan:'扫描中……',rewards:{}},

 /* 第十一张 */
 {left:'▒▓░▒▓▒▓',data:'▒▓░▒▓▒▓',mascot:'平安喜乐',bubble:'你知道的太多了。',final:true,rewards:{}}
];

let idx = 0;
let revealed = 0;
let scanned = false;

/* ===== 渐隐动画（左下 → 右上） ===== */
function fadeOutCover(cover, done){
  const start = performance.now();
  const duration = 450;

  cover.style.pointerEvents = 'none';
  cover.style.willChange = 'clip-path,opacity';

  function frame(now){
    const p = Math.min((now - start) / duration, 1) * 100;

    cover.style.clipPath = `
      polygon(
        0% ${100 - p}%,
        ${p}% 100%,
        100% 100%,
        100% 0%,
        0% 0%
      )
    `;
    cover.style.opacity = 1 - p / 100;

    if(p < 100){
      requestAnimationFrame(frame);
    }else{
      cover.style.display = 'none';
      cover.style.clipPath = '';
      cover.style.opacity = '';
      cover.style.pointerEvents = '';
      cover.style.willChange = '';
      done && done();
    }
  }
  requestAnimationFrame(frame);
}

/* ===== 构建票 ===== */
function build(){
  const t = TICKETS[idx];
  grid.innerHTML = '';
  revealed = 0;
  scanned = false;

  leftEl.textContent = t.left;
  dataEl.textContent = t.data;
  mascot.textContent = t.mascot || '';
  bubble.textContent = t.bubble || '';

  scan.textContent = '扫描结果';
  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');

    cover.onclick = ()=>{
      if(c.dataset.done) return;
      c.dataset.done = 1;

      fadeOutCover(cover, ()=>{
        if(++revealed === 30){
          scan.classList.add('active');
        }
      });
    };

    grid.appendChild(c);
  }
}

/* ===== 第十张中央弹窗 ===== */
function showCenterModal(){
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position:fixed;inset:0;
    background:rgba(0,0,0,.65);
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
  `;

  const box = document.createElement('div');
  box.style.cssText = `
    background:#fff;
    padding:20px;
    width:70%;
    text-align:center;
    font-size:14px;
  `;
  box.innerHTML = `<div id="modal-text">无法兑奖。</div>`;

  overlay.appendChild(box);
  document.body.appendChild(overlay);

  setTimeout(()=>{
    document.getElementById('modal-text').textContent = '系统已记录。';
    const btn = document.createElement('button');
    btn.textContent = '确定';
    btn.style.marginTop = '12px';
    btn.onclick = ()=>{
      overlay.remove();
      idx++;
      build();
    };
    box.appendChild(btn);
  },2000);
}

/* ===== 软无限 alert（第十张扫描） ===== */
function softInfiniteAlert(){
  alert('冲刺！冲刺！');
  setTimeout(softInfiniteAlert, 120);
}

/* ===== 扫描按钮 ===== */
scan.onclick = ()=>{
  if(!scan.classList.contains('active')) return;

  if(idx === 9 && revealed === 30){
    softInfiniteAlert();
    return;
  }

  if(!scanned){
    scanned = true;
    bubble.textContent = TICKETS[idx].onScan || '';
    scan.textContent = '再来一张';

    if(TICKETS[idx].final){
      root.style.display = 'none';
      ending.style.display = 'block';
      document.body.style.filter = 'invert(1)';
    }
    return;
  }

  idx++;
  if(idx < TICKETS.length) build();
};

/* ===== 兑奖区 ===== */
redeem.onclick = ()=>{
  if(idx === 9 && revealed === 30){
    showCenterModal();
    return;
  }
  const t = TICKETS[idx];
  if(t.onRedeem) bubble.textContent = t.onRedeem;
};

/* ===== 初始遮罩 ===== */
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>