Fallout

Open In Editor Video Publish Your Code

HTML

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fallout</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: black;
            color: #fedb1d;
            overflow: hidden;
        }
        
        #canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: 100%;
            background: black;
            padding: 0;
            margin: 0;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        
        .emularity-splash-screen {
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 50%;
            margin: 0;
            box-sizing: border-box;
            color: #000;
        }
        
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-family: monospace;
            font-size: 20px;
        }
        
        #progress {
            margin-top: 20px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="loading">
        <div>Loading...</div>
        <div id="progress">Merging archive parts: 0%</div>
    </div>
    <canvas id="canvas" style="width: 50%; height: 50%; display: none; margin: 0 auto;" onClick="window.focus();" />
    <script type="text/javascript" src="js/es6-promise.js"></script>
    <script type="text/javascript" src="js/browserfs.min.js"></script>
    <script type="text/javascript" src="js/loader.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

async function loadAndMergeZipParts() {
            const progressEl = document.getElementById('progress');
            const loadingEl = document.getElementById('loading');
            
            try {
                const chunks = [];
                
                for (let i = 1; i <= NUM_PARTS; i++) {
                    progressEl.textContent = `Loading part ${i}/${NUM_PARTS}...`;
                    
                    const partNum = i.toString().padStart(2, '0');
                    const partUrl = `${PARTS_FOLDER}${BASE_FILENAME}.part${partNum}`;
                    const response = await fetch(partUrl);
                    
                    if (!response.ok) {
                        throw new Error(`Failed to load ${partUrl}: ${response.status}`);
                    }
                    
                    const arrayBuffer = await response.arrayBuffer();
                    chunks.push(arrayBuffer);
                    
                    const progress = Math.round((i / NUM_PARTS) * 100);
                    progressEl.textContent = `Merging archive parts: ${progress}%`;
                }
                
                progressEl.textContent = 'Merging complete! Starting emulator...';
                const mergedBlob = new Blob(chunks, { type: 'application/zip' });
                
                const blobUrl = URL.createObjectURL(mergedBlob);
                
                loadingEl.style.display = 'none';
                document.getElementById('canvas').style.display = 'block';
                
                startEmulator(blobUrl);
                
            } catch (error) {
                progressEl.textContent = `Error: ${error.message}`;
                console.error('Failed to load game:', error);
            }
        }

function startEmulator(zipUrl) {
            var dosbox = new Emulator(document.querySelector("#canvas"),
                null,
                new DosBoxLoader(DosBoxLoader.emulatorJS("js/dosbox-sync.js"),
                    DosBoxLoader.locateAdditionalEmulatorJS(locateAdditionalFiles),
                    DosBoxLoader.nativeResolution(640, 400),
                    DosBoxLoader.mountZip("c",
                        DosBoxLoader.fetchFile("Software", zipUrl)),
                    DosBoxLoader.startExe('FALLOUT/FALLOUT.EXE')));
            dosbox.start({
                waitAfterDownloading: false
            });

function locateAdditionalFiles(filename) {
                if (filename === "dosbox.html.mem") {
                    return "js/dosbox-sync.mem";
                }
                return "js/" + filename;
            }
        }

window.addEventListener('load', loadAndMergeZipParts);
    </script>
</body>

</html>

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS