Cargador WebGL para juegos de Unity de jardín de infantes

702 IDK

Abrir en el editor Publica tu código

Cargador WebGL para juegos de Unity de jardín de infantes

Recomendado

27 June 2025

Un código de Mete

18 February 2026

Plantilla HTML de juegos desbloqueados: estilo GN-Math

8 October 2025

Animación de carga CSS Estructura HTML

HTML

<!DOCTYPE html>
<html lang="en-us">

<head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@main/kindergarten/1/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>gn-math.github.io | Kindergarten</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        
        #unity-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="loading-text" style="color: black; font-family: cursive; font-size: 48px; text-align: center; margin-top: 20px;">LOADING...</div>
    <div id="unity-container" class="unity-desktop" hidden>
        <canvas id="unity-canvas" tabindex="-1"></canvas>
        <div id="unity-loading-bar">
            <div id="unity-logo"></div>
            <div id="unity-progress-bar-empty">
                <div id="unity-progress-bar-full"></div>
            </div>
        </div>
        <div id="unity-warning"> </div>
    </div>
    <script>
        var container = document.querySelector("#unity-container");
        var canvas = document.querySelector("#unity-canvas");
        var loadingBar = document.querySelector("#unity-loading-bar");
        var progressBarFull = document.querySelector("#unity-progress-bar-full");
        var fullscreenButton = document.querySelector("#unity-fullscreen-button");
        var warningBanner = document.querySelector("#unity-warning");

function unityShowBanner(msg, type) {

}

function mergeFiles(fileParts) {
            return new Promise((resolve, reject) => {
                let buffers = [];

function fetchPart(index) {
                    if (index >= fileParts.length) {
                        let mergedBlob = new Blob(buffers);
                        let mergedFileUrl = URL.createObjectURL(mergedBlob);
                        resolve(mergedFileUrl);
                        return;
                    }
                    fetch(fileParts[index]).then((response) => response.arrayBuffer()).then((data) => {
                        buffers.push(data);
                        fetchPart(index + 1);
                    }).catch(reject);
                }
                fetchPart(0);
            });
        }

function getParts(file, start, end) {
            let parts = [];
            for (let i = start; i <= end; i++) {
                parts.push(file + ".part" + i);
            }
            return parts;
        }
        Promise.all([
            mergeFiles(getParts("Build/Build.wasm", 1, 3))
        ]).then(([wasmUrl]) => {
            container.hidden = false;
            var buildUrl = "Build";
            var loaderUrl = buildUrl + "/Build.loader.js";
            var config = {
                dataUrl: buildUrl + '/Build.data',
                frameworkUrl: buildUrl + "/Build.framework.js",
                codeUrl: wasmUrl,
                streamingAssetsUrl: "StreamingAssets",
                companyName: "SmashGames",
                productName: "Kindergarten",
                productVersion: "2.04",
                showBanner: unityShowBanner,
            };
            if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
                var meta = document.createElement('meta');
                meta.name = 'viewport';
                meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
                document.getElementsByTagName('head')[0].appendChild(meta);
                container.className = "unity-mobile";
                canvas.className = "unity-mobile";
            } else {
                function resizeCanvas() {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    canvas.style.width = window.innerWidth + "px";
                    canvas.style.height = window.innerHeight + "px";
                }
                resizeCanvas();
                window.addEventListener('resize', resizeCanvas);
            }
            loadingBar.style.display = "block";
            var script = document.createElement("script");
            script.src = loaderUrl;
            script.onload = () => {
                createUnityInstance(canvas, config, (progress) => {
                    progressBarFull.style.width = 100 * progress + "%";
                }).then((unityInstance) => {
                    loadingBar.style.display = "none";
                    document.querySelector("#loading-text").remove();
                }).catch((message) => {
                    alert(message);
                });
            };
            document.body.appendChild(script);
        });
    </script>
</body>

</html>

CSS

JS