Unity WebGL Game Loader mit Werbeunterstützung

27 argghh

Im Editor öffnen Veröffentlichen Sie Ihren Code

Unity WebGL Game Loader mit Werbeunterstützung

Empfohlen

21 July 2025

Datei-Upload-Eingabe mit SVG-Symbol

11 August 2025

CSS-Animation: Blob mit Pulse laden

19 October 2025

Three.js Partikelform-Morphing mit Steuerelementen

HTML

<!DOCTYPE html>

<html lang="en-us">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bubbls/99itf@main/style.css"/>

<style>
        /* Убираем выделение по нажатию клавиш */
        canvas:focus { 
            outline: none;
        }

html, body {
            /* Убираем отступы */
            padding: 0;
            margin: 0;
            /* Отключаем скролл и лонгтап на IOS */
            overflow: hidden;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            /* Ставим высоту на 100% */
            height: 100%;
        }
    </style>

</head>
<body class="dark">
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" tabindex="-1"></canvas>
</div>
<div id="loading-cover" style="display:none;">
<div id="unity-loading-bar">
<div id="unity-progress-bar-empty" style="display: none;">
<div id="unity-progress-bar-full"></div>
</div>
<div class="spinner"></div> 
</div>
</div>

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | 99Days</title>
    <style>
        /* CSS stilleri (orijinal kodunuzdan alınabilir, burada yer kaplamaması için çıkarılmıştır) */
    </style>
</head>
<body>
    <div id="unity-container" class="unity-desktop">
        <canvas id="unity-canvas"></canvas>
        <div id="loading-cover">
            <div id="unity-progress-bar-empty">
                <div id="unity-progress-bar-full"></div>
            </div>
            <div class="spinner"></div>
        </div>
    </div>
    <script>
        const hideFullScreenButton = "";
        const buildUrl = "https://cdn.jsdelivr.net/gh/bubbls/99itf@main/Build";
        const loaderUrl = buildUrl + "/Build.loader.js";
        const cdnBaseUrl = "https://cdn.jsdelivr.net/gh/bubbls/99itf@main/"; // jsDelivr URL'sini kendi reponuza göre düzenleyin

// Part dosyalarının listesi
        const dataParts = [
            cdnBaseUrl + "Build.data.br.part0",
            cdnBaseUrl + "Build.data.br.part1",
          cdnBaseUrl + "Build.data.br.part2",
          cdnBaseUrl + "Build.data.br.part3",
        ];
        const wasmParts = [
             cdnBaseUrl + "Build.wasm.br.part0",
            cdnBaseUrl + "Build.wasm.br.part1",
          cdnBaseUrl + "Build.wasm.br.part2",
          cdnBaseUrl + "Build.wasm.br.part3",
          cdnBaseUrl + "Build.wasm.br.part4",
        ];

// Dosya birleştirme fonksiyonu
        async function fetchAndCombineParts(partUrls) {
            const buffers = [];
            for (const url of partUrls) {
                const response = await fetch(url);
                if (!response.ok) throw new Error(`Failed to fetch ${url}`);
                const buffer = await response.arrayBuffer();
                buffers.push(buffer);
            }
            const totalLength = buffers.reduce((sum, buf) => sum + buf.byteLength, 0);
            const combined = new Uint8Array(totalLength);
            let offset = 0;
            for (const buffer of buffers) {
                combined.set(new Uint8Array(buffer), offset);
                offset += buffer.byteLength;
            }
            return new Blob([combined], { type: 'application/octet-stream' });
        }

// Unity konfigürasyonu
        const config = {
            dataUrl: "", // Blob URL dinamik olarak ayarlanacak
            frameworkUrl: buildUrl + "/Build.framework.js",
            codeUrl: "", // Blob URL dinamik olarak ayarlanacak
            streamingAssetsUrl: "StreamingAssets",
            companyName: "DefaultCompany",
            productName: "99Days",
            productVersion: "0.1"
        };

const container = document.querySelector("#unity-container");
        const canvas = document.querySelector("#unity-canvas");
        const loadingCover = document.querySelector("#loading-cover");
        const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
        const progressBarFull = document.querySelector("#unity-progress-bar-full");
        const spinner = document.querySelector('.spinner');

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
            container.className = "unity-mobile";
        }

loadingCover.style.background = "url('') center / cover";
        loadingCover.style.display = "";

document.addEventListener('contextmenu', event => event.preventDefault());

function FocusGame() {
            window.focus();
            canvas.focus();
        }

function auth() {
            initPlayer(); 
        }

window.addEventListener('pointerdown', FocusGame);
        window.addEventListener('touchstart', FocusGame);

let StartUnityInstance;
        let myGameInstance;
        let ysdk = null;

