Hollow Knight WebGL: carica e memorizza nella cache i dati di gioco

27 iroger7

Apri nell'Editor Video Pubblica il Tuo Codice

Hollow Knight WebGL: carica e memorizza nella cache i dati di gioco

Consigliato

11 June 2025

Animazione CSS Sphere con effetti hover

19 November 2024

fiore

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>

Hollow Knight WebGL: carica e memorizza nella cache i dati di gioco

Consigliato

Un codice di alejandrokundrah

Animazione CSS Sphere con effetti hover

fiore

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Animazione CSS Sphere con effetti hover

fiore

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS