微件:GGLScratchGame：修订间差异

来自Limbo Wiki Mirror
←上一编辑下一编辑→
可视化wikitext
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
第1行： 第1行：
<noinclude>
<noinclude>
完整彩票刮刮乐 Widget
赛博刮刮乐 · 完整结构版
</noinclude>
</noinclude>


第7行： 第7行：
<div class="ggl-root">
<div class="ggl-root">
   <div class="ggl-ticket">
   <div class="ggl-ticket">
    <!-- 刮奖区域 -->
     <div class="ggl-scratch-area"></div>
     <div class="ggl-scratch-area"></div>
   </div>
   </div>


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


<style>
<style>
/* ===== 根容器 ===== */
.ggl-root {
.ggl-root {
   max-width: 420px;
   max-width: 420px;
   margin: 30px auto;
   margin: 20px auto;
   font-family: sans-serif;
   font-family: sans-serif;
}
}


/* ===== 彩票主体 ===== */
/* 彩票背景 */
.ggl-ticket {
.ggl-ticket {
   position: relative;
   position: relative;
   width: 100%;
   width: 100%;
   aspect-ratio: 1075 / 1911;
   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-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-size: cover;
第36行： 第34行：
}
}


/* ===== 刮奖黄色区域 ===== */
/* 刮奖区（黄色块） */
.ggl-scratch-area {
.ggl-scratch-area {
   position: absolute;
   position: absolute;
 
   left: 11%;
  /* 原始比例定位（基于 1075×1911） */
   left: 10.6%;
   top: 23.5%;
   top: 23.5%;
   width: 78.7%;
   width: 78%;
   height: 53.4%;
   height: 53%;
 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
}


/* ===== 单个刮奖格 ===== */
/* 单格 */
.ggl-cell {
.ggl-cell {
   position: relative;
   position: absolute;
   overflow: hidden;
   width: 20%;
  height: 16.66%;
}
}


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


/* 刮开前 */
.ggl-cover {
.ggl-cover {
  position: absolute;
  inset: 0;
   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");
   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");
  background-size: cover;
  background-position: center;
   cursor: pointer;
   cursor: pointer;
}
}
第80行： 第70行：
}
}


/* ===== 底部 UI ===== */
/* 气泡 */
.ggl-footer {
.ggl-bubble {
   display: flex;
  position: absolute;
   margin-top: 10px;
  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 {
.ggl-mascot {
  flex: 1;
  padding: 6px;
   background: #111;
   background: #111;
   color: #0f0;
   color: #0f0;
  padding: 6px;
   font-size: 12px;
   font-size: 12px;
  margin-bottom: 6px;
}
}


.ggl-scan {
.ggl-btn {
   flex: 1;
   width: 48%;
   background: #222;
   margin-right: 2%;
  color: #fff;
  border: none;
}
}
</style>
</style>
第104行： 第108行：
<script>
<script>
(function () {
(function () {
  var root = document.currentScript.parentNode;
  var area = root.querySelector('.ggl-scratch-area');


   if (!area) return;
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++) {
   for (var i = 0; i < 30; i++) {
     var cell = document.createElement('div');
     var cell = document.createElement('div');
     cell.className = 'ggl-cell';
     cell.className = 'ggl-cell';
    cell.style.left = (i % 5) * 20 + '%';
    cell.style.top = Math.floor(i / 5) * 16.66 + '%';


     var reveal = document.createElement('div');
     var reveal = document.createElement('div');
第119行： 第153行：
     cover.className = 'ggl-cover';
     cover.className = 'ggl-cover';


     cover.onclick = function () {
     var bubble = document.createElement('div');
      this.parentNode.classList.add('scratched');
    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(reveal);
     cell.appendChild(cover);
     cell.appendChild(cover);
    cell.appendChild(bubble);
     area.appendChild(cell);
     area.appendChild(cell);
   }
   }
}
drawBtn.onclick = function () {
  renderTicket();
  currentTicket++;
};
renderTicket();
})();
})();
</script>
</script>


</includeonly>
</includeonly>

2026年2月1日 (日) 17:34的版本

赛博刮刮乐 · 完整结构版


检索自“https://mirror.awakenplace.top/index.php?title=微件:GGLScratchGame&oldid=51618”