Unity WebGL Loader HTML: Zombieshooter Example

Open In Editor Video Publish Your Code

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-logo"><img src="https://cdn.jsdelivr.net/gh/awaiblecomponent/575@main/logo.png"/></div>
<div id="unity-progress-bar-empty" style="display: none;">
<div id="unity-progress-bar-full"></div>
</div>
<div class="spinner"></div>
</div>
</div>

<script>
    const hideFullScreenButton = "";
    const buildUrl = "https://cdn.jsdelivr.net/gh/awaiblecomponent/575@main/Build";
    const loaderUrl = buildUrl + "/zombieshooterdone.loader.js";
    const config = {
        dataUrl: buildUrl + "/zombieshooterdone.data.br",
        frameworkUrl: buildUrl + "/zombieshooterdone.framework.js",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "OnHitDev",
        productName: "They Are Coming",
        productVersion: "1.19"
    };

const wasmParts = [
        `${buildUrl}/zombieshooterdone.wasm.br.part0`,
        `${buildUrl}/zombieshooterdone.wasm.br.part1`,
        `${buildUrl}/zombieshooterdone.wasm.br.part2`,
        `${buildUrl}/zombieshooterdone.wasm.br.part3`
    ];

async function fetchAndMergeWasm() {
        const parts = await Promise.all(wasmParts.map(url =>
            fetch(url).then(r => {
                if (!r.ok) throw new Error(`Failed to load ${url}`);
                return r.arrayBuffer();
            })
        ));
        const totalLength = parts.reduce((sum, part) => sum + part.byteLength, 0);
        const merged = new Uint8Array(totalLength);
        let offset = 0;
        for (const part of parts) {
            merged.set(new Uint8Array(part), offset);
            offset += part.byteLength;
        }
        const blob = new Blob([merged], { type: "application/wasm+br" });
        return URL.createObjectURL(blob);
    }

fetchAndMergeWasm().then(blobUrl => {
    config.codeUrl = blobUrl;

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('background.png') center / cover";

loadingCover.style.display = "";

// Выключаем появление меню при правом клике мыши
          document.addEventListener('contextmenu', event => event.preventDefault());

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

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

let StartUnityInstance;
        let myGameInstance;
        let ysdk = null; // Yandex SDK pasif

// 
        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'; // Varsayılan playerData tanımı
        let player = null;
        let payments = null;
        let initGame = false;
        let nowFullAdOpen = false;

// 
        function GetPayments() { console.warn("GetPayments is not implemented"); return Promise.resolve("none"); }
        function SaveCloud() { console.warn("SaveCloud is not implemented"); }
        function LoadCloud() { console.warn("LoadCloud is not implemented"); return Promise.resolve("noData"); }
        function InitPlayer() { console.warn("InitPlayer is not implemented"); return Promise.resolve("noData"); }

function FullAdShow() {
    try {
        // Prevent multiple fullscreen ads from opening simultaneously
        if (!nowFullAdOpen) {
            nowFullAdOpen = true;

// If the game is initialized, notify Unity to open the fullscreen ad
            if (initGame) {
                myGameInstance.SendMessage("YandexGame", "OpenFullAd");
            }

// Simulate ad duration (500ms) and then close it
            setTimeout(() => {
                nowFullAdOpen = false;
                if (initGame) {
                    myGameInstance.SendMessage("YandexGame", "CloseFullAd", "true");
                }
                FocusGame(); // Refocus the game after ad closes
            }, 500);
        }
    } catch (error) {
        // Silently handle any errors
    }
}

function RewardedShow(rewardId) {
    try {
        // Notify Unity to open the rewarded video with the given reward ID
        myGameInstance.SendMessage("YandexGame", "RewardVideo", rewardId);

// After the ad, close it and refocus the game
        function closeRewardedAd() {
            myGameInstance.SendMessage("YandexGame", "CloseRewardVideo");
            FocusGame();
        }
        closeRewardedAd(); // Immediate closure for simplicity; in practice, this might be delayed or conditional
    } catch (error) {
        // Silently handle any errors
    }
}

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

Unity WebGL Loader HTML: Zombieshooter Example

Recommended

CSS Sphere Animation HTML Example

CSS Pulse Loader

HTML Button Animation Example

HTML

CSS

JS

Recommended

CSS Sphere Animation HTML Example

CSS Pulse Loader

HTML Button Animation Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS