微件:GGLScratchGame:修订间差异

来自Limbo Wiki Mirror
Gaoice留言 | 贡献
无编辑摘要
标签(旧)WikiEditor
Gaoice留言 | 贡献
无编辑摘要
标签(旧)WikiEditor
第1行: 第1行:
<div class="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"
        title="兑奖区"></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:30;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{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: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%;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;
}
</style>
<script>
<script>
(function(){
(function(){


/* ================= DOM ================= */
const grid      = document.querySelector('.ggl-grid');
const grid      = document.querySelector('.ggl-grid');
const bubble    = document.querySelector('.ggl-bubble');
const bubble    = document.querySelector('.ggl-bubble');
第110行: 第12行:
const redeemHit = document.getElementById('ggl-redeem-hit');
const redeemHit = document.getElementById('ggl-redeem-hit');


/* ================= 资源 ================= */
const COVER_IMG = '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 COVER_IMG = '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_IMG  = '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 OPEN_IMG  = '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 = [
const TICKETS = [
   { left:3, data:0, mascot:'', bubble:'你好。', rewards:{12:'DATA'} },
   { left:3, data:0, mascot:'', bubble:'你好。', rewards:{12:'DATA'} },
第126行: 第29行:
   { left:1, data:9999, mascot:'', bubble:'你是谁?', rewards:{} },
   { left:1, data:9999, mascot:'', bubble:'你是谁?', rewards:{} },
   { left:0, data:'—', mascot:'', bubble:'停下来。', lock:true, rewards:{} },
   { left:0, data:'—', mascot:'', bubble:'停下来。', lock:true, rewards:{} },
   { left:0, data:'—', mascot:'平安喜乐', bubble:'你知道的太多了。', rewards:{} }
   { left:0, data:'—', mascot:'平安喜乐', bubble:'你知道的太多了。', lock:true, invert:true, rewards:{} }
];
];


let index = 0;
/* ================= 状态 ================= */
let index   = 0;
let revealed = 0;
let revealed = 0;
let bubbleTimer = null;
let canScan  = false;
 
function updateData(){
  const base = TICKETS[index].data;
  if(typeof base === 'number'){
    dataEl.textContent = base + revealed; // 👈 你之后可以手写改这里
  }else{
    dataEl.textContent = base;
  }
}


/* ================= 构建当前彩票 ================= */
function build(){
function build(){
   const t = TICKETS[index];
   const t = TICKETS[index];
   grid.innerHTML = '';
   grid.innerHTML = '';
   revealed = 0;
   revealed = 0;
  canScan  = false;


   /* —— 反色由剧情控制 —— */
   /* —— 反色只由剧情控制 —— */
   if(t.invert){
   document.body.classList.toggle('ggl-invert', !!t.invert);
    document.body.classList.add('ggl-invert');
  }else{
    document.body.classList.remove('ggl-invert');
  }


   leftEl.textContent = t.left;
   leftEl.textContent = t.left;
  dataEl.textContent = t.data;
   mascot.textContent = t.mascot || '';
   mascot.textContent = t.mascot || '';
   bubble.textContent = t.bubble || '';
   bubble.textContent = t.bubble || '';
  updateData();


   scanBtn.classList.remove('active');
   scanBtn.classList.remove('active');
第164行: 第58行:
     const cell = document.createElement('div');
     const cell = document.createElement('div');
     cell.className = 'ggl-cell';
     cell.className = 'ggl-cell';
     cell.innerHTML = `
     cell.innerHTML = `
       <img src="${OPEN_IMG}">
       <img src="${OPEN_IMG}">
第169行: 第64行:
       <div class="ggl-cover" style="background-image:url('${COVER_IMG}')"></div>
       <div class="ggl-cover" style="background-image:url('${COVER_IMG}')"></div>
     `;
     `;
     const cover = cell.querySelector('.ggl-cover');
     const cover = cell.querySelector('.ggl-cover');


第177行: 第73行:
         cover.style.display = 'none';
         cover.style.display = 'none';
         revealed++;
         revealed++;
        updateData();


         if(revealed === 30){
         if(revealed === 30){
           scanBtn.classList.add('active');
           enableScan();
         }
         }
       };
       };
    }else{
      // lock 的票,直接显示底图
      cover.style.display = 'none';
     }
     }
     grid.appendChild(cell);
     grid.appendChild(cell);
   }
   }


   if(t.lock) scanBtn.classList.add('active');
   if(t.lock){
    enableScan();
  }
}
}


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


/* ✅ 兑奖区:只在气泡里提示,不改流程 */
/* ================= 兑奖区 ================= */
redeemHit.onclick = ()=>{
redeemHit.onclick = ()=>{
  if(bubbleTimer) clearTimeout(bubbleTimer);
  const old = bubble.textContent;
   bubble.textContent = '提示:兑奖区刮开后将视为无效哦。';
   bubble.textContent = '提示:兑奖区刮开后将视为无效哦。';
  bubbleTimer = setTimeout(()=>bubble.textContent = old, 2000);
};
};


/* ================= 初始化遮罩 ================= */
mask.onclick = ()=>{
mask.onclick = ()=>{
   mask.remove();
   mask.remove();
第204行: 第117行:
};
};


/* 测试快捷:Shift + D */
/* ================= 测试快捷键 ================= */
document.addEventListener('keydown',e=>{
document.addEventListener('keydown',e=>{
   if(e.shiftKey && e.key.toLowerCase()==='d'){
   if(e.shiftKey && e.key.toLowerCase()==='d'){
     grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
     grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
     revealed = 30;
     revealed = 30;
     updateData();
     enableScan();
    scanBtn.classList.add('active');
    document.body.classList.add('ggl-invert');
   }
   }
});
});

2026年2月1日 (日) 21:10的版本

<script> (function(){

/* ================= DOM ================= */ const grid = document.querySelector('.ggl-grid'); const bubble = document.querySelector('.ggl-bubble'); const mascot = document.querySelector('.ggl-mascot'); const scanBtn = document.getElementById('ggl-scan'); const leftEl = document.getElementById('ggl-left'); const dataEl = document.getElementById('ggl-data'); const mask = document.getElementById('ggl-mask'); const redeemHit = document.getElementById('ggl-redeem-hit');

/* ================= 资源 ================= */ const COVER_IMG = '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_IMG = '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, mascot:, bubble:'你好。', rewards:{12:'DATA'} },
 { left:2, data:1, mascot:'(^▽^)ノ', bubble:'第一张,只中了 DATA。', rewards:{1:'连',3:'着',16:'四',19:'个'} },
 { left:3, data:2, mascot:'(ノ◕ヮ◕)ノ', bubble:'连着刮出了四个字!', rewards:{8:'DATA',14:'🎟'} },
 { left:3, data:4, mascot:'(^▽^)', bubble:'中了刮刮乐!DATA 2MB', rewards:{} },
 { left:3, data:5, mascot:'(・_・)', bubble:'什么都没有。', rewards:{22:'DATA'} },
 { left:2, data:5, mascot:'(;゚Д゚)', bubble:'好像哪里不对。', rewards:{} },
 { left:1, data:5, mascot:, bubble:'什么都没有。', rewards:{6:'🎟'} },
 { left:2, data:7, mascot:'...', bubble:'▒▓░▒▓▒▓', rewards:{3:'DATA',18:'DATA'} },
 { left:2, data:9999, mascot:, bubble:'哦 嗯 嘿 哈', rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA'])) },
 { left:1, data:9999, mascot:, bubble:'你是谁?', rewards:{} },
 { left:0, data:'—', mascot:, bubble:'停下来。', lock:true, rewards:{} },
 { left:0, data:'—', mascot:'平安喜乐', bubble:'你知道的太多了。', lock:true, invert:true, rewards:{} }

];

/* ================= 状态 ================= */ let index = 0; let revealed = 0; let canScan = false;

/* ================= 构建当前彩票 ================= */ function build(){

 const t = TICKETS[index];
 grid.innerHTML = ;
 revealed = 0;
 canScan  = false;
 /* —— 反色只由剧情控制 —— */
 document.body.classList.toggle('ggl-invert', !!t.invert);
 leftEl.textContent = t.left;
 dataEl.textContent = t.data;
 mascot.textContent = t.mascot || ;
 bubble.textContent = t.bubble || ;
 scanBtn.classList.remove('active');
 for(let i=0;i<30;i++){
   const cell = document.createElement('div');
   cell.className = 'ggl-cell';
   cell.innerHTML = `
     <img src="${OPEN_IMG}">
${t.rewards?.[i] || }
   `;
   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{
     // lock 的票,直接显示底图
     cover.style.display = 'none';
   }
   grid.appendChild(cell);
 }
 if(t.lock){
   enableScan();
 }

}

/* ================= 扫描控制 ================= */ function enableScan(){

 canScan = true;
 scanBtn.classList.add('active');

}

scanBtn.onclick = ()=>{

 if(!canScan) return;
 index++;
 if(index < TICKETS.length){
   build();
 }

};

/* ================= 兑奖区 ================= */ redeemHit.onclick = ()=>{

 bubble.textContent = '提示:兑奖区刮开后将视为无效哦。';

};

/* ================= 初始化遮罩 ================= */ mask.onclick = ()=>{

 mask.remove();
 build();

};

/* ================= 测试快捷键 ================= */ document.addEventListener('keydown',e=>{

 if(e.shiftKey && e.key.toLowerCase()==='d'){
   grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
   revealed = 30;
   enableScan();
 }

});

})(); </script>