微件:GGLScratchGame：修订间差异

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


   <!-- 彩票主背景 -->
   <!-- 彩票主背景 -->
第30行： 第34行：
   font-family: sans-serif;
   font-family: sans-serif;
}
}
.ggl-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.ggl-start-btn {
  font-size: 18px;
  padding: 12px 24px;
  cursor: pointer;
}


.ggl-bg {
.ggl-bg {
第43行： 第64行：
   height: 53%;
   height: 53%;
}
}


.ggl-grid {
.ggl-grid {
第108行： 第130行：
   const mascot = document.querySelector('.ggl-mascot');
   const mascot = document.querySelector('.ggl-mascot');
   const scanBtn = document.getElementById('ggl-scan');
   const scanBtn = document.getElementById('ggl-scan');
  const overlay = document.querySelector('.ggl-overlay');
  const startBtn = document.querySelector('.ggl-start-btn');


   let currentTicket = 0;
   let currentTicket = 0;
第113行： 第137行：
   let ticketsLeft = 3;
   let ticketsLeft = 3;
   let dataCount = 0;
   let dataCount = 0;
  let started = false;


   const TICKETS = [
   const TICKETS = [
     { mascot:"", intro:"点击中间按钮，来一张彩票。" },
     { mascot:"", text:"点击开始，抽一张彩票。" },
     { mascot:"(＾▽＾)", intro:"第一次总是 Data。" },
     { mascot:"(＾▽＾)", text:"第一次总会中点 Data。" },
     { mascot:"(・∀・)", intro:"连着刮，会有不一样的结果哦。" },
     { mascot:"(・∀・)", text:"连着点，会触发规则哦。" },
     { mascot:"(ﾉ◕ヮ◕)ﾉ", intro:"中奖了！Data 2MB！" },
     { mascot:"(ﾉ◕ヮ◕)ﾉ", text:"中奖了！Data 2MB！" },
     { mascot:"(・_・)", intro:"……刚才不该那样刮的。" },
     { mascot:"(・_・)", text:"……刚才那样不太对。" },
     { mascot:"(；ﾟДﾟ)", intro:"好像哪里不对。" },
     { mascot:"(；ﾟДﾟ)", text:"好像哪里不对劲。" },
     { mascot:"", intro:"什么都没有。" },
     { mascot:"", text:"什么都没有。" },
     { mascot:"...", intro:"���▒▒▒▒▒▒" },
     { mascot:"...", text:"���▒▒▒▒▒▒" },
     { mascot:"", intro:"哦、嗯、嘿、哈。" },
     { mascot:"", text:"你是谁？" },
     { mascot:"", intro:"停下来。" },
     { mascot:"", text:"停下来。" },
     { mascot:"平安喜乐", intro:"你知道的太多了。" }
     { mascot:"平安喜乐", text:"你知道的太多了。" }
   ];
   ];


第135行： 第160行：
     const ticket = TICKETS[currentTicket];
     const ticket = TICKETS[currentTicket];
     mascot.textContent = ticket.mascot || "";
     mascot.textContent = ticket.mascot || "";
     bubble.textContent = ticket.intro || "";
     bubble.textContent = ticket.text || "";


     for (let i = 0; i < 30; i++) {
     for (let i = 0; i < 30; i++) {
       const cell = document.createElement('div');
       const cell = document.createElement('button');
       cell.className = 'ggl-cell';
       cell.className = 'ggl-cell';
       cell.innerHTML = `
       cell.textContent = "■";
        <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">
       cell.dataset.revealed = "0";
        <canvas></canvas>
      `;
       grid.appendChild(cell);
      initScratch(cell);
    }
  }


  function initScratch(cell) {
      cell.addEventListener('click', () => {
    const canvas = cell.querySelector('canvas');
        if (cell.dataset.revealed === "1") return;
    const ctx = canvas.getContext('2d');
        cell.dataset.revealed = "1";
        cell.textContent = "";


    requestAnimationFrame(() => {
        revealedCount++;
      canvas.width = cell.clientWidth;
      canvas.height = cell.clientHeight;
      const cover = new Image();
      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";
      cover.onload = () => ctx.drawImage(cover, 0, 0, canvas.width, canvas.height);
    });


    let down = false;
        if (revealedCount === 30) {
    canvas.addEventListener('pointerdown', () => down = true);
          scanBtn.classList.add("active");
    canvas.addEventListener('pointerup', () => down = false);
          bubble.textContent = "已全部揭示，可以扫描。";
    canvas.addEventListener('pointerleave', () => down = false);
        }
      });


    canvas.addEventListener('pointermove', e => {
       grid.appendChild(cell);
       if (!down) return;
     }
      const r = canvas.getBoundingClientRect();
      ctx.globalCompositeOperation = 'destination-out';
      ctx.beginPath();
      ctx.arc(e.clientX - r.left, e.clientY - r.top, 18, 0, Math.PI * 2);
      ctx.fill();
    });
 
    canvas.addEventListener('pointerup', () => {
      if (cell.dataset.revealed) return;
      cell.dataset.revealed = 1;
      revealedCount++;
      if (revealedCount === 30) {
        scanBtn.classList.add("active");
        bubble.textContent = "刮完了，可以扫描了。";
      }
     });
   }
   }


   scanBtn.addEventListener('click', () => {
   scanBtn.addEventListener('click', () => {
     if (!scanBtn.classList.contains('active')) {
     if (!scanBtn.classList.contains('active')) {
       bubble.textContent = "还没刮完。";
       bubble.textContent = "请先完成当前彩票。";
       return;
       return;
     }
     }
第201行： 第200行：
     if (currentTicket === 10) {
     if (currentTicket === 10) {
       document.body.style.filter = "invert(1)";
       document.body.style.filter = "invert(1)";
      bubble.style.background = "#000";
      bubble.style.color = "red";
      mascot.textContent = "平安喜乐";
       bubble.textContent = "你知道的太多了。";
       bubble.textContent = "你知道的太多了。";
       setTimeout(() => {
       setTimeout(() => {
         location.href = "/index.php?title=六世恶言之一";
         location.href = "/index.php?title=六世恶言之一";
       }, 1200);
       }, 1500);
       return;
       return;
     }
     }
第212行： 第215行：
   });
   });


   initTicket();
   startBtn.addEventListener('click', () => {
    overlay.style.display = "none";
    started = true;
    initTicket();
  });


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

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

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

 <img class="ggl-bg"
      src="180px-%E5%9B%BE%E7%89%871.png">
(＾▽＾)
   <button id="ggl-scan">扫描结果</button>

<style> .ggl-root { 

 position: relative;
 width: 375px;
 margin: auto;
 aspect-ratio: 1075 / 1911;
 font-family: sans-serif;

}

.ggl-overlay { 

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

}

.ggl-start-btn { 

 font-size: 18px;
 padding: 12px 24px;
 cursor: pointer;

}


.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: 6px;
 width: 100%;
 height: 100%;

}

.ggl-cell { 

 position: relative;
 overflow: hidden;

}

.ggl-cell img, .ggl-cell canvas { 

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;

}

.ggl-mascot { 

 position: absolute;
 left: 6%;
 top: 110%;
 bottom: 8%;
 font-size: 22px;

}

.ggl-bubble { 

 position: absolute;
 left: 6%;
 top: 100%;
 bottom: 13%;
 width: 60%;
 min-height: 40px;
 background: rgba(255,255,255,.9);
 padding: 6px;
 font-size: 14px;

}

.ggl-controls { 

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

}

  1. ggl-scan {
 opacity: .3;
 top: 110%;

}

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

} </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 startBtn = document.querySelector('.ggl-start-btn');

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

 const TICKETS = [
   { mascot:"", text:"点击开始，抽一张彩票。" },
   { mascot:"(＾▽＾)", text:"第一次总会中点 Data。" },
   { mascot:"(・∀・)", text:"连着点，会触发规则哦。" },
   { mascot:"(ﾉ◕ヮ◕)ﾉ", text:"中奖了！Data 2MB！" },
   { mascot:"(・_・)", text:"……刚才那样不太对。" },
   { mascot:"(；ﾟДﾟ)", text:"好像哪里不对劲。" },
   { mascot:"", text:"什么都没有。" },
   { mascot:"...", text:"���▒▒▒▒▒▒" },
   { mascot:"", text:"你是谁？" },
   { mascot:"", text:"停下来。" },
   { mascot:"平安喜乐", text:"你知道的太多了。" }
 ];

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

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

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

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

       revealedCount++;

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

     grid.appendChild(cell);
   }
 }

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

   if (currentTicket === 9) {
     bubble.textContent = "停下来。";
     currentTicket++;
     initTicket();
     return;
   }

   if (currentTicket === 10) {
     document.body.style.filter = "invert(1)";
     bubble.style.background = "#000";
     bubble.style.color = "red";
     mascot.textContent = "平安喜乐";
     bubble.textContent = "你知道的太多了。";

     setTimeout(() => {
       location.href = "/index.php?title=六世恶言之一";
     }, 1500);
     return;
   }

   currentTicket++;
   initTicket();
 });

 startBtn.addEventListener('click', () => {
   overlay.style.display = "none";
   started = true;
   initTicket();
 });

})(); </script>

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