微件:GGLScratchGame

 <img class="ggl-bg"
      src="">

(＾▽＾)

   <button id="ggl-scan">扫描结果</button>

<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%;
 top: 110%;
 bottom: 8%;
 font-size: 22px;

}

.ggl-bubble {

 position: absolute;
 left: 6%;
 top: 100%;
 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%;

}

1. ggl-scan {

 opacity: .3;
 top: 25%;

}

1. 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="">
     <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 = "";
     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>