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

<noinclude>
Cyber Scratch Lottery Widget
</noinclude>

<includeonly>

<style>
.ggl-wrapper {
  max-width: 360px;
  margin: 30px auto;
  font-family: sans-serif;
}

.ggl-ticket {
  position: relative;
  width: 360px;
  height: 360px;
  background-image: url("https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png");
  background-size: cover;
  border-radius: 16px;
  overflow: hidden;
}

/* 刮开后图 */
.ggl-reveal {
  position: absolute;
  inset: 0;
  background-image: url("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");
  background-size: cover;
}

/* 刮刮乐网格 */
.ggl-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

/* 每一个刮块 */
.ggl-cell {
  position: relative;
  background-image: 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");
  background-size: cover;
  cursor: pointer;
}

.ggl-cell.scratched {
  background: transparent;
}

/* 气泡 */
.ggl-bubble {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #0f0;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  display: none;
  z-index: 5;
}

.ggl-cell.scratched .ggl-bubble {
  display: block;
}
</style>

<div class="ggl-wrapper">
  <div class="ggl-ticket">
    <div class="ggl-reveal"></div>
    <div class="ggl-grid" id="gglGrid"></div>
  </div>
</div>

<script>
(function () {

const texts = {
  1: '',
  2: '(｀・ω・´)📡',
  3: '(≧▽≦)ﾉ',
  4: '(・_・?)',
  5: '(；ﾟДﾟ)',
  6: '你点的是哪里？',
  7: '… … …',
  8: '嘿、哈、别挠',
  9: '你是谁？',
  10: '停下来',
  11: '平安喜乐'
};

let state = 1;
const grid = document.getElementById('gglGrid');

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

  const bubble = document.createElement('div');
  bubble.className = 'ggl-bubble';
  bubble.textContent = texts[state];

  cell.appendChild(bubble);

  cell.onclick = () => {
    if (cell.classList.contains('scratched')) return;

    cell.classList.add('scratched');
    bubble.textContent = texts[state];

    if (state < 11) state++;
  };

  grid.appendChild(cell);
}

})();
</script>

</includeonly>