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

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

  <!-- 初始化遮罩 -->
  <div class="ggl-mask" id="ggl-mask">
    <button class="ggl-start-btn">来一张彩票…<br>…不，三张吧</button>
  </div>

  <!-- 顶部 -->
  <div class="ggl-top">
    <div class="ggl-rule">
      刮开奖券 · 在整张刮完后交由bot扫描<br>
      刮出数字即能获得对应额度的data<br>
      当“平”“安”“喜”“乐”四个字连城一条线时，可再获得一张彩票<br>
      看不懂也没关系！bot会告诉你结果！
    </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-mask{position:absolute;inset:0;background:#000d;z-index:99;display:flex;align-items:center;justify-content:center}
.ggl-start-btn{padding:12px 20px;font-size:16px}

.ggl-top{text-align:center;font-size:14px;margin-bottom:6px}
.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{display:grid;width:100%;height:100%;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:url("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") center/cover;
  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%}
.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%;
  left:2%;
  width:48%;
  height:10%;
  background:transparent;
  border:none;
  cursor:pointer;
}
</style>

<script>
(function(){

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 redeem = document.getElementById('ggl-redeem-hit');
const leftEl = document.getElementById('ggl-left');
const dataEl = document.getElementById('ggl-data');
const mask   = document.getElementById('ggl-mask');

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

let idx = 0;
let revealed = 0;
let scanned = false;
let finalized = false;

/* ===== 彩票数据 ===== */
const lotteryList = [
/* 1 */
{
  left: 2,
  data: 0,
  mascot: '|ω`)',
  bubble: '你好呀，俺是负责播报结果的。刮奖阶段不用在意我。',
  onScan: '哇！中了25MB耶，回本了回本了。',
  onRedeem: '兑奖文本占位 1',
  rewards: {
    0:'畅',1:'舒',2:'遂',3:'顺',4:'达',5:'欢',6:'5',7:'欣',8:'怡',9:'和',
    10:'睦',11:'融',12:'洽',13:'美',14:'善',15:'吉',16:'昌',17:'20',
    18:'兴',19:'平',20:'安',21:'喜',22:'乐',23:'平',24:'安',
    25:'盛',26:'喜',27:'乐',28:'悦',29:'睦'
  }
},

/* 2 */
{
  left: 1,
  data: 25,
  mascot: '|∀`)ﾉ',
  bubble: '虽然好像彩票上下都没标，但是中奖金额的单位默认是MB哦~',
  onScan: '1MB，然后是……bingo！不对，“平安喜乐”！第二行，横着和斜着，两组！这就去给你加上！',
  onRedeem: '兑奖文本占位 2',
  rewards: {
    0:'遂',1:'舒',2:'达',3:'顺',4:'畅',5:'平',6:'安',7:'喜',8:'乐',9:'和',
    10:'睦',11:'安',12:'1',13:'美',14:'善',15:'吉',16:'昌',17:'喜',
    18:'盛',19:'兴',20:'欢',21:'平',22:'悦',23:'乐',24:'欣',
    25:'怡',26:'洽',27:'融',28:'欢',29:'怡'
  }
},

/* 3 */
{
  left: 2,
  data: 26,
  mascot: '|o`)',
  bubble: '耶咦耶咦耶咦耶奥🎶我们又能多相处一会儿了！',
  onScan: '让我看看，36MB，外加一张彩票！<br>【这么好中，真的假的？都不用我……】',
  onRedeem: '兑奖文本占位 3',
  rewards: {
    0:'舒',1:'平',2:'场',3:'遂',4:'15',5:'欢',6:'安',7:'悦',8:'欣',9:'怡',
    10:'和',11:'喜',12:'睦',13:'融',14:'20',15:'洽',16:'美',17:'乐',
    18:'善',19:'吉',20:'昌',21:'盛',22:'兴',23:'16',
    24:'顺',25:'平',26:'安',27:'喜',28:'乐',29:'达'
  }
},

/* 4 */
{
  left: 2,
  data: 62,
  mascot: '|д`)',
  bubble: '*紧急寻找说明书中*',
  onScan: '扫描完成：null。终于正常了嘛……<br>嘿嘿，果然还需要我来帮一把!',
  onRedeem: '兑奖文本占位 4',
  rewards: {
    0:'欣',1:'平',2:'怡',3:'畅',4:'舒',5:'安',6:'遂',7:'盛',8:'顺',9:'达',
    10:'和',11:'睦',12:'融',13:'喜',14:'洽',15:'美',16:'善',17:'吉',
    18:'昌',19:'乐',20:'兴',21:'欢',22:'平',23:'安',24:'悦',
    25:'喜',26:'乐',27:'融',28:'洽',29:'兴'
  }
},

/* 5 */
{
  left: 2,
  data: 62,
  mascot: '|_・)',
  bubble: '什么都没有<br>【我该干点什么，还是说些什么？<br>那边的运气不会一直好下去，死脑子，快想啊呜呜……】',
  onScan: '哦哦，扫描完成！10MB！<br>【完了完了，这下剩一张了，我得再……】',
  onRedeem: '兑奖文本占位 5',
  rewards: {
    0:'欣',1:'平',2:'怡',3:'1',4:'舒',5:'安',6:'遂',7:'喜',8:'顺',9:'2',
    10:'和',11:'1',12:'融',13:'乐',14:'洽',15:'美',16:'善',17:'吉',
    18:'5',19:'昌',20:'盛',21:'兴',22:'欢',23:'悦',24:'1',
    25:'平',26:'乐',27:'畅',28:'达',29:'喜'
  }
},

/* 6 */
{
  left: 1,
  data: 72,
  mascot: '|??)',
  bubble: '不不不，我不是通过修改多添了一张票吗？为什么还是结束了?<br>我这是……我在……<br>不……不要……不要！！！',
  onScan: 'A̜̤̓b̦̅́ǒ̮̚r̛̰̪t̗̗͂:̵̂̚ ů̡̘̪̿̎ñ̸̯̻͈̤͊r͍̥̜̾̂̃̀è̡̧̖̬̲̏s͏̴̮̬̬̳͋o̶̡̬̖̖͌̈l̵̴̪̻̄̚͏v̤̭͉̋̂̽̑a̧̩̫͈̦̔̅b̢̮̘̼̥̐̏l̢̟̳̈́͊̊̀ȩ̧͎̩͌̕ s̱̭̙i̥̘͆t̡̥̔ũ̞̠̗a̸̡̺̕t̫i̝̠̾o̺͉͂ǹ̲̎。',
  onRedeem: '兑奖文本占位 6',
  rewards: {
    0:'6',1:'顺',2:'6',3:'遂',4:'6',5:'6',6:'6',7:'6',8:'6',9:'6',
    10:'平',11:'6',12:'6',13:'6',14:'和',15:'平',16:'6',17:'6',
    18:'6',19:'和',20:'安',21:'6',22:'6',23:'6',24:'睦',
    25:'安',26:'6',27:'6',28:'6',29:'睦'
  }
},

/* 7 */
{
  left: 0,
  data: '▒▓',
  mascot: '|V̵̨̄I̤)',
  bubble: '<br>……<br>',
  onScan: '扫描完成：无数据。',
  onRedeem: '兑奖文本占位 7',
  rewards: {
    0:'和',1:'睦',2:'融',3:'洽',4:'美',5:'善',6:'吉',7:'昌',8:'盛',9:'兴',
    10:'欢',11:'平',12:'悦',13:'顺',14:'欣',15:'怡',16:'安',17:'畅',
    18:'乐',19:'舒',20:'遂',21:'喜',22:'达',23:'平',24:'安',
    25:'喜',26:'乐',27:'欢',28:'悦',29:'欣'
  }
},

/* 8 */
{
  left: 0,
  data: '在此输入数字',
  mascot: '|̡̔̿̆∀̯̠̥̒◕̪͇̻̈́)̤͆̾͊',
  bubble: '没素质啊，干嘛挠人痒痒肉',
  onScan: '就你还想使唤我？',
  onRedeem: '兑奖文本占位 8',
  rewards: {
    0:'美',1:'善',2:'吉',3:'昌',4:'盛',5:'兴',6:'平',7:'欢',8:'悦',9:'欣',
    10:'平',11:'安',12:'喜',13:'乐',14:'89',15:'畅',16:'喜',17:'32',
    18:'遂',19:'顺',20:'达',21:'乐',22:'睦',23:'融',24:'怡',
    25:'安',26:'和',27:'舒',28:'200',29:'洽'
  }
},

/* 9 */
{
  left: 1,
  data: '—',
  mascot: '|?̷̊̇?̶̨̦)',
  bubble: '恭恭恭恭喜喜喜喜中中中中奖奖奖奖',
  onScan: '3̘͉̌9̥͂̊3̒̂́4̖̜̾1̻̋̉8̿̊́1̼̓̅3̼̏̋8͍͍̍3̴͍̏5̸̆́3̴̠̉3̂̽̆ +̷̰ͅ 7̺͉̒9̢̰̔3̬̆̓4̶̦̬1̧̧̧6̛͍̘…͉̥̄…̜̱̕',
  onRedeem: '兑奖文本占位 9',
  rewards: {
    0:'17 Byte',1:'89 KB',2:'1023 MB',3:'457 GB',4:'781 bit',
    5:'902 TB',6:'314 Byte',7:'567 KB',8:'890 MB',9:'10 GB',
    10:'21 bit',11:'144 TB',12:'169 Byte',13:'196 KB',14:'225 MB',
    15:'256 GB',16:'289 bit',17:'3 Byte',18:'361 KB',19:'400 TB',
    20:'41 MB',21:'484 GB',22:'529 bit',23:'576 Byte',24:'625 KB',
    25:'676 TB',26:'729 MB',27:'84 GB',28:'841 bit',29:'900 Byte'
  }
},

/* 10 */
{
  left: 0,
  data: 'ERROR!',
  mascot: '|̴̢͌ω̗̦̐`͍̀̈́)̘̗̾',
  bubble: 'Oh! Ý̦ȯ͇u̪͆ l̫̒o̙̘o̠͂k̮͂ s̩̹ö̧ f̧͈a̤͋m̮͏i̟̐l̂̀i̳͆a̯ȑ̉...',
  onScan: '警告：DATA 溢出。',
  onRedeem: '兑奖文本占位 10',
  rewards: { /* 原样保留 */ }
},

/* 11 */
{
  left: '?̜̻̤̹́̂̈́̑̀?',
  data: 'ÈRROR',
  mascot: 'Ĕ̴̢̟̑ñ̡̬̑̽d̝̑͋',
  bubble: '你知道的太多了。',
  onScan: '权限越界。<br>祝您平安喜乐。',
  onRedeem: '兑奖文本占位 11',
  rewards: {
    0:'平',1:'安',2:'安',3:'平',4:'喜',5:'喜',6:'乐',7:'喜',8:'安',9:'平',
    10:'安',11:'平',12:'安',13:'喜',14:'乐',15:'乐',16:'喜',17:'平',
    18:'安',19:'安',20:'喜',21:'平',22:'乐',23:'乐',24:'平',
    25:'平',26:'安',27:'安',28:'喜',29:'乐'
  }
}
];


/* ===== 构建 ===== */
function build(){
  const t = TICKETS[idx];
  grid.innerHTML = '';
  revealed = 0;
  scanned = false;

  leftEl.textContent = t.left;
  dataEl.textContent = t.data;
  mascot.textContent = t.mascot;
  bubble.textContent = t.bubble;

  scan.textContent = '扫描结果';
  scan.classList.remove('active');

  for(let i=0;i<30;i++){
    const c = document.createElement('div');
    c.className = 'ggl-cell';
    c.innerHTML = `
      <img src="${OPEN}">
      <div class="ggl-reward">${t.rewards[i]||''}</div>
      <div class="ggl-cover"></div>
    `;
    const cover = c.querySelector('.ggl-cover');
    cover.onclick = ()=>{
      if(c.dataset.done) return;
      c.dataset.done = 1;
      cover.style.display='none';
      if(++revealed === 30){
        scan.classList.add('active');
      }
    };
    grid.appendChild(c);
  }
}

/* ===== 扫描 ===== */
scan.onclick = ()=>{
  if(!scan.classList.contains('active')||finalized) return;

  if(!scanned){
    scanned = true;
    bubble.textContent = TICKETS[idx].onScan;
    scan.textContent = '再来一张';
    return;
  }

  idx++;
  if(idx>=TICKETS.length) return;
  build();
};

/* ===== 兑奖 ===== */
redeem.onclick = ()=>{
  if(finalized) return;
  if(revealed !== 30) return;

  const t = TICKETS[idx];
  if(!t.onRedeem) return;

  bubble.textContent = t.onRedeem;
};

/* ===== 启动 ===== */
mask.onclick = ()=>{
  mask.remove();
  build();
};

})();
</script>