微件:GGLScratchGame：修订间差异

来自Limbo Wiki Mirror
←上一编辑下一编辑→
可视化wikitext
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
Gaoice​（留言 | 贡献）
行政员、​界面管理员、​管理员
951次编辑
无编辑摘要
标签：（旧）WikiEditor
第488行： 第488行：
// ==================== 配置与数据 ====================
// ==================== 配置与数据 ====================
const CONFIG = {
const CONFIG = {
    // 图片设置（可选）
    useImages: true,  // 改为 true 以使用自定义背景图
    bgImage: 'https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png',      // 背景图路径（1075×1911 px）
    coverImage: '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',    // 刮开前覆盖图（169×169 px）
    revealImage: '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',  // 刮开后揭示图（169×169 px）
   
    // 布局配置
     bg: 'lottery-bg.png',
     bg: 'lottery-bg.png',
     area: { x: 114, y: 450, width: 846, height: 1020 },
     area: { x: 114.5, y: 450, width: 846, height: 1020 },
     cols: 5,
     cols: 5,
     rows: 6,
     rows: 6,
第688行： 第695行：
      
      
     // 创建彩票HTML
     // 创建彩票HTML
     const ticketHTML = `
     let ticketHTML;
        <div class="lottery-ticket-wrapper">
    if (CONFIG.useImages) {
            <canvas id="lotteryCanvas" style="display: block; width: 100%; border-radius: 4px;"></canvas>
        // 图片模式：使用背景图
            <div class="scratchable-area">
        ticketHTML = `
                <div class="tile-grid" id="tileGrid"></div>
            <div class="lottery-ticket-wrapper">
                <img id="bgImage" src="" style="display: block; width: 100%; border-radius: 4px; max-width: 100%; height: auto;">
                <div class="scratchable-area">
                    <div class="tile-grid" id="tileGrid"></div>
                </div>
             </div>
             </div>
         </div>
         `;
    `;
    } else {
        // Canvas 模式：使用 Canvas 绘制（默认）
        ticketHTML = `
            <div class="lottery-ticket-wrapper">
                <canvas id="lotteryCanvas" style="display: block; width: 100%; border-radius: 4px;"></canvas>
                <div class="scratchable-area">
                    <div class="tile-grid" id="tileGrid"></div>
                </div>
            </div>
        `;
    }
      
      
     elements.ticketContainer.insertAdjacentHTML('beforeend', ticketHTML);
     elements.ticketContainer.insertAdjacentHTML('beforeend', ticketHTML);
      
      
     const canvas = document.getElementById('lotteryCanvas');
     if (CONFIG.useImages) {
    const ctx = canvas.getContext('2d');
        // 图片模式：加载背景图
        const bgImg = document.getElementById('bgImage');
        // 处理 MediaWiki File: 格式路径
        const imageName = CONFIG.bgImage.replace('File:', '').replace('file:', '');
        // 构造 MediaWiki 图片 URL
        bgImg.src = `/w/images/thumb/${imageName}/thumb-1075px-${imageName}`;
        bgImg.onerror = () => {
            // 如果图片加载失败，回退到 Canvas 模式
            logDebug('Background image failed to load, falling back to canvas');
            CONFIG.useImages = false;
            renderTicket();
        };
        bgImg.onload = () => {
            setupTileGrid(ticket);
            logDebug('Background image loaded successfully');
        };
    } else {
        // Canvas 模式：使用原有的 Canvas 绘制
        const canvas = document.getElementById('lotteryCanvas');
        const ctx = canvas.getContext('2d');
       
        // 设置 canvas 尺寸（宽高比按照背景图）
        const containerWidth = elements.ticketContainer.offsetWidth - 20;
        const aspectRatio = 1075 / 1911;
        canvas.width = containerWidth;
        canvas.height = containerWidth / aspectRatio;
       
        // 绘制背景色（灰白色作为背景）
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
       
        // 绘制黄色刮奖区域
        const areaLeft = (CONFIG.area.x / 1075) * canvas.width;
        const areaTop = (CONFIG.area.y / 1911) * canvas.height;
        const areaWidth = (CONFIG.area.width / 1075) * canvas.width;
        const areaHeight = (CONFIG.area.height / 1911) * canvas.height;
       
        ctx.fillStyle = '#ffd700';
        ctx.fillRect(areaLeft, areaTop, areaWidth, areaHeight);
       
        // 绘制黑色分割线
        ctx.strokeStyle = '#ccc';
        ctx.lineWidth = 2;
        ctx.strokeRect(areaLeft, areaTop, areaWidth, areaHeight);
       
        setupTileGrid(ticket);
    }
      
      
     // 设置 canvas 尺寸（宽高比按照背景图）
     elements.controlsRow.style.display = 'flex';
    const containerWidth = elements.ticketContainer.offsetWidth - 20;
     updateMascotMessage();
     const aspectRatio = 1075 / 1911;
}
     canvas.width = containerWidth;
 
     canvas.height = containerWidth / aspectRatio;
function setupTileGrid(ticket) {
     const tileGrid = document.getElementById('tileGrid');
     const container = elements.ticketContainer;
      
      
     // 绘制背景色（灰白色作为背景）
     // 计算刮奖区域的实际宽度
     ctx.fillStyle = '#f0f0f0';
     let areaWidth;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     if (CONFIG.useImages) {
   
        // 使用图片模式时，从背景图宽度计算
    // 绘制黄色刮奖区域
        const bgImg = document.getElementById('bgImage');
    const areaLeft = (CONFIG.area.x / 1075) * canvas.width;
        if (bgImg && bgImg.width > 0) {
    const areaTop = (CONFIG.area.y / 1911) * canvas.height;
            areaWidth = (CONFIG.area.width / 1075) * bgImg.width;
    const areaWidth = (CONFIG.area.width / 1075) * canvas.width;
        } else {
    const areaHeight = (CONFIG.area.height / 1911) * canvas.height;
            areaWidth = container.offsetWidth * (CONFIG.area.width / 1075);
   
        }
    ctx.fillStyle = '#ffd700';
     } else {
    ctx.fillRect(areaLeft, areaTop, areaWidth, areaHeight);
        // Canvas 模式
      
        const canvas = document.getElementById('lotteryCanvas');
    // 绘制黑色分割线
        areaWidth = (CONFIG.area.width / 1075) * canvas.width;
    ctx.strokeStyle = '#ccc';
     }
    ctx.lineWidth = 2;
     ctx.strokeRect(areaLeft, areaTop, areaWidth, areaHeight);
      
      
    // 创建30个格子
    const tileGrid = document.getElementById('tileGrid');
     const tileSize = areaWidth / CONFIG.cols;
     const tileSize = areaWidth / CONFIG.cols;
      
      
第735行： 第800行：
         tileGrid.appendChild(tile);
         tileGrid.appendChild(tile);
     }
     }
   
    elements.controlsRow.style.display = 'flex';
    updateMascotMessage();
}
}


2026年2月1日 (日) 16:05的版本

<!DOCTYPE html>

🎰 刮刮乐抽奖

剩余彩票 3
当前票号 -
已刮格子 0/30

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