Cargador de Unity HTML5 para el juego Kindergarten 2

Abrir en el editor Video Publica tu código

Cargador de Unity HTML5 para el juego Kindergarten 2

Recomendado

23 June 2025

Ejemplo de formulario de inicio de sesión HTML

28 July 2023

Animación de color de texto con CSS

28 November 2024

Enlace animado al pasar el mouse

HTML

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

<head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@main/kindergarten/2/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>gn-math.github.io | Kindergarten2</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.data", 1, 2)),
            mergeFiles(getParts("Build/Build.wasm", 1, 3))
        ]).then(([dataUrl, wasmUrl]) => {
            container.hidden = false;
            var buildUrl = "Build";
            var loaderUrl = buildUrl + "/Build.loader.js";
            var config = {
                dataUrl: dataUrl,
                frameworkUrl: buildUrl + "/Build.framework.js",
                codeUrl: wasmUrl,
                streamingAssetsUrl: "StreamingAssets",
                companyName: "SmashGames",
                productName: "Kindergarten2",
                productVersion: "2.00",
                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