Hollow Knight WebGL: Cargar y almacenar en caché datos del juego

696 iroger7

Abrir en el editor Publica tu código

Hollow Knight WebGL: Cargar y almacenar en caché datos del juego

Recomendado

28 August 2024

Animación de desplazamiento de paralaje

19 May 2025

menú de la barra de navegación

18 December 2025

Juego HTML5 Mod Friday Night Funkin' Madness

HTML

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

<head>
    <base href="https://cdn.jsdelivr.net/gh/aukak/hollow-knight@2fc2e7149f0d5b2609b135ab48f00fd973930635/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Hollow Knight</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: #231F20;
        }

#unity-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="loading-text" style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING... </div>
    <div hidden id="unity-container" class="unity-desktop">
        <canvas id="unity-canvas"></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-mobile-warning"> WebGL builds are not supported on mobile devices. </div>
    </div>
    <script>
        const DB_NAME = "cachedb";
        const STORE_NAME = "files";

function openCacheDB() {
            return new Promise((resolve, reject) => {
                const req = indexedDB.open(DB_NAME, 1);

req.onupgradeneeded = () => {
                    const db = req.result;
                    if (!db.objectStoreNames.contains(STORE_NAME)) {
                        db.createObjectStore(STORE_NAME);
                    }
                };

req.onsuccess = () => resolve(req.result);
                req.onerror = () => reject(req.error);
            });
        }

async function saveToCache(key, blob) {
            const db = await openCacheDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(STORE_NAME, "readwrite");
                tx.objectStore(STORE_NAME).put(blob, key);
                tx.oncomplete = () => resolve();
                tx.onerror = () => reject(tx.error);
            });
        }

async function loadFromCache(key) {
            const db = await openCacheDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(STORE_NAME, "readonly");
                const req = tx.objectStore(STORE_NAME).get(key);
                req.onsuccess = () => resolve(req.result || null);
                req.onerror = () => reject(req.error);
            });
        }

async function deleteFromCache(key) {
            const db = await openCacheDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(STORE_NAME, "readwrite");
                tx.objectStore(STORE_NAME).delete(key);
                tx.oncomplete = () => resolve();
                tx.onerror = () => reject(tx.error);
            });
        }
    </script>
    <script>
        var loadingText = document.querySelector("#loading-text");
        let totalBytes = 0;
        let loadedBytes = 0;

async function fetchWithProgress(url) {
            const response = await fetch(url);
            const reader = response.body.getReader();
            let chunks = [];
            let received = 0;
            while (true) {
                const {
                    done,
                    value
                } = await reader.read();
                if (done) break;
                received += value.length;
                loadedBytes += value.length;
                chunks.push(value);
                let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
                let mbTotal = '912.81';
                loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
            }
            let fullBuffer = new Uint8Array(received);
            let offset = 0;
            for (let chunk of chunks) {
                fullBuffer.set(chunk, offset);
                offset += chunk.length;
            }
            return fullBuffer.buffer;
        }
        async function mergeFiles(fileParts, cacheKey) {
            const cached = await loadFromCache(cacheKey);
            if (cached) {
                return URL.createObjectURL(cached);
            }
            const buffers = await Promise.all(
                fileParts.map(part => fetchWithProgress(part))
            );
            const mergedBlob = new Blob(buffers);
            await saveToCache(cacheKey, mergedBlob);
            return URL.createObjectURL(mergedBlob);
        }

};
            document.body.appendChild(script);
        })();
    </script>

</body>

</html>

CSS