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

<div class="ggl-frame">

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

  <!-- 顶部信息 -->
  <div class="ggl-top">
    <div class="ggl-rules">
      点击灰色区域揭示内容，全部揭示后才能扫描。
    </div>
    <div class="ggl-tickets-left">
      剩余彩票：<span id="ggl-ticket-count">3</span>
    </div>
  </div>

  <!-- 彩票主体 -->
  <div class="ggl-root">

    <img class="ggl-bg"
         src="https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%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-frame {
  max-width: 420px;
  margin: 20px auto;
  padding: 10px;
  border: 2px solid #333;
  background: #111;
  color: #eee;
  font-family: sans-serif;
}

/* 顶部 */
.ggl-top {
  margin-bottom: 8px;
}
.ggl-rules {
  font-size: 12px;
  opacity: .8;
}
.ggl-tickets-left {
  font-size: 14px;
  margin-top: 4px;
}

/* 彩票 */
.ggl-root {
  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 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
}

/* 单格 */
.ggl-cell {
  position: relative;
  cursor: pointer;
}

.ggl-cover,
.ggl-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ggl-cover {
  z-index: 3;
}
.ggl-reveal {
  z-index: 1;
}

/* 奖项层 */
.ggl-prize {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #000;
  text-align: center;
  pointer-events: none;
}

/* 吉祥物 & 气泡 */
.ggl-mascot {
  position: absolute;
  left: 6%;
  top: 105%;
  bottom: 8%;
  font-size: 20px;
  color: #000;
}

.ggl-bubble {
  position: absolute;
  left: 6%;
  bottom: 14%;
  top: 100%;
  width: 60%;
  background: rgba(255,255,255,.9);
  color: #000;
  padding: 6px;
  font-size: 13px;
}

/* 扫描 */
.ggl-controls {
  position: absolute;
  right: 6%;
  bottom: 8%;
}

#ggl-scan {
  opacity: .3;
}
#ggl-scan.active {
  opacity: 1;
}

/* 遮罩 */
.ggl-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ggl-start-btn {
  padding: 12px 24px;
  font-size: 16px;
}
</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 overlay = document.querySelector('.ggl-overlay');
  const ticketCountEl = document.getElementById('ggl-ticket-count');

  let currentTicket = 0;
  let revealed = 0;
  let ticketsLeft = 3;

  /* 11 张彩票的数据（示例，可继续细填） */
  const TICKETS = [
    {
      mascot: "",
      bubble: "第一次通常会中点 Data。",
      prizes: { 12: "Data" }
    },
    {
      mascot: "(＾▽＾)",
      bubble: "连着点四个字会有奖励。",
      prizes: { 3: "Data", 4: "Data", 5: "Data", 6: "Data" }
    },
    {
      mascot: "(ﾉ◕ヮ◕)ﾉ",
      bubble: "中奖了！Data 2MB。",
      prizes: { 10: "刮刮乐 +1", 15: "Data 2MB" }
    },
    {
      mascot: "(・_・)",
      bubble: "……刚才那样不太对。",
      prizes: {}
    },
    {
      mascot: "(；ﾟДﾟ)",
      bubble: "好像哪里不对。",
      prizes: { 8: "Data" }
    },
    {
      mascot: "",
      bubble: "什么都没有。",
      prizes: {}
    },
    {
      mascot: "...",
      bubble: "▒▒▒▒▒▒▒",
      prizes: { 20: "刮刮乐 +1" }
    },
    {
      mascot: "",
      bubble: "哦嗯嘿哈……别挠我痒痒",
      prizes: { 1: "Data", 2: "刮刮乐 +2" }
    },
    {
      mascot: "",
      bubble: "你是谁？",
      prizes: "ALL_DATA"
    },
    {
      mascot: "",
      bubble: "停下来。",
      lock: true
    },
    {
      mascot: "平安喜乐",
      bubble: "你知道的太多了。",
      end: true
    }
  ];

  function renderTicket() {
    grid.innerHTML = "";
    revealed = 0;
    scanBtn.classList.remove("active");

    const t = TICKETS[currentTicket];
    mascot.textContent = t.mascot || "";
    bubble.textContent = t.bubble || "";
    ticketCountEl.textContent = ticketsLeft;

    for (let i = 0; i < 30; i++) {
      const cell = document.createElement('div');
      cell.className = "ggl-cell";
      cell.dataset.revealed = "0";

      const prizeText =
        t.prizes === "ALL_DATA" ? "Data" :
        t.prizes[i] || "";

      cell.innerHTML = `
        <img class="ggl-reveal"
             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-prize">${prizeText}</div>
        <img class="ggl-cover"
             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">
      `;

      cell.addEventListener('click', () => {
        if (cell.dataset.revealed === "1") return;
        if (t.lock) return;

        cell.dataset.revealed = "1";
        cell.querySelector('.ggl-cover').style.display = "none";
        revealed++;

        if (revealed === 30) {
          scanBtn.classList.add("active");
          bubble.textContent = "已全部揭示，可以扫描。";
        }
      });

      grid.appendChild(cell);
    }
  }

  scanBtn.addEventListener('click', () => {
    if (!scanBtn.classList.contains("active")) return;

    if (TICKETS[currentTicket].end) {
      document.body.style.filter = "invert(1)";
      bubble.style.background = "#000";
      bubble.style.color = "red";
      setTimeout(() => {
        location.href = "/index.php?title=六世恶言之一";
      }, 1500);
      return;
    }

    currentTicket++;
    if (currentTicket < TICKETS.length) {
      renderTicket();
    }
  });

  document.querySelector('.ggl-start-btn').addEventListener('click', () => {
    overlay.style.display = "none";
    renderTicket();
  });

})();
</script>