WebAssembly Game Canvas Loader in HTML and JavaScript – Version 2

22 smallone1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Brotato</title>
<
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">

#status { 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100%; 
    z-index: 10; 
    text-align: center; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 22px;
    letter-spacing: 3px;
    background: linear-gradient(to right, #500, #550, #050, #055, #005, #505, #500);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rainbow 3s linear infinite;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(255,255,255,0.1);
}

#status i { margin-right: 15px; }

@keyframes rainbow { to { background-position: 200% center; } }
</style>
<script src="https://cdn.jsdelivr.net/gh/gzuidhof/coi-serviceworker@latest/coi-serviceworker.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="status">
    <i class="fas fa-compact-disc fa-spin"></i> LOADING: 0.00 / 163.00 MB
</div>

const originalFetch = window.fetch;
const mergedData = {};
const pendingRequests = {};
let bytesLoadedSoFar = 0;

const statusEl = document.getElementById('status');

function updateStatus(currentBytes) {
    const currentMB = (currentBytes / 1048576).toFixed(2);
    statusEl.innerHTML = `<i class="fas fa-sync-alt fa-spin"></i> LOADING: ${currentMB} / ${TOTAL_MB} MB`;
}

async function merge(name, start, end) {
    const bufs = [];
    for (let i = start; i <= end; i++) {
        const url = BASE + encodeURIComponent(name + ".part" + i);
        const r = await originalFetch(url);
        if (!r.ok) throw new Error();
        const data = await r.arrayBuffer();
        bufs.push(data);
        bytesLoadedSoFar += data.byteLength;
        updateStatus(bytesLoadedSoFar);
    }
    const b = new Blob(bufs, { type: 'application/octet-stream' });
    mergedData[name] = b;
    if (pendingRequests[name]) {
        pendingRequests[name].forEach(res => res(new Response(b)));
        delete pendingRequests[name];
    }
}

async function init() {
    try {
        // Load all 10 binary parts
        await merge("index.pck", 1, 8);
        await merge("index.wasm", 1, 2);
        
        const s = document.createElement('script');
        s.src = BASE + "index.js";
        s.onload = () => {
            const engine = new Engine({
                "args":[],
                "canvasResizePolicy":2,
                "executable":"index",
                "fileSizes":{"index.pck":144746880,"index.wasm":26156492},
                "focusCanvas":true
            });

engine.startGame({
                onProgress: (current, total) => { 
                    if (total > 0) {
                       
                        updateStatus(bytesLoadedSoFar); 
                    }
                }
            }).then(() => {
                statusEl.style.display = 'none';
                window.dispatchEvent(new Event('resize'));
            });
        };
        document.body.appendChild(s);
    } catch (e) {
        statusEl.innerHTML = `<i class="fas fa-exclamation-triangle"></i> LOAD ERROR`;
    }
}
init();
})();
</script>
</body>
</html>

CSS

WebAssembly Game Canvas Loader in HTML and JavaScript – Version 2

Recommended