Emulador

704 argghh

Abrir en el editor Publica tu código

Recomendado

16 December 2025

Emulador del juego Street Fighter II Turbo HTML5

19 January 2026

Reproductor de juegos Flash con emulador Ruffle

11 January 2026

Juega a Mega Man NES: emulador en el navegador

HTML

<!DOCTYPE html>
<html>
    <head>
        
        
        
        <title>EmulatorJS | Demo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">
        <link rel="apple-touch-icon" href="img/icon.png" />
        <link rel="manifest" href="manifest.json" />
        <meta name="theme-color" content="#000"/>
        <style>
            body, html {
                height: 100%;
                background-color: black;
                color: white;
            }

body {
                margin: 0;
                overflow: hidden;
            }

body, #box, #top {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

#box {
                color: #aaa;
                height: 20em;
                width: 30em;
                max-width: 80%;
                max-height: 80%;
                background-color: #333;
                border-radius: 0.4em;
                border: 2px solid #555;
                position: relative;
                flex-direction: column;
                transition-duration: 0.2s;
                overflow: hidden;
                font-family: monospace;
                font-weight: bold;
                font-size: 20px;
                margin: 5px;
                padding: 10px;
                text-align: center;
            }

#box:hover, #box[drag] {
                border-color: #38f;
                color: #ddd
            }

#input {
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }

#display {
                width: 100%;
                height: 100%
            }

select, button {
                padding: 0 0.4em;
                margin: 0.5em 0.1em;
                width: 15em;
                max-width: 100%;
                font-family: monospace;
                font-weight: bold;
                font-size: 16px;
                background-color: #444;
                color: #aaa;
                border-radius: 0.4em;
                border: 1px solid #555;
                cursor: pointer;
                transition-duration: 0.2s;
                vertical-align:top;
                height: 2.5em;
            }

select:hover, button:hover {
                background-color: #666;
                color: #ddd
            }

.logo {
                width: 130px;
                height: 130px;
                filter: drop-shadow(0 0 10px white);
            }

#top, #version {
                margin: 5px;
            }

