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

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

<style>
.ggl-root {
  position: relative;
  width: 375px;
  margin: auto;
  aspect-ratio: 1075 / 1911;
  font-family: sans-serif;
}

.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: 6px;
  width: 100%;
  height: 100%;
}

.ggl-cell {
  position: relative;
  overflow: hidden;
}

.ggl-cell img,
.ggl-cell canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ggl-mascot {
  position: absolute;
  left: 6%;
  bottom: 8%;
  font-size: 22px;
}

.ggl-bubble {
  position: absolute;
  left: 6%;
  bottom: 13%;
  width: 60%;
  min-height: 40px;
  background: rgba(255,255,255,.9);
  padding: 6px;
  font-size: 14px;
}

.ggl-controls {
  position: absolute;
  right: 6%;
  bottom: 8%;
}

#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 STATES = [
    "无",
    "(・∀・)",
    "(ﾉ◕ヮ◕)ﾉ",
    "(・_・)",
    "(；ﾟДﾟ)",
    null,
    "...",
    "别挠我痒痒",
    "你是谁？",
    "停下来",
    "平安喜乐。你知道的太多了"
  ];

  let scratchedCount = 0;

  for (let i = 0; i < 30; i++) {
    const cell = document.createElement('div');
    cell.className = 'ggl-cell';
    cell.dataset.state = (i % 11) + 1;

    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">
      <canvas></canvas>
    `;
    grid.appendChild(cell);
    initScratch(cell);
  }

  function initScratch(cell) {
    const canvas = cell.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    requestAnimationFrame(() => {
      canvas.width = cell.clientWidth;
      canvas.height = cell.clientHeight;

      const cover = new Image();
      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";
      cover.onload = () => {
        ctx.drawImage(cover, 0, 0, canvas.width, canvas.height);
      };
    });

    let down = false;

    canvas.addEventListener('pointerdown', () => down = true);
    canvas.addEventListener('pointerup', () => down = false);
    canvas.addEventListener('pointerleave', () => down = false);

    canvas.addEventListener('pointermove', e => {
      if (!down) return;
      const r = canvas.getBoundingClientRect();
      ctx.globalCompositeOperation = 'destination-out';
      ctx.beginPath();
      ctx.arc(e.clientX - r.left, e.clientY - r.top, 18, 0, Math.PI * 2);
      ctx.fill();
    });

    canvas.addEventListener('pointerup', () => onReveal(cell));
  }

  function onReveal(cell) {
    if (cell.dataset.revealed) return;
    cell.dataset.revealed = 1;
    scratchedCount++;

    const state = +cell.dataset.state;

    if (state <= 5) {
      mascot.textContent = STATES[state];
      bubble.textContent = "中奖了？";
    }
    if (state === 6) {
      mascot.textContent = "";
      bubble.textContent = "……你真的在刮吗？";
    }
    if (state === 7) {
      bubble.textContent = "……";
    }
    if (state === 8) {
      bubble.textContent = "哦 嗯 嘿 哈";
    }
    if (state === 9) {
      bubble.textContent = "你是谁？";
    }
    if (state === 10) {
      bubble.textContent = "停下来";
      scanBtn.classList.add("active");
    }
    if (state === 11) {
      bubble.textContent = STATES[10];
      setTimeout(() => {
        document.body.style.filter = "invert(1)";
        setTimeout(() => {
          location.href = "/index.php?title=六世恶言之一";
        }, 1200);
      }, 800);
    }
  }

  scanBtn.addEventListener('click', () => {
    if (!scanBtn.classList.contains('active')) return;
    bubble.textContent = "扫描中……";
  });

})();
</script>