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

<noinclude>
赛博刮刮乐 · 完整结构版
</noinclude>

<includeonly>

<div class="ggl-root">
  <div class="ggl-ticket">
    <div class="ggl-scratch-area"></div>
  </div>

  <div class="ggl-ui">
    <div class="ggl-mascot" id="gglMascot">(｀・ω・´) 等待扫描</div>
    <button class="ggl-btn" id="gglDraw">来一张彩票</button>
    <button class="ggl-btn" id="gglScan">扫描结果</button>
  </div>
</div>

<style>
.ggl-root {
  max-width: 420px;
  margin: 20px auto;
  font-family: sans-serif;
}

/* 彩票背景 */
.ggl-ticket {
  position: relative;
  width: 100%;
  height: 750px; /* ⚠️ 固定高度，避免 aspect-ratio 坑 */
  background-image: url("https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/1075px-%E5%9B%BE%E7%89%871.png");
  background-size: cover;
  background-position: center;
}

/* 刮奖区（黄色块） */
.ggl-scratch-area {
  position: absolute;
  left: 11%;
  top: 23.5%;
  width: 78%;
  height: 53%;
}

/* 单格 */
.ggl-cell {
  position: absolute;
  width: 20%;
  height: 16.66%;
}

.ggl-reveal,
.ggl-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.ggl-reveal {
  background-image: url("https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/559px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg");
}

.ggl-cover {
  background-image: url("https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/559px-%E5%88%AE%E5%BC%80%E5%89%8D.png");
  cursor: pointer;
}

.ggl-cell.scratched .ggl-cover {
  display: none;
}

/* 气泡 */
.ggl-bubble {
  position: absolute;
  bottom: 105%;
  left: 0;
  background: rgba(0,0,0,0.8);
  color: #0f0;
  font-size: 11px;
  padding: 4px 6px;
  display: none;
  z-index: 5;
}

.ggl-cell.scratched .ggl-bubble {
  display: block;
}

/* UI */
.ggl-ui {
  margin-top: 8px;
}

.ggl-mascot {
  background: #111;
  color: #0f0;
  padding: 6px;
  font-size: 12px;
  margin-bottom: 6px;
}

.ggl-btn {
  width: 48%;
  margin-right: 2%;
}
</style>

<script>
(function () {

var root = document.currentScript.parentNode;
var area = root.querySelector('.ggl-scratch-area');
var mascot = root.querySelector('#gglMascot');
var drawBtn = root.querySelector('#gglDraw');

/* 状态文本 1–11 */
var states = {
  1: '',
  2: '(｀・ω・´) 扫描中…',
  3: '(≧▽≦) 太棒了！',
  4: '(・_・?) 思考中',
  5: '(；ﾟДﾟ) 不对劲',
  6: '你在看哪里？',
  7: '……',
  8: '哦、哈、别挠',
  9: '你是谁？',
  10: '停下来。',
  11: '平安喜乐。'
};

var tickets = [
  [2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

var currentTicket = 0;

function renderTicket() {
  area.innerHTML = '';
  var data = tickets[currentTicket] || [];
  mascot.textContent = '(｀・ω・´) 新的彩票';

  for (var i = 0; i < 30; i++) {
    var cell = document.createElement('div');
    cell.className = 'ggl-cell';
    cell.style.left = (i % 5) * 20 + '%';
    cell.style.top = Math.floor(i / 5) * 16.66 + '%';

    var reveal = document.createElement('div');
    reveal.className = 'ggl-reveal';

    var cover = document.createElement('div');
    cover.className = 'ggl-cover';

    var bubble = document.createElement('div');
    bubble.className = 'ggl-bubble';

    (function (state) {
      cover.onclick = function () {
        cell.classList.add('scratched');
        bubble.textContent = states[state] || '';
        if (state === 2) mascot.textContent = states[2];
      };
    })(data[i] || 1);

    cell.appendChild(reveal);
    cell.appendChild(cover);
    cell.appendChild(bubble);
    area.appendChild(cell);
  }
}

drawBtn.onclick = function () {
  renderTicket();
  currentTicket++;
};

renderTicket();

})();
</script>

</includeonly>