#version button {
                fill: #aaa;
                width: auto;
                padding: 0.2em 0.3em;
                text-align: center;
                margin: 0.5em 0.1em;
            }
            #version svg {
                margin-top: 0.05em;
                margin-left: 0.05em;
                width: 1.8em;
            }
            .popup {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                z-index: 2000;
                visibility: hidden;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            .popup .content {
                background-color: #333;
                border-radius: 0.4em;
                border: 2px solid #555;
                padding: 1em;
                max-width: 80%;
                max-height: 80%;
                min-width: 30%;
                width: min-content;
                position: fixed;
            }
            .show {
                visibility: visible;
            }
            .popup-overlay {
                position: fixed;
                width: 100%;
                height: 100%;
                visibility: hidden;
                top: 0;
                left: 0;
                z-index: 1000;
                opacity: 0;
                background-color: rgba(0, 0, 0, 0.5);
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }
            .show ~ .popup-overlay {
                opacity: 1;
                visibility: visible;
            }
            .popup-animate .content {
                -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
                -ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
                transform: translateX(-50%) translateY(-50%) scale(0.7);
                opacity: 0;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }
            .show.popup-animate .content {
                -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
                -ms-transform: translateX(-50%) translateY(-50%) scale(1);
                transform: translateX(-50%) translateY(-50%) scale(1);
                opacity: 1;
            }
            .popup .title, .popup .options p {
                display: flex;
                align-items: center;
            }
            .popup .options p {
                margin: 1em 0;
                font-size: 18px;
            }
            .popup .title h1 {
                margin: 0 0 0.3em;
                font-size: 48px;
            }
            .popup .options button {
                width: auto;
                padding: 0 0.5em;
                font-weight: bold;
                margin: 0 0.5em;
                font-size: 14px;
                border-radius: 0.4em;
            }
            .popup .bottom {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 1em;
            }
            #installbox {
                display: inline-flex;
                align-items: baseline;
            }
            #installboxtext {
                margin-top: 0 !important;
            }
            button:disabled {
                background-color: #666;
                color: #aaa;
                cursor: not-allowed;
            }
            .hide {
                display: none !important;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <h1>EmulatorJS Demo</h1>
            <img src="img/logo-light.png" alt="Logo" class="logo">
        </div>
        <div id="box">
            <input type="file" id="input">
            Drag ROM file or click here
        </div>
        <div id="version">
            <select id="version-select"></select>
            <button id="download" class="hide" onclick="downloadversion()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 16 16">
                    <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 4.854-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708"/>
                </svg>
            </button>
            <button id="settings" onclick="openSettings()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
                </svg>
            </button>
        </div>
        <div id="popup-settings" class="popup popup-animate">
            <div class="content">
                <div class="title">
                    <h1>Settings</h1>
                </div>
                <div class="options">
                    <p id="offline-status">Offline Status: CHECKING</p>
                    <p>Offline Cores will be available soon.</p>
                    <p class="hide">Remove All Saved Versions: <button id="remove-version" onclick="removeallsaved()">Remove All</button></p>
                    <div id="installbox"><p id="installboxtext">Install PWA:</p> <button id="install">Install</button></div>
                    </div>
                <div class="bottom">
                    <button onclick="closeSettings()">Close</button>
                </div>
            </div>
        </div>
        <div class="popup-overlay"></div>
        <script>
            if ("serviceWorker" in navigator) {
                const req = navigator.serviceWorker.register("https://cdn.jsdelivr.net/EmulatorJS/demo/sw.js");
                console.log(req);
            };
            loadJSON("/versions", (response) => {
                if (true) {
                    loadJSON("https://cdn.emulatorjs.org/versions.json", resp => loadVersions(resp));
                    document.getElementById("offline-status").textContent = "Offline Status: NOT INSTALLED";
                } else {
                    loadVersions(response);
                    document.getElementById("offline-status").textContent = "Offline Status: READY";
                }
            });
            function loadVersions(response) {
                const version_select = document.getElementById("version-select");
                var versions = JSON.parse(response);
                version_select.innerHTML = "";
                addOptions(version_select, versions.releases, versions.default, versions.github);
                addOptions(version_select, versions.versions, versions.default);
                version_select.addEventListener("change", () => {
                    localStorage.setItem("version", version_select[version_select.selectedIndex].textContent);
                    window.cdn = "https://cdn.jsdelivr.net/gh/genizy/emu@7bf5cbb0b94866568d2aaa1fd42ebb5acd517e0d/";
                });
            }
            input.addEventListener("change", async () => {
                const url = input.files[0];
                const parts = input.files[0].name.split(".");

const core = await (async (ext) => {
                    if (["fds", "nes", "unif", "unf"].includes(ext))
                        return "nes"

if (["smc", "fig", "sfc", "gd3", "gd7", "dx2", "bsx", "swc"].includes(ext))
                        return "snes"

if (["z64", "n64"].includes(ext))
                        return "n64"

if (["pce"].includes(ext))
                        return "pce"

if (["ngp", "ngc"].includes(ext))
                        return "ngp"

if (["ws", "wsc"].includes(ext))
                        return "ws"

if (["col", "cv"].includes(ext))
                        return "coleco"

if (["d64"].includes(ext))
                        return "vice_x64"

if (["nds", "gba", "gb", "z64", "n64"].includes(ext))
                        return ext

return await new Promise(resolve => {
                        const cores = {
                            "Nintendo 64": "n64",
                            "Nintendo Game Boy": "gb",
                            "Nintendo Game Boy Advance": "gba",
                            "Nintendo DS": "nds",
                            "Nintendo Entertainment System": "nes",
                            "Super Nintendo Entertainment System": "snes",
                            "PlayStation": "psx",
                            "Virtual Boy": "vb",
                            "Sega Mega Drive": "segaMD",
                            "Sega Master System": "segaMS",
                            "Sega CD": "segaCD",
                            "Atari Lynx": "lynx",
                            "Sega 32X": "sega32x",
                            "Atari Jaguar": "jaguar",
                            "Sega Game Gear": "segaGG",
                            "Sega Saturn": "segaSaturn",
                            "Atari 7800": "atari7800",
                            "Atari 2600": "atari2600",
                            "NEC TurboGrafx-16/SuperGrafx/PC Engine": "pce",
                            "NEC PC-FX": "pcfx",
                            "SNK NeoGeo Pocket (Color)": "ngp",
                            "Bandai WonderSwan (Color)": "ws",
                            "ColecoVision": "coleco",
                            "Commodore 64": "vice_x64",
                            "PlayStation Portable": "psp"
                        }

const button = document.createElement("button")
                        const select = document.createElement("select")

for (const type in cores) {
                            const option = document.createElement("option")

option.value = cores[type]
                            option.textContent = type
                            select.appendChild(option)
                        }

button.onclick = () => resolve(select[select.selectedIndex].value)
                        button.textContent = "Load game"
                        box.innerHTML = ""

box.appendChild(select)
                        box.appendChild(button)
                    })
                })(parts.pop())

const div = document.createElement("div")
                const sub = document.createElement("div")
                const script = document.createElement("script")

sub.id = "game"
                div.id = "display"

const top = document.getElementById("top");
                const version = document.getElementById("version");
                top.remove();
                version.remove();
                box.remove();
                div.appendChild(sub)
                document.body.appendChild(div)

const cdn = window.cdn || "https://cdn.jsdelivr.net/gh/genizy/emu@7bf5cbb0b94866568d2aaa1fd42ebb5acd517e0d/"

window.EJS_player = "#game";
                window.EJS_gameName = parts.shift();
                window.EJS_biosUrl = "";
                window.EJS_gameUrl = url;
                window.EJS_core = core;
                window.EJS_pathtodata = cdn;
                window.EJS_startOnLoaded = true;
                window.EJS_AdUrl = "https://ads.emulatorjs.org/";
                if (core === "psp") {
                    window.EJS_threads = true;
                }
                window.EJS_ready = function() {
                    detectAdBlock("data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9PC9zdHlsZT48Ym9keSBzdHlsZT0ibWFyZ2luOjAiPjxkaXYgaWQ9ImFkYmxvY2siPjxoMT5IaSBBZGJsb2NrIFVzZXIhPC9oMT48cD5BZHMgb24gdGhpcyBwYWdlIG1heSBjb21lIGFuZCBnbyBkZXBlbmRpbmcgb24gaG93IG1hbnkgcGVvcGxlIGFyZSBmdW5kaW5nIHRoaXMgcHJvamVjdC48YnI+WW91IGNhbiBoZWxwIGZ1bmQgdGhpcyBwcm9qZWN0IG9uPGEgaHJlZj0iaHR0cHM6Ly9wYXRyZW9uLmNvbS9FbXVsYXRvckpTIj5wYXRyZW9uPC9hPjwvcD48L2Rpdj48L2JvZHk+PC9odG1sPg==");
                }
                
                script.src = cdn + "loader.js";
                document.body.appendChild(script);
            });

box.ondragover = () => box.setAttribute("drag", true);
            box.ondragleave = () => box.removeAttribute("drag");

function loadJSON(url, callback) {
                var xobj = new XMLHttpRequest();
                xobj.overrideMimeType("application/json");
                xobj.open('GET', url, true);

xobj.onreadystatechange = function () {
                    if (xobj.readyState === 4) {
                        if (xobj.status === 200) {
                            callback(xobj.responseText);
                        } else {
                            callback(null);
                        }
                    }
                };

xobj.send();
            }

function openSettings() {
                document.getElementById("popup-settings").classList.add("show");
                if (localStorage.getItem("pwa") == "false") {
                    checkinstall();
                }
            }

function closeSettings() {
                document.getElementById("popup-settings").classList.remove("show");
            }

let installPrompt = null;
            const installButton = document.querySelector("#install");
            const installBox = document.querySelector("#installbox");
            const installBoxText = document.querySelector("#installboxtext");
            localStorage.setItem("pwa", "false");

CSS