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

607 IDK

Abrir en el editor Publica tu código

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

Recomendado

25 September 2025

Casillas de verificación CSS animadas con SVG y JavaScript

26 March 2026

Cargador de juego 3D Unity Brawl HTML

1 February 2025

La nueva calculadora de Mikey

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