微件:GGLScratchGame：修订间差异

来自Limbo Wiki Mirror
←上一编辑下一编辑→
可视化wikitext
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
第1行： 第1行：
<noinclude>
<noinclude>
刮刮乐小游戏 Widget
Cyber Scratch Lottery Widget
</noinclude>
</noinclude>


<includeonly>
<includeonly>
<div class="scratch-wrapper">
  <img class="scratch-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"
      alt="lottery bg">


  <img class="scratch-reveal"
<style>
      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"
.ggl-wrapper {
      alt="reveal">
  max-width: 360px;
 
  margin: 30px auto;
   <canvas class="scratch-canvas"></canvas>
   font-family: sans-serif;
</div>
}


<style>
.ggl-ticket {
.scratch-wrapper {
   position: relative;
   position: relative;
   width: 360px;
   width: 360px;
   height: 360px;
   height: 360px;
  background-image: url("https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png");
  background-size: cover;
  border-radius: 16px;
  overflow: hidden;
}
}


.scratch-bg,
/* 刮开后图 */
.scratch-reveal {
.ggl-reveal {
   position: absolute;
   position: absolute;
   inset: 0;
   inset: 0;
   width: 100%;
   background-image: url("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");
  height: 100%;
   background-size: cover;
   pointer-events: none;
}
}


.scratch-canvas {
/* 刮刮乐网格 */
.ggl-grid {
   position: absolute;
   position: absolute;
   inset: 0;
   inset: 0;
   width: 100%;
   display: grid;
   height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
 
/* 每一个刮块 */
.ggl-cell {
  position: relative;
  background-image: 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");
   background-size: cover;
   cursor: pointer;
   cursor: pointer;
}
.ggl-cell.scratched {
  background: transparent;
}
/* 气泡 */
.ggl-bubble {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #0f0;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  white-space: nowrap;
  display: none;
  z-index: 5;
}
.ggl-cell.scratched .ggl-bubble {
  display: block;
}
}
</style>
</style>


<script type="text/javascript">
<div class="ggl-wrapper">
  <div class="ggl-ticket">
    <div class="ggl-reveal"></div>
    <div class="ggl-grid" id="gglGrid"></div>
  </div>
</div>
 
<script>
(function () {
(function () {
  var wrapper = document.currentScript.parentElement;
  var canvas = wrapper.querySelector('.scratch-canvas');
  var ctx = canvas.getContext('2d');


   var size = 360;
const texts = {
   canvas.width = size;
  1: '',
   canvas.height = size;
  2: '(｀・ω・´)📡',
  3: '(≧▽≦)ﾉ',
  4: '(・_・?)',
  5: '(；ﾟДﾟ)',
  6: '你点的是哪里？',
  7: '… … …',
   8: '嘿、哈、别挠',
  9: '你是谁？',
   10: '停下来',
   11: '平安喜乐'
};


  var coverImg = new Image();
let state = 1;
  coverImg.crossOrigin = 'anonymous';
const grid = document.getElementById('gglGrid');
  coverImg.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';


  coverImg.onload = function () {
for (let i = 0; i < 30; i++) {
    ctx.drawImage(coverImg, 0, 0, size, size);
  const cell = document.createElement('div');
   };
   cell.className = 'ggl-cell';


   var scratching = false;
   const bubble = document.createElement('div');
  bubble.className = 'ggl-bubble';
  bubble.textContent = texts[state];


   function getPos(e) {
   cell.appendChild(bubble);
    var rect = canvas.getBoundingClientRect();
    var p = e.touches ? e.touches[0] : e;
    return {
      x: p.clientX - rect.left,
      y: p.clientY - rect.top
    };
  }


   function start(e) {
   cell.onclick = () => {
     scratching = true;
     if (cell.classList.contains('scratched')) return;
    e.preventDefault();
  }


  function move(e) {
     cell.classList.add('scratched');
     if (!scratching) return;
     bubble.textContent = texts[state];
    e.preventDefault();
    var p = getPos(e);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
     ctx.arc(p.x, p.y, 18, 0, Math.PI * 2);
    ctx.fill();
  }


  function end() {
    if (state < 11) state++;
    scratching = false;
   };
   }


   canvas.addEventListener('mousedown', start);
   grid.appendChild(cell);
  canvas.addEventListener('mousemove', move);
}
  canvas.addEventListener('mouseup', end);
  canvas.addEventListener('mouseleave', end);


  canvas.addEventListener('touchstart', start);
  canvas.addEventListener('touchmove', move);
  canvas.addEventListener('touchend', end);
})();
})();
</script>
</script>
</includeonly>
</includeonly>

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

Cyber Scratch Lottery Widget


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