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

<div class="ggl-root">

  <!-- 初始化遮罩 -->
  <div class="ggl-mask" id="ggl-start-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-ticket-left">11</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"
      alt="lottery">

    <!-- 刮奖区域 -->
    <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: 0 auto;
  font-family: sans-serif;
  position: relative;
}

/* ===== 初始化遮罩 ===== */
.ggl-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ggl-start-btn {
  font-size: 16px;
  padding: 12px 20px;
}

/* ===== 顶部 ===== */
.ggl-top {
  text-align: center;
  font-size: 14px;
  margin-bottom: 6px;
}
.ggl-rule {
  margin-bottom: 4px;
}

/* ===== 彩票 ===== */
.ggl-ticket {
  position: relative;
  width: 100%;
  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 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ggl-reward {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
}
.ggl-cover {
  position: absolute;
  inset: 0;
  background: url("https://wm.gaoice.run/images/%E5%88%AE%E5%BC%80%E5%89%8D.png") center/cover;
  cursor: pointer;
}

/* ===== 吉祥物 & 气泡 ===== */
.ggl-mascot {
  position: absolute;
  left: 6%;
  top: 105%
  bottom: 14%;
  font-size: 20px;
  color: #000;
}
.ggl-bubble {
  position: absolute;
  left: 6%;
  bottom: 20%;
  top: 100%
  width: 60%;
  background: rgba(255,255,255,.9);
  padding: 6px;
  font-size: 13px;
}

/* ===== 控制 ===== */
.ggl-controls {
  position: absolute;
  right: 6%;
  bottom: 10%;
}
#ggl-scan {
  opacity: .3;
  top: 105%
}
#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 ticketLeft = document.getElementById('ggl-ticket-left');
  const mask = document.getElementById('ggl-start-mask');

  const TICKETS = [
    { mascot:'(＾▽＾)', text:'欢迎，开始吧。', rewards:['DATA'] },
    { mascot:'(ﾉ◕ヮ◕)ﾉ', text:'可以连字哦。', rewards:['DATA','DATA','DATA','DATA'] },
    { mascot:'(・∀・)', text:'中了刮刮乐！', rewards:['DATA'] },
    { mascot:'(・_・)', text:'什么都没有。', rewards:[] },
    { mascot:'(；ﾟДﾟ)', text:'不太对劲。', rewards:['DATA'] },
    { mascot:'', text:'……', rewards:[] },
    { mascot:'...', text:'▒▓░▒▓', rewards:['DATA'] },
    { mascot:'', text:'哦 嗯 嘿 哈', rewards:['DATA','DATA'] },
    { mascot:'', text:'你是谁？', rewards:Array(30).fill('DATA') },
    { mascot:'', text:'停下来。', rewards:[], lock:true },
    { mascot:'平安喜乐', text:'你知道的太多了。', end:true }
  ];

  let ticketIndex = 0;
  let revealed = 0;

  function updateTop() {
    ticketLeft.textContent = TICKETS.length - ticketIndex;
  }

  function buildTicket() {
    grid.innerHTML = '';
    revealed = 0;
    scanBtn.classList.remove('active');

    const t = TICKETS[ticketIndex];
    mascot.textContent = t.mascot || '';
    bubble.textContent = t.text || '';

    const rewardMap = Array(30).fill('');
    (t.rewards||[]).forEach((r,i)=>rewardMap[i]=r);

    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/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png">
        <div class="ggl-reward">${rewardMap[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;
    ticketIndex++;
    updateTop();
    if (TICKETS[ticketIndex]?.end) {
      document.body.style.filter='invert(1)';
      setTimeout(()=>location.href='/index.php?title=六世恶言之一',1200);
    } else {
      buildTicket();
    }
  };

  mask.onclick = () => {
    mask.remove();
    updateTop();
    buildTicket();
  };

})();
</script>