let environmentData = {
            language: "en",
            domain: "default_domain",
            deviceType: "desktop",
            isMobile: false,
            isDesktop: true,
            isTablet: false,
            isTV: false,
            appID: "default_app_id",
            browserLang: navigator.language || "en",
            payload: null,
            promptCanShow: false,
            reviewCanShow: false,
            platform: navigator.platform,
            browser: (function() {
                let userAgent = navigator.userAgent;
                if (userAgent.includes("YaBrowser")) return "Yandex";
                if (userAgent.includes("OPR") || userAgent.includes("Opera")) return "Opera";
                if (userAgent.includes("Firefox")) return "Firefox";
                if (userAgent.includes("MSIE") || userAgent.includes("Trident")) return "IE";
                if (userAgent.includes("Edge")) return "Edge";
                if (userAgent.includes("Chrome")) return "Chrome";
                if (userAgent.includes("Safari")) return "Safari";
                return "Other";
            })()
        };

let cloudSaves = 'noData';
        let paymentsData = 'none';
        let playerData = 'noData';
        let player = null;
        let payments = null;
        let initGame = false;
        let nowFullAdOpen = false;

// Unity başlatma ve dosya birleştirme
        try {
            const script = document.createElement("script");
          
            script.src = loaderUrl;
            script.onload = async () => {
                // Part dosyalarını birleştir
                const dataBlob = await fetchAndCombineParts(dataParts);
                const wasmBlob = await fetchAndCombineParts(wasmParts);
                config.dataUrl = URL.createObjectURL(dataBlob);
                config.codeUrl = URL.createObjectURL(wasmBlob);

StartUnityInstance = function () {
                    createUnityInstance(canvas, config, (progress) => {
                        spinner.style.display = "none";
                        progressBarEmpty.style.display = "";
                        progressBarFull.style.width = `${100 * progress}%`;
                    }).then((unityInstance) => {
                        myGameInstance = unityInstance;
                        loadingCover.style.display = "none";
                    }).catch((message) => {
                        console.error("Unity yükleme hatası:", message);
                    });
                };
                StartUnityInstance();
            };
            document.body.appendChild(script);
        } catch (error) {
            console.error("Başlatma sırasında hata:", error);
        }

window.addEventListener("unhandledrejection", function(event) {
            console.warn("Hata es geçildi:", event.reason);
            event.preventDefault();
        });
    </script>

<style>
  /* Container: Top center, fixed, with overflow hidden */
  #ad-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(728px, calc(100% - 20px)); /* 728px, 10px margin on mobile */
    height: 90px;
    background: rgba(0, 0, 0, 0.90);
    display: none;
    z-index: 99999;
    border-radius: 0; /* Sharp corners */
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out; /* Smooth slide-in/out animation */
  }

/* Slide-out animation */
  #ad-container.hidden {
    transform: translate(-50%, -100%); /* Slide up out of view */
  }

#ad-iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 745px; /* Updated width */
    height: 90px; /* Updated height */
    border: 0;
    display: block;
    overflow: hidden;
    pointer-events: auto;
    box-sizing: content-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #ad-iframe::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

/* Close button with arrow */
  #close-ad {
    position: absolute;
    top: 6px;
    right: 8px;
    background: #ff4d4d;
    color: #fff;
    border: none;
    padding: 5px 9px;
    font-size: 13px;
    border-radius: 4px;
    cursor: not-allowed;
    opacity: 0.72;
    z-index: 100000;
    display: flex;
    align-items: center;
  }
  #close-ad.enabled {
    cursor: pointer;
    opacity: 1;
  }
  #close-ad::before {
    content: '↑'; /* Up arrow */
    margin-right: 4px;
  }

/* Right mask for scrollbar */
  #ad-right-mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    z-index: 99999;
  }

/* Mobile adjustments */
  @media (max-width: 440px) {
    #ad-container {
      width: calc(100% - 12px);
      left: 50%;
      transform: translateX(-50%);
      border-radius: 0; /* Sharp corners on mobile */
    }
    #ad-iframe {
      width: 708px;
    }
  }
</style>

<div id="ad-container" aria-hidden="true" role="dialog" aria-label="Advertisement">
  <iframe
    id="ad-iframe"
    src=""
    width="768px"
    height="95px"
    scrolling="no"
    frameborder="0"

sandbox="allow-scripts allow-popups allow-same-origin"
  ></iframe>
  <button id="close-ad" disabled>Close (12)</button>
  <div id="ad-right-mask"></div>
</div>

function showAd() {
      // Show ad with smooth slide-in
      adContainer.style.display = 'block';
      adContainer.classList.remove('hidden');
      adContainer.setAttribute('aria-hidden', 'false');

// Start countdown
      let timeLeft = countdownStart;
      closeBtn.textContent = `Close (${timeLeft})`;
      closeBtn.disabled = true;
      closeBtn.classList.remove('enabled');

// Initial ad show
    setTimeout(showAd, showDelay);

// Close with animation and schedule reappearance
    closeBtn.addEventListener('click', () => {
      if (closeBtn.disabled) return;
      adContainer.classList.add('hidden');
      adContainer.setAttribute('aria-hidden', 'true');
      // Schedule reappearance without removing or reloading iframe
      setTimeout(showAd, reappearDelay);
    });
  })();
</script>

</body>
</html>

Empfohlen

Datei-Upload-Eingabe mit SVG-Symbol

CSS-Animation: Blob mit Pulse laden

Three.js Partikelform-Morphing mit Steuerelementen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS