微件:GGLScratchGame：修订间差异

来自Limbo Wiki Mirror
←上一编辑下一编辑→
可视化wikitext
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
第107行： 第107行：
(function(){
(function(){


const grid = document.querySelector('.ggl-grid');
/* ================== DOM ================== */
const bubble = document.querySelector('.ggl-bubble');
const grid     = document.querySelector('.ggl-grid');
const mascot = document.querySelector('.ggl-mascot');
const bubble   = document.querySelector('.ggl-bubble');
const scanBtn = document.getElementById('ggl-scan');
const mascot   = document.querySelector('.ggl-mascot');
const leftEl = document.getElementById('ggl-left');
const scanBtn   = document.getElementById('ggl-scan');
const mask = document.getElementById('ggl-mask');
const leftEl   = document.getElementById('ggl-left');
const mask     = document.getElementById('ggl-mask');
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 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';
 
/* ================== 剧情彩票定义 ================== */
/*
left    : 顶部显示剩余张数（写死）
mascot  : 吉祥物文本（你要换黑色已在 CSS）
bubble  : 气泡文本
lock    : true = 不能刮，但允许扫描
rewards : { 格子索引: 奖项内容 }
*/
const TICKETS = [
const TICKETS = [
   { left:3, mascot:'', bubble:'你好！', rewards:{12:'DATA'} },
   { left:3, mascot:'', bubble:'你好。', rewards:{ 12:'DATA' } },
   { left:2, mascot:'(＾▽＾)ﾉ', bubble:'第一张，只中了 DATA。', rewards:{1:'连',3:'着',16:'四',19:'个'} },
   { left:2, mascot:'(＾▽＾)ﾉ', bubble:'第一张，只中了 DATA。', rewards:{1:'连',3:'着',16:'四',19:'个'} },
   { left:3, mascot:'(ﾉ◕ヮ◕)ﾉ', bubble:'连着刮出了四个字！', rewards:{8:'DATA',14:'🎟'} },
   { left:3, mascot:'(ﾉ◕ヮ◕)ﾉ', bubble:'连着刮出了四个字！', rewards:{8:'DATA',14:'🎟'} },
第127行： 第139行：
   { left:2, mascot:'', bubble:'哦 嗯 嘿 哈', rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA'])) },
   { left:2, mascot:'', bubble:'哦 嗯 嘿 哈', rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA'])) },
   { left:1, mascot:'', bubble:'你是谁？', rewards:{} },
   { left:1, mascot:'', bubble:'你是谁？', rewards:{} },
  /* 倒数第二张：锁票，但可扫描 */
   { left:0, mascot:'', bubble:'停下来。', lock:true, rewards:{} },
   { left:0, mascot:'', bubble:'停下来。', lock:true, rewards:{} },
   { left:0, mascot:'平安喜乐', bubble:'你知道的太多了。', rewards:{} }
   { left:0, mascot:'平安喜乐', bubble:'你知道的太多了。', rewards:{} }
];
];


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


/* ================== 构建彩票 ================== */
function build(){
function build(){
   const t = TICKETS[index];
   const t = TICKETS[index];
   grid.innerHTML='';
   grid.innerHTML = '';
   revealed=0;
   revealed = 0;
  scanBtn.classList.remove('active');


   leftEl.textContent = t.left;
   leftEl.textContent = t.left;
   mascot.textContent = t.mascot||'';
   mascot.textContent = t.mascot || '';
   bubble.textContent = t.bubble||'';
   bubble.textContent = t.bubble || '';
 
  scanBtn.classList.remove('active');


   for(let i=0;i<30;i++){
   for(let i=0;i<30;i++){
     const cell=document.createElement('div');
     const cell = document.createElement('div');
     cell.className='ggl-cell';
     cell.className = 'ggl-cell';
     cell.innerHTML=`
     cell.innerHTML = `
       <img src="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">
       <img src="${OPEN_IMG}">
       <div class="ggl-reward">${t.rewards?.[i]||''}</div>
       <div class="ggl-reward">${t.rewards?.[i] || ''}</div>
       <div class="ggl-cover"></div>
       <div class="ggl-cover" style="background-image:url('${COVER_IMG}')"></div>
     `;
     `;
     const cover=cell.querySelector('.ggl-cover');
 
     const cover = cell.querySelector('.ggl-cover');
 
     if(!t.lock){
     if(!t.lock){
       cover.onclick=()=>{
       cover.onclick = ()=>{
         if(cell.dataset.done)return;
         if(cell.dataset.done) return;
         cell.dataset.done=1;
         cell.dataset.done = 1;
         cover.style.display='none';
         cover.style.display = 'none';
         revealed++;
         revealed++;
         if(revealed===30)scanBtn.classList.add('active');
         if(revealed === 30){
          scanBtn.classList.add('active');
        }
       };
       };
    }else{
      cover.style.cursor = 'not-allowed';
     }
     }
     grid.appendChild(cell);
     grid.appendChild(cell);
  }
  /* lock 票：直接允许扫描 */
  if(t.lock){
    scanBtn.classList.add('active');
   }
   }
}
}


/* ===== 扫描 ===== */
/* ================== 扫描 ================== */
scanBtn.onclick=()=>{
scanBtn.onclick = ()=>{
   if(!scanBtn.classList.contains('active'))return;
   if(!scanBtn.classList.contains('active')) return;
   index++;
   index++;
   if(index>=TICKETS.length)return;
   if(index >= TICKETS.length) return;
   if(index===11){
   build();
    document.body.style.filter='invert(1)';
    setTimeout(()=>location.href='/index.php?title=六世恶言之一',1200);
  }else{
    build();
  }
};
};


/* ===== 兑奖区点击 ===== */
/* ================== 兑奖区提示 ================== */
redeemHit.onclick = () => {
redeemHit.onclick = ()=>{
   bubble.textContent = '兑奖区刮了会无效哦！';
   alert(' 提示：兑奖区刮开将视为无效哦！');
};
};


/* ===== 开始 ===== */
/* ================== 初始化遮罩 ================== */
mask.onclick=()=>{
mask.onclick = ()=>{
   mask.remove();
   mask.remove();
   build();
   build();
};
};
/* ================== 测试快捷（隐藏） ================== */
/* Shift + D：一键完成 30 格 */
document.addEventListener('keydown',e=>{
  if(e.shiftKey && e.key.toLowerCase()==='d'){
    grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
    revealed = 30;
    scanBtn.classList.add('active');
    console.log('[GGL] 测试模式：已完成全部格子');
  }
});


})();
})();
</script>
</script>

2026年2月1日 (日) 20:51的版本

   <button class="ggl-start-btn">开始抽奖</button>
刮开奖券 · 每张需点完 30 格才能扫描
剩余彩票：— 张
     <img class="ggl-bg"
       src="%E5%9B%BE%E7%89%871.png">

     <button class="ggl-redeem-hit" id="ggl-redeem-hit"
       title="兑奖区"></button>

       <button id="ggl-scan">扫描结果</button>

<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("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%}

  1. ggl-scan{opacity:.3}
  2. ggl-scan.active{opacity:1}

/* ===== 兑奖区透明按钮 ===== */ /* ⚠️ 这里是“大致位置”，你之后可以微调 */ .ggl-redeem-hit { 

   position: absolute;
   bottom: 1%;
   width: 48%;
   height: 10%;
   background: transparent;
   border: none;
   cursor: pointer;

} </style>

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

/* ================== 剧情彩票定义 ================== */ /* 

left    : 顶部显示剩余张数（写死）
mascot  : 吉祥物文本（你要换黑色已在 CSS）
bubble  : 气泡文本
lock    : true = 不能刮，但允许扫描
rewards : { 格子索引: 奖项内容 }
  • /

const TICKETS = [ 

 { left:3, mascot:, bubble:'你好。', rewards:{ 12:'DATA' } },
 { left:2, mascot:'(＾▽＾)ﾉ', bubble:'第一张，只中了 DATA。', rewards:{1:'连',3:'着',16:'四',19:'个'} },
 { left:3, mascot:'(ﾉ◕ヮ◕)ﾉ', bubble:'连着刮出了四个字！', rewards:{8:'DATA',14:'🎟'} },
 { left:3, mascot:'(＾▽＾)', bubble:'中了刮刮乐！DATA 2MB', rewards:{} },
 { left:3, mascot:'(・_・)', bubble:'什么都没有。', rewards:{22:'DATA'} },
 { left:2, mascot:'(；ﾟДﾟ)', bubble:'好像哪里不对。', rewards:{} },
 { left:1, mascot:, bubble:'什么都没有。', rewards:{6:'🎟'} },
 { left:2, mascot:'...', bubble:'▒▓░▒▓▒▓', rewards:{3:'DATA',18:'DATA'} },
 { left:2, mascot:, bubble:'哦 嗯 嘿 哈', rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA'])) },
 { left:1, mascot:, bubble:'你是谁？', rewards:{} },

 /* 倒数第二张：锁票，但可扫描 */
 { left:0, mascot:, bubble:'停下来。', lock:true, rewards:{} },

 { left:0, mascot:'平安喜乐', bubble:'你知道的太多了。', rewards:{} }

];

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

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

 const t = TICKETS[index];
 grid.innerHTML = ;
 revealed = 0;

 leftEl.textContent = t.left;
 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){
         scanBtn.classList.add('active');
       }
     };
   }else{
     cover.style.cursor = 'not-allowed';
   }

   grid.appendChild(cell);
 }

 /* lock 票：直接允许扫描 */
 if(t.lock){
   scanBtn.classList.add('active');
 }

}

/* ================== 扫描 ================== */ scanBtn.onclick = ()=>{ 

 if(!scanBtn.classList.contains('active')) return;
 index++;
 if(index >= TICKETS.length) return;
 build();

};

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

 alert(' 提示：兑奖区刮开将视为无效哦！');

};

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

 mask.remove();
 build();

};

/* ================== 测试快捷（隐藏） ================== */ /* Shift + D：一键完成 30 格 */ document.addEventListener('keydown',e=>{ 

 if(e.shiftKey && e.key.toLowerCase()==='d'){
   grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
   revealed = 30;
   scanBtn.classList.add('active');
   console.log('[GGL] 测试模式：已完成全部格子');
 }

});

})(); </script>

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