微件:GGLScratchGame：修订间差异

来自Limbo Wiki Mirror
←上一编辑下一编辑→
可视化wikitext
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
第1行： 第1行：
<div class="ggl-root">
<div class="ggl-frame">


  <!-- 初始化遮罩 -->
   <div class="ggl-overlay">
   <div class="ggl-overlay">
     <button class="ggl-start-btn">开始抽奖</button>
     <button class="ggl-start-btn">开始抽奖</button>
   </div>
   </div>


   <!-- 彩票主背景 -->
   <!-- 顶部信息 -->
   <img class="ggl-bg"
   <div class="ggl-top">
      src="https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png">
    <div class="ggl-rules">
      点击灰色区域揭示内容，全部揭示后才能扫描。
    </div>
    <div class="ggl-tickets-left">
      剩余彩票：<span id="ggl-ticket-count">3</span>
    </div>
  </div>
 
  <!-- 彩票主体 -->
  <div class="ggl-root">
 
    <img class="ggl-bg"
        src="https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png">
 
    <!-- 刮奖区 -->
    <div class="ggl-scratch-area">
      <div class="ggl-grid"></div>
    </div>


  <!-- 刮奖区域 -->
    <!-- 吉祥物 -->
  <div class="ggl-scratch-area">
     <div class="ggl-mascot"></div>
     <div class="ggl-grid"></div>
  </div>


  <!-- 吉祥物 -->
    <!-- 气泡 -->
  <div class="ggl-mascot">(＾▽＾)</div>
    <div class="ggl-bubble"></div>


  <!-- 气泡 -->
    <!-- 控制 -->
  <div class="ggl-bubble"></div>
    <div class="ggl-controls">
      <button id="ggl-scan">扫描结果</button>
    </div>


  <!-- 控制区 -->
  <div class="ggl-controls">
    <button id="ggl-scan">扫描结果</button>
   </div>
   </div>
</div>
</div>
<style>
<style>
.ggl-root {
.ggl-frame {
   position: relative;
   max-width: 420px;
   width: 375px;
  margin: 20px auto;
   margin: auto;
  padding: 10px;
   aspect-ratio: 1075 / 1911;
   border: 2px solid #333;
   background: #111;
   color: #eee;
   font-family: sans-serif;
   font-family: sans-serif;
}
}


.ggl-overlay {
/* 顶部 */
   position: absolute;
.ggl-top {
   inset: 0;
   margin-bottom: 8px;
   background: rgba(0,0,0,.85);
}
  display: flex;
.ggl-rules {
  align-items: center;
   font-size: 12px;
   justify-content: center;
   opacity: .8;
   z-index: 99;
}
.ggl-tickets-left {
   font-size: 14px;
   margin-top: 4px;
}
}


.ggl-start-btn {
/* 彩票 */
   font-size: 18px;
.ggl-root {
   padding: 12px 24px;
   position: relative;
   cursor: pointer;
   width: 100%;
   aspect-ratio: 1075 / 1911;
}
}


.ggl-bg {
.ggl-bg {
第57行： 第76行：
}
}


/* 刮奖区 */
.ggl-scratch-area {
.ggl-scratch-area {
   position: absolute;
   position: absolute;
第64行： 第84行：
   height: 53%;
   height: 53%;
}
}


.ggl-grid {
.ggl-grid {
第70行： 第89行：
   grid-template-columns: repeat(5, 1fr);
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(6, 1fr);
   grid-template-rows: repeat(6, 1fr);
   gap: 6px;
   gap: 4px;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
}
}


/* 单格 */
.ggl-cell {
.ggl-cell {
   position: relative;
   position: relative;
   overflow: hidden;
   cursor: pointer;
}
}


.ggl-cell img,
.ggl-cover,
.ggl-cell canvas {
.ggl-reveal {
   position: absolute;
   position: absolute;
   inset: 0;
   inset: 0;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
  pointer-events: none;
}
.ggl-cover {
  z-index: 3;
}
.ggl-reveal {
  z-index: 1;
}
/* 奖项层 */
.ggl-prize {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #000;
  text-align: center;
  pointer-events: none;
}
}


/* 吉祥物 & 气泡 */
.ggl-mascot {
.ggl-mascot {
   position: absolute;
   position: absolute;
   left: 6%;
   left: 6%;
  top: 110%;
   bottom: 8%;
   bottom: 8%;
   font-size: 22px;
   font-size: 20px;
}
}


第99行： 第141行：
   position: absolute;
   position: absolute;
   left: 6%;
   left: 6%;
  top: 100%;
   bottom: 14%;
   bottom: 13%;
   width: 60%;
   width: 60%;
  min-height: 40px;
   background: rgba(255,255,255,.9);
   background: rgba(255,255,255,.9);
  color: #000;
   padding: 6px;
   padding: 6px;
   font-size: 14px;
   font-size: 13px;
}
}


/* 扫描 */
.ggl-controls {
.ggl-controls {
   position: absolute;
   position: absolute;
第116行： 第158行：
#ggl-scan {
#ggl-scan {
   opacity: .3;
   opacity: .3;
  top: 110%;
}
}
#ggl-scan.active {
#ggl-scan.active {
   opacity: 1;
   opacity: 1;
}
/* 遮罩 */
.ggl-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ggl-start-btn {
  padding: 12px 24px;
  font-size: 16px;
}
}
</style>
</style>
<script>
<script>
(function () {
(function () {
第131行： 第187行：
   const scanBtn = document.getElementById('ggl-scan');
   const scanBtn = document.getElementById('ggl-scan');
   const overlay = document.querySelector('.ggl-overlay');
   const overlay = document.querySelector('.ggl-overlay');
   const startBtn = document.querySelector('.ggl-start-btn');
   const ticketCountEl = document.getElementById('ggl-ticket-count');


   let currentTicket = 0;
   let currentTicket = 0;
   let revealedCount = 0;
   let revealed = 0;
   let ticketsLeft = 3;
   let ticketsLeft = 3;
  let dataCount = 0;
  let started = false;


  /* 11 张彩票的数据（示例，可继续细填） */
   const TICKETS = [
   const TICKETS = [
     { mascot:"", text:"点击开始，抽一张彩票。" },
     {
     { mascot:"(＾▽＾)", text:"第一次总会中点 Data。" },
      mascot: "",
    { mascot:"(・∀・)", text:"连着点，会触发规则哦。" },
      bubble: "第一次通常会中点 Data。",
     { mascot:"(ﾉ◕ヮ◕)ﾉ", text:"中奖了！Data 2MB！" },
      prizes: { 12: "Data" }
     { mascot:"(・_・)", text:"……刚才那样不太对。" },
    },
     { mascot:"(；ﾟДﾟ)", text:"好像哪里不对劲。" },
     {
     { mascot:"", text:"什么都没有。" },
      mascot: "(＾▽＾)",
     { mascot:"...", text:"���▒▒▒▒▒▒" },
      bubble: "连着点四个字会有奖励。",
     { mascot:"", text:"你是谁？" },
      prizes: { 3: "Data", 4: "Data", 5: "Data", 6: "Data" }
     { mascot:"", text:"停下来。" },
    },
     { mascot:"平安喜乐", text:"你知道的太多了。" }
     {
      mascot: "(ﾉ◕ヮ◕)ﾉ",
      bubble: "中奖了！Data 2MB。",
      prizes: { 10: "刮刮乐 +1", 15: "Data 2MB" }
    },
     {
      mascot: "(・_・)",
      bubble: "……刚才那样不太对。",
      prizes: {}
    },
     {
      mascot: "(；ﾟДﾟ)",
      bubble: "好像哪里不对。",
      prizes: { 8: "Data" }
    },
     {
      mascot: "",
      bubble: "什么都没有。",
      prizes: {}
    },
     {
      mascot: "...",
      bubble: "▒▒▒▒▒▒▒",
      prizes: { 20: "刮刮乐 +1" }
    },
     {
      mascot: "",
      bubble: "哦嗯嘿哈……别挠我痒痒",
      prizes: { 1: "Data", 2: "刮刮乐 +2" }
    },
    {
      mascot: "",
      bubble: "你是谁？",
      prizes: "ALL_DATA"
    },
     {
      mascot: "",
      bubble: "停下来。",
      lock: true
    },
     {
      mascot: "平安喜乐",
      bubble: "你知道的太多了。",
      end: true
    }
   ];
   ];


   function initTicket() {
   function renderTicket() {
     grid.innerHTML = "";
     grid.innerHTML = "";
     revealedCount = 0;
     revealed = 0;
     scanBtn.classList.remove("active");
     scanBtn.classList.remove("active");


     const ticket = TICKETS[currentTicket];
     const t = TICKETS[currentTicket];
     mascot.textContent = ticket.mascot || "";
     mascot.textContent = t.mascot || "";
     bubble.textContent = ticket.text || "";
     bubble.textContent = t.bubble || "";
    ticketCountEl.textContent = ticketsLeft;


     for (let i = 0; i < 30; i++) {
     for (let i = 0; i < 30; i++) {
       const cell = document.createElement('button');
       const cell = document.createElement('div');
       cell.className = 'ggl-cell';
       cell.className = "ggl-cell";
      cell.textContent = "■";
       cell.dataset.revealed = "0";
       cell.dataset.revealed = "0";
      const prizeText =
        t.prizes === "ALL_DATA" ? "Data" :
        t.prizes[i] || "";
      cell.innerHTML = `
        <img class="ggl-reveal"
            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">
        <div class="ggl-prize">${prizeText}</div>
        <img class="ggl-cover"
            src="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">
      `;


       cell.addEventListener('click', () => {
       cell.addEventListener('click', () => {
         if (cell.dataset.revealed === "1") return;
         if (cell.dataset.revealed === "1") return;
        if (t.lock) return;
         cell.dataset.revealed = "1";
         cell.dataset.revealed = "1";
         cell.textContent = "";
         cell.querySelector('.ggl-cover').style.display = "none";
 
         revealed++;
         revealedCount++;


         if (revealedCount === 30) {
         if (revealed === 30) {
           scanBtn.classList.add("active");
           scanBtn.classList.add("active");
           bubble.textContent = "已全部揭示，可以扫描。";
           bubble.textContent = "已全部揭示，可以扫描。";
第186行： 第298行：


   scanBtn.addEventListener('click', () => {
   scanBtn.addEventListener('click', () => {
     if (!scanBtn.classList.contains('active')) {
     if (!scanBtn.classList.contains("active")) return;
      bubble.textContent = "请先完成当前彩票。";
      return;
    }
 
    if (currentTicket === 9) {
      bubble.textContent = "停下来。";
      currentTicket++;
      initTicket();
      return;
    }


     if (currentTicket === 10) {
     if (TICKETS[currentTicket].end) {
       document.body.style.filter = "invert(1)";
       document.body.style.filter = "invert(1)";
       bubble.style.background = "#000";
       bubble.style.background = "#000";
       bubble.style.color = "red";
       bubble.style.color = "red";
      mascot.textContent = "平安喜乐";
      bubble.textContent = "你知道的太多了。";
       setTimeout(() => {
       setTimeout(() => {
         location.href = "/index.php?title=六世恶言之一";
         location.href = "/index.php?title=六世恶言之一";
第212行： 第311行：


     currentTicket++;
     currentTicket++;
     initTicket();
     if (currentTicket < TICKETS.length) {
      renderTicket();
    }
   });
   });


   startBtn.addEventListener('click', () => {
   document.querySelector('.ggl-start-btn').addEventListener('click', () => {
     overlay.style.display = "none";
     overlay.style.display = "none";
     started = true;
     renderTicket();
    initTicket();
   });
   });


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

2026年2月1日 (日) 19:27的版本

   <button class="ggl-start-btn">开始抽奖</button>

     点击灰色区域揭示内容，全部揭示后才能扫描。

     剩余彩票：3

   <img class="ggl-bg"
        src="180px-%E5%9B%BE%E7%89%871.png">

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

<style> .ggl-frame { 

 max-width: 420px;
 margin: 20px auto;
 padding: 10px;
 border: 2px solid #333;
 background: #111;
 color: #eee;
 font-family: sans-serif;

}

/* 顶部 */ .ggl-top { 

 margin-bottom: 8px;

} .ggl-rules { 

 font-size: 12px;
 opacity: .8;

} .ggl-tickets-left { 

 font-size: 14px;
 margin-top: 4px;

}

/* 彩票 */ .ggl-root { 

 position: relative;
 width: 100%;
 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;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: repeat(6, 1fr);
 gap: 4px;
 width: 100%;
 height: 100%;

}

/* 单格 */ .ggl-cell { 

 position: relative;
 cursor: pointer;

}

.ggl-cover, .ggl-reveal { 

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;

}

.ggl-cover { 

 z-index: 3;

} .ggl-reveal { 

 z-index: 1;

}

/* 奖项层 */ .ggl-prize { 

 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 color: #000;
 text-align: center;
 pointer-events: none;

}

/* 吉祥物 & 气泡 */ .ggl-mascot { 

 position: absolute;
 left: 6%;
 bottom: 8%;
 font-size: 20px;

}

.ggl-bubble { 

 position: absolute;
 left: 6%;
 bottom: 14%;
 width: 60%;
 background: rgba(255,255,255,.9);
 color: #000;
 padding: 6px;
 font-size: 13px;

}

/* 扫描 */ .ggl-controls { 

 position: absolute;
 right: 6%;
 bottom: 8%;

}

  1. ggl-scan {
 opacity: .3;

}

  1. ggl-scan.active {
 opacity: 1;

}

/* 遮罩 */ .ggl-overlay { 

 position: absolute;
 inset: 0;
 background: rgba(0,0,0,.9);
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: center;

}

.ggl-start-btn { 

 padding: 12px 24px;
 font-size: 16px;

} </style> <script> (function () { 

 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 overlay = document.querySelector('.ggl-overlay');
 const ticketCountEl = document.getElementById('ggl-ticket-count');

 let currentTicket = 0;
 let revealed = 0;
 let ticketsLeft = 3;

 /* 11 张彩票的数据（示例，可继续细填） */
 const TICKETS = [
   {
     mascot: "",
     bubble: "第一次通常会中点 Data。",
     prizes: { 12: "Data" }
   },
   {
     mascot: "(＾▽＾)",
     bubble: "连着点四个字会有奖励。",
     prizes: { 3: "Data", 4: "Data", 5: "Data", 6: "Data" }
   },
   {
     mascot: "(ﾉ◕ヮ◕)ﾉ",
     bubble: "中奖了！Data 2MB。",
     prizes: { 10: "刮刮乐 +1", 15: "Data 2MB" }
   },
   {
     mascot: "(・_・)",
     bubble: "……刚才那样不太对。",
     prizes: {}
   },
   {
     mascot: "(；ﾟДﾟ)",
     bubble: "好像哪里不对。",
     prizes: { 8: "Data" }
   },
   {
     mascot: "",
     bubble: "什么都没有。",
     prizes: {}
   },
   {
     mascot: "...",
     bubble: "▒▒▒▒▒▒▒",
     prizes: { 20: "刮刮乐 +1" }
   },
   {
     mascot: "",
     bubble: "哦嗯嘿哈……别挠我痒痒",
     prizes: { 1: "Data", 2: "刮刮乐 +2" }
   },
   {
     mascot: "",
     bubble: "你是谁？",
     prizes: "ALL_DATA"
   },
   {
     mascot: "",
     bubble: "停下来。",
     lock: true
   },
   {
     mascot: "平安喜乐",
     bubble: "你知道的太多了。",
     end: true
   }
 ];

 function renderTicket() {
   grid.innerHTML = "";
   revealed = 0;
   scanBtn.classList.remove("active");

   const t = TICKETS[currentTicket];
   mascot.textContent = t.mascot || "";
   bubble.textContent = t.bubble || "";
   ticketCountEl.textContent = ticketsLeft;

   for (let i = 0; i < 30; i++) {
     const cell = document.createElement('div');
     cell.className = "ggl-cell";
     cell.dataset.revealed = "0";

     const prizeText =
       t.prizes === "ALL_DATA" ? "Data" :
       t.prizes[i] || "";

     cell.innerHTML = `
       <img class="ggl-reveal"
            src="180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg">
${prizeText}
       <img class="ggl-cover"
            src="180px-%E5%88%AE%E5%BC%80%E5%89%8D.png">
     `;

     cell.addEventListener('click', () => {
       if (cell.dataset.revealed === "1") return;
       if (t.lock) return;

       cell.dataset.revealed = "1";
       cell.querySelector('.ggl-cover').style.display = "none";
       revealed++;

       if (revealed === 30) {
         scanBtn.classList.add("active");
         bubble.textContent = "已全部揭示，可以扫描。";
       }
     });

     grid.appendChild(cell);
   }
 }

 scanBtn.addEventListener('click', () => {
   if (!scanBtn.classList.contains("active")) return;

   if (TICKETS[currentTicket].end) {
     document.body.style.filter = "invert(1)";
     bubble.style.background = "#000";
     bubble.style.color = "red";
     setTimeout(() => {
       location.href = "/index.php?title=六世恶言之一";
     }, 1500);
     return;
   }

   currentTicket++;
   if (currentTicket < TICKETS.length) {
     renderTicket();
   }
 });

 document.querySelector('.ggl-start-btn').addEventListener('click', () => {
   overlay.style.display = "none";
   renderTicket();
 });

})(); </script>

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