微件:Test:修订间差异
无编辑摘要 |
无编辑摘要 标签:(旧)WikiEditor |
||
| 第1行: | 第1行: | ||
<div class="ggl-root" id="ggl-root"> | |||
<!-- 初始化遮罩 --> | |||
<div class="ggl-mask" id="ggl-mask"> | |||
<button class="ggl-start-btn">来一张彩票…<br>…不,三张吧</button> | |||
</div> | |||
<!-- 顶部 --> | |||
<div class="ggl-top"> | |||
<div class="ggl-rule"> | |||
刮开奖券 · 在整张刮完后交由bot扫描<br> | |||
刮出数字即能获得对应额度的data<br> | |||
当“平”“安”“喜”“乐”四个字连城一条线时,可再获得一张刮刮卡<br> | |||
看不懂也没关系!bot会告诉你结果! | |||
</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"></button> | |||
<div class="ggl-mascot"></div> | |||
<div class="ggl-bubble"></div> | |||
<div class="ggl-controls"> | |||
<button id="ggl-scan">扫描结果</button> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 结尾容器(默认隐藏) --> | |||
<div id="ggl-ending" style="display:none;"> | |||
== 收藏品 == | |||
{|class="mw-collapsible mw-collapsed wikitable" | |||
!六世恶言 | |||
|- | |||
|<poem> | |||
收集时间:<000/00/00> | |||
保管单位:000 | |||
等级:- | |||
收藏品应该是这样写的对吧( | |||
</poem> | |||
|} | |||
</div> | |||
<style> | |||
.ggl-root{width:375px;margin:auto;font-family:sans-serif;position:relative} | |||
.ggl-mask{position:absolute;inset:0;background:#000d;z-index:99;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{display:grid;width:100%;height:100%;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%} | |||
.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%;left:2%; | |||
width:48%;height:10%; | |||
background:transparent;border:none | |||
} | |||
</style> | |||
<script> | |||
(function(){ | (function(){ | ||
| 第224行: | 第323行: | ||
})(); | })(); | ||
</script> | |||
2026年2月2日 (一) 22:13的版本
<button class="ggl-start-btn">来一张彩票…
…不,三张吧</button>
刮开奖券 · 在整张刮完后交由bot扫描
刮出数字即能获得对应额度的data
当“平”“安”“喜”“乐”四个字连城一条线时,可再获得一张刮刮卡
看不懂也没关系!bot会告诉你结果!
剩余彩票:— 张 可提现 DATA:—
<img class="ggl-bg"
src="
">
<button class="ggl-redeem-hit" id="ggl-redeem-hit"></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:99;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{display:grid;width:100%;height:100%;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("
") 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%} .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%;left:2%; width:48%;height:10%; background:transparent;border:none
} </style>
<script> (function(){
/* ===== DOM ===== */ const grid = document.querySelector('.ggl-grid'); const bubble = document.querySelector('.ggl-bubble'); const mascot = document.querySelector('.ggl-mascot'); const scan = document.getElementById('ggl-scan'); const leftEl = document.getElementById('ggl-left'); const dataEl = document.getElementById('ggl-data'); const mask = document.getElementById('ggl-mask'); const redeem = document.getElementById('ggl-redeem-hit');
const OPEN = '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';
/* ===== 11 张剧情票(原样) ===== */ const TICKETS = [
{left:2,data:0,mascot:,bubble:'你好。',onScan:'扫描完成:未检测到异常。',onRedeem:'点击兑奖区将作废本票。',rewards:{12:'DATA'}},
{left:1,data:1,mascot:'(^▽^)ノ',bubble:'第一张,只中了 DATA。',onScan:'扫描结果:DATA ×1',onRedeem:'兑奖操作不可逆。',rewards:{1:'连',3:'着',16:'四',19:'个'}},
{left:2,data:2,mascot:'(ノ◕ヮ◕)ノ',bubble:'连成了一条线。',onScan:'检测到异常排列,追加机会。',onRedeem:'系统记录兑奖请求。',rewards:{1:'平',2:'安',3:'喜',4:'乐'}},
{left:2,data:4,mascot:'(^▽^)',bubble:'中奖了。',onScan:'扫描完成:DATA 2MB',onRedeem:'兑奖成功。',rewards:{8:'DATA'}},
{left:2,data:5,mascot:'(・_・)',bubble:'什么都没有。',onScan:'扫描完成:空。',onRedeem:'无可兑奖内容。',rewards:{}},
{left:1,data:5,mascot:'(;゚Д゚)',bubble:'好像哪里不对。',onScan:'扫描警告:结构异常。',onRedeem:'请求被拒绝。',rewards:{}},
{left:0,data:5,mascot:,bubble:'什么都没有。',onScan:'扫描完成:无数据。',onRedeem:'兑奖无效。',rewards:{}},
{left:0,data:7,mascot:'...',bubble:'▒▓░▒▓▒▓',onScan:'▒▓░▒▓▒▓▒▓',onRedeem:'▒▓░▒▓▒▓',rewards:{3:'DATA',18:'DATA'}},
{left:1,data:'—',mascot:,bubble:'哦 嗯 嘿 哈',onScan:'扫描结果:DATA 溢出。',onRedeem:'兑奖接口未响应。',rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA']))},
/* 第十张 */
{left:0,data:'—',mascot:,bubble:'你是谁?',onScan:'扫描中……',rewards:{}},
/* 第十一张 */
{left:'▒▓░▒▓▒▓',data:'▒▓░▒▓▒▓',mascot:'平安喜乐',bubble:'你知道的太多了。',onScan:'权限越界。',final:true,rewards:{}}
];
let idx = 0; let revealed = 0; let scanned = false;
/* ===== 第十张专用状态 ===== */ let alertTimer = null; let redeemModalLock = false;
/* ===== 渐隐动画(原样保留) ===== */ function fadeOutCover(cover, done){
const start = performance.now(); const duration = 450;
cover.style.pointerEvents = 'none'; cover.style.willChange = 'clip-path,opacity';
function frame(now){
const p = Math.min((now - start) / duration, 1) * 100;
cover.style.clipPath = `
polygon(
0% ${100 - p}%,
${p}% 100%,
100% 100%,
100% 0%,
0% 0%
)
`;
cover.style.opacity = 1 - p / 100;
if(p < 100){
requestAnimationFrame(frame);
}else{
cover.style.display = 'none';
cover.style.clipPath = ;
cover.style.opacity = ;
cover.style.pointerEvents = ;
cover.style.willChange = ;
done && done();
}
}
requestAnimationFrame(frame);
}
/* ===== 构建票(原样) ===== */ function build(){
const t = TICKETS[idx]; grid.innerHTML = ; revealed = 0; scanned = false;
leftEl.textContent = t.left; dataEl.textContent = t.data; mascot.textContent = t.mascot || ; bubble.textContent = t.bubble || ;
scan.textContent = '扫描结果';
scan.classList.remove('active');
for(let i=0;i<30;i++){
const c = document.createElement('div');
c.className = 'ggl-cell';
c.innerHTML = `
<img src="${OPEN}">
`;
const cover = c.querySelector('.ggl-cover');
cover.onclick = ()=>{
if(c.dataset.done) return;
c.dataset.done = 1;
fadeOutCover(cover, ()=>{
if(++revealed === 30){
scan.classList.add('active');
}
});
};
grid.appendChild(c); }
}
/* ===== 第十张:非阻塞无限 alert ===== */ function startInfiniteAlert(){
if(alertTimer) return; const TEXT = '【越界访问】'; // 你可自行替换
function tick(){
alert(TEXT);
alertTimer = setTimeout(tick, 200);
}
tick();
}
/* ===== 第十张:兑奖模态(三阶段) ===== */ function showRedeemModal(){
if(redeemModalLock) return; redeemModalLock = true;
const overlay = document.createElement('div');
overlay.style.cssText = `
position:absolute;inset:0;
background:rgba(0,0,0,.65);
z-index:999;
display:flex;
align-items:center;
justify-content:center;
`;
const box = document.createElement('div');
box.style.cssText = `
background:#fff;
padding:20px;
width:70%;
text-align:center;
font-size:14px;
`;
box.textContent = '无法兑奖';
overlay.appendChild(box);
document.querySelector('.ggl-ticket').appendChild(overlay);
setTimeout(()=>{
box.innerHTML = `
`;
const btn = document.createElement('button');
btn.textContent = '确定';
btn.style.marginTop = '12px';
btn.onclick = ()=>{
overlay.remove();
redeemModalLock = false;
idx++;
build();
};
box.appendChild(btn);
}, 2200);
}
/* ===== 扫描 ===== */ scan.onclick = ()=>{
if(!scan.classList.contains('active')) return;
/* 第十张扫描 → 无限 alert */
if(idx === 9 && revealed === 30){
startInfiniteAlert();
return;
}
if(!scanned){
scanned = true;
if(TICKETS[idx].onScan) bubble.textContent = TICKETS[idx].onScan;
scan.textContent = '再来一张';
if(TICKETS[idx].final){
document.body.style.filter = 'invert(1)';
setTimeout(()=>location.href='/index.php?title=六世恶言之一',1200);
}
return;
}
idx++; if(idx < TICKETS.length) build();
};
/* ===== 兑奖 ===== */ redeem.onclick = ()=>{
if(idx === 9 && revealed === 30){
showRedeemModal();
return;
}
const t = TICKETS[idx];
if(t.onRedeem) bubble.textContent = t.onRedeem;
};
/* ===== 初始遮罩 ===== */ 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;
scan.classList.add('active');
}
});
})(); </script>
