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

<div class="ggl-root" id="ggl-root">

  <!-- 初始化遮罩 -->
  <div class="ggl-mask" id="ggl-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-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>

<style>
/* ===== 基础 ===== */
.ggl-root{width:375px;margin:auto;font-family:sans-serif;position:relative}
.ggl-top{text-align:center;font-size:14px;margin-bottom:6px}

.ggl-mask{
  position:absolute;inset:0;z-index:50;
  background:#000d;display:flex;
  align-items:center;justify-content:center
}
.ggl-start-btn{padding:12px 20px;font-size:16px}

/* ===== 外框 ===== */
.ggl-frame{
  padding:10px;
  border:3px solid #ff00aa;
  box-shadow:0 0 12px #ff00aa88;
}

/* ===== 彩票 ===== */
.ggl-ticket{position:relative;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,.ggl-cover{
  position:absolute;inset:0;
  width:100%;height:100%
}
.ggl-cover{
  background:center/cover no-repeat;
  cursor:pointer
}
.ggl-reward{
  position:absolute;inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;font-weight:bold;
  pointer-events:none
}

/* ===== 吉祥物 ===== */
.ggl-mascot{
  position:absolute;
  left:6%;top:107%;
  font-size:20px;color:#000
}
.ggl-bubble{
  position:absolute;
  left:6%;top:103%;
  width:60%;
  background:#fff;
  padding:6px;
  font-size:13px
}

/* ===== 控制 ===== */
.ggl-controls{
  position:absolute;
  right:6%;top:103%
}
#ggl-scan{opacity:.3}
#ggl-scan.active{opacity:1}

/* ===== 兑奖区 ===== */
.ggl-redeem-hit{
  position:absolute;
  bottom:1%;
  width:48%;
  height:10%;
  background:transparent;
  border:none;
  cursor:pointer;
}

/* ===== 反色剧情 ===== */
.ggl-invert{
  filter:invert(1) hue-rotate(180deg);
}
</style>

<script>
(function(){

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

/* 剧情票 */
const TICKETS = [
  {left:3,data:0,bubble:'你好。',rewards:{12:'DATA'}},
  {left:2,data:1,bubble:'第一张。',rewards:{1:'连',3:'着',16:'四',19:'个'}},
  {left:1,data:2,bubble:'你是谁？',rewards:{}},
  {left:0,data:'—',bubble:'你知道的太多了。',lock:true,invert:true}
];

let index=0, revealed=0, canScan=false;

/* 构建 */
function build(){
  const t=TICKETS[index];
  grid.innerHTML='';
  revealed=0;canScan=false;
  root.classList.toggle('ggl-invert',!!t.invert);

  leftEl.textContent=t.left;
  dataEl.textContent=t.data;
  mascot.textContent=t.mascot||'';
  bubble.textContent=t.bubble||'';
  scan.classList.remove('active');

  for(let i=0;i<30;i++){
    const cell=document.createElement('div');
    cell.className='ggl-cell';
    cell.innerHTML=`
      <img src="${OPEN}">
      <div class="ggl-reward">${t.rewards?.[i]||''}</div>
      <div class="ggl-cover" style="background-image:url('${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) enableScan();
      };
    }else{
      cover.style.display='none';
    }

    grid.appendChild(cell);
  }
  if(t.lock) enableScan();
}

/* 扫描 */
function enableScan(){
  canScan=true;
  scan.classList.add('active');
}
scan.onclick=()=>{
  if(!canScan)return;
  index++;
  if(index<TICKETS.length) build();
};

/* 兑奖区 */
redeem.onclick=()=>{
  bubble.textContent='提示：兑奖区刮开后将视为无效哦。';
};

/* 初始化 */
mask.onclick=()=>{
  mask.remove();
  build();
};

/* 测试 */
document.addEventListener('keydown',e=>{
  if(e.shiftKey&&e.key==='D'){
    document.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
    revealed=30;
    enableScan();
  }
});

})();
</script>