UNDERTALE (arreglado de nuevo, disculpen)

26 Ehyden1

Abrir en el editor Publica tu código

UNDERTALE (arreglado de nuevo, disculpen)

Recomendado

30 March 2025

Un código de ytr3d3

24 June 2025

Bienes Raíces de Élite: Apartamentos, Villas, Casas en Venta y Alquiler

25 May 2024

Dominar el arte de las puertas correderas: técnicas de animación CSS y GSAP

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@1102f068fff0083d2a5ed979ebac6425540d78a5/undertale/" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link rel="icon" type="x-icon" href="favicon.png" />
    <title>UNDERTALE</title>
    <script src="/js/mobile.js"></script>
    <style>
      @-webkit-keyframes rotation {
        from {
          -webkit-transform: rotate(0deg);
        }

to {
          -webkit-transform: rotate(360deg);
        }
      }

@-moz-keyframes rotation {
        from {
          -moz-transform: rotate(0deg);
        }

to {
          -moz-transform: rotate(360deg);
        }
      }

@-o-keyframes rotation {
        from {
          -o-transform: rotate(0deg);
        }

to {
          -o-transform: rotate(360deg);
        }
      }

@keyframes rotation {
        from {
          transform: rotate(0deg);
        }

to {
          transform: rotate(360deg);
        }
      }

html {
        background: #ffffff;
      }

body {
        font-family: arial;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: fill-available;
        min-height: 100vh; /* Otherwise contents can be covered by an address bar in Safari on iOS 15 */
        min-width: 100vw;
        background: radial-gradient(56.63% 56.63% at 50% 43.37%, transparent 0%, transparent 100%);
        background-color: black;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        place-items: center;
      }

body.scrollingDisabled {
        overflow: hidden;
      }

.emscripten {
        padding-right: 0;
        display: block;
      }

div.emscripten {
        text-align: center;
        font-family: 'Lucida Console', Monaco, monospace;
      }

/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten {
        display: none;
        background-color: black;
        position: flex;
        transition: opacity 5s ease-in;
        -webkit-transition: opacity 5s ease-in;
        opacity: 0;
        filter: blur(0) grayscale(0);
        image-rendering: optimizeSpeed; /* Older versions of FF          */
        image-rendering: -moz-crisp-edges; /* FF 6.0+                       */
        image-rendering: -webkit-optimize-contrast; /* Safari                        */
        image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
        image-rendering: pixelated; /* Awesome future-browsers       */
        -ms-interpolation-mode: nearest-neighbor; /* IE                            */
      }

canvas.active {
        animation-name: fadeIn;
        animation-duration: 2s;
        opacity: 1;
      }

canvas.paused {
        animation-name: blur;
        animation-duration: 0.5s;
        filter: blur(2px) grayscale(1);
      }

canvas.unpaused {
        animation-name: none;
      }

canvas.animatedSizeTransitions {
        transition: width 0.3s ease, height 0.3s ease;
      }

@keyframes fadeIn {
        0% {
          opacity: 0;
        }

100% {
          opacity: 1;
        }
      }

@keyframes blur {
        0% {
          filter: blur(0) grayscale(0);
        }

100% {
          filter: blur(2px) grayscale(1);
        }
      }

.spinner {
        height: 30px;
        width: 30px;

-webkit-animation: rotation 0.8s linear infinite;
        -moz-animation: rotation 0.8s linear infinite;
        -o-animation: rotation 0.8s linear infinite;
        animation: rotation 0.8s linear infinite;

border: 5px solid #bdff00;
        border-top: 5px solid #719900;
        border-radius: 100%;
      }

#status {
        display: inline-block;
        vertical-align: top;
        font-weight: bold;
        color: white;
      }

#progress {
        width: 250px;
        height: 10px;
        -webkit-appearance: none;
        appearance: none;
        padding: 5px;
      }

/* Determines the style of the background of the progress bar */
      progress[value]::-webkit-progress-bar {
        background-color: #8492a6;
        height: 10px;
        border-radius: 15px;
      }
      /* Determines the style of the completed part of the progress bar */
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(left, #719900, #bdff00);
        height: 10px;
        border-radius: 15px;
      }

div.loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }
      div.loading > * {
        padding: 10px;
        margin: 10px;
      }

.output-container {
        text-align: center;
        margin-top: auto;
      }
      .output-button {
        border: none;
        width: 200px;
        height: 25px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
        background-color: black;
        color: white;
        outline-color: #20c20e;
        outline-style: dashed;
        font-family: 'Lucida Console', Monaco, monospace;
      }

#output {
        display: none;
        height: 200px;
        background-color: black;
        color: white;
        font-family: 'Lucida Console', Monaco, monospace;
        outline: none;
        border: none;
        padding: 0;
        width: 100%;
      }

#message-container {
        display: none;
        min-height: 50px;
        background-color: rgba(20, 20, 20, 0.5);
        outline: none;
        border: none;
        padding: 0;
        width: 100%;
        position: absolute;
        top: 0;
      }

#messages {
        margin-left: 50px;
        color: white;
        font-family: 'Lucida Console', Monaco, monospace;
        outline: none;
        border: none;
        padding: 0;
      }

img.qrCode {
        opacity: 1;
        width: 50%;
        height: 50%;
      }

#pauseMenuContainer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

#pauseMenuContainer[hidden] {
        display: none !important;
        opacity: 0;
      }

#pauseMenuBorder {
        background: linear-gradient(135deg, #fa1e4e, transparent 40%);
        padding: 1px;
        border-radius: 4px;
        clip-path: polygon(10.5px 0, 100% 0, 100% 100%, 0 100%, 0 10.5px);
        width: 70vw;
        max-width: 400px;
      }

#pauseMenu {
        display: flex;
        flex-direction: column;
        padding: 60px 30px 60px 30px;
        background: linear-gradient(180deg, #2e273f 16.15%, rgba(46, 39, 63, 0.79) 56.25%, #2e273f 91.15%);
        border-radius: 4px;
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
        animation-name: fadeIn;
        animation-duration: 0.5s;
        opacity: 1;
      }

#pauseMenu button {
        font-weight: 500;
        font-size: 17px;
        color: white;
        background: #fa1e4e;
        border: 1px solid #fa1e4e;
        border-radius: 6px;
        padding: 12px 24px;
        margin: 5px 0;
        -webkit-user-select: none;
        user-select: none;
      }

#pauseMenu button#quitButton {
        background: #fa1e4e40;
      }

#pauseMenu button:hover {
        filter: brightness(1.15);
      }

#pauseMenu button:active {
        filter: brightness(0.85);
      }

#pauseMenu button[hidden] {
        display: none;
      }
    </style>
  </head>
  <body>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"> </canvas>
    <div id="pauseMenuContainer" hidden>
      <div id="pauseMenuBorder">
        <div id="pauseMenu">
          <button id="resumeButton" onclick="resume()">Resume</button>
          <button id="quitButton" onclick="quitIfSupported()">Quit</button>
        </div>
      </div>
    </div>
    <div class="loading">
      <div class="spinner" id="spinner"></div>
      <div class="emscripten" id="status">Downloading...</div>

<div id="message-container">
      <div id="messages"></div>
    </div>
    <script>
      function mergeFiles(fileParts) {
        return new Promise((resolve, reject) => {
          let buffers = []

function fetchPart(index) {
            if (index >= fileParts.length) {
              let mergedBlob = new Blob(buffers)
              let mergedFileUrl = URL.createObjectURL(mergedBlob)
              resolve(mergedFileUrl)
              return
            }
            fetch(fileParts[index])
              .then((response) => {
                if (!response.ok) {
                  throw new Error('Failed to load part ' + (index + 1) + ': HTTP ' + response.status)
                }
                return response.arrayBuffer()
              })
              .then((data) => {
                console.log('Loaded part', index + 1, 'size:', data.byteLength)
                buffers.push(data)
                document.getElementById('progress').value = ((index + 1) / fileParts.length) * 100
                document.getElementById('status').innerText =
                  'Downloading... ' + Math.round(((index + 1) / fileParts.length) * 100) + '%'
                fetchPart(index + 1)
              })
              .catch(reject)
          }
          fetchPart(0)
        })
      }

function getParts(file, start, end) {
        let parts = []
        for (let i = start; i <= end; i++) {
          parts.push(file + '.part' + i)
        }
        return parts
      }

mergeFiles(getParts('game.unx', 1, 5))
        .then(async (url) => {
          window.gameUnxUrl = url

const originalFetch = window.fetch
          window.fetch = async function (...args) {
            let [url, options] = args
            if (typeof url === 'string' && url.includes('game.unx')) {
              console.log('fetch:', url)
              url = window.gameUnxUrl
            } else if (url instanceof Request && url.url.includes('game.unx')) {
              console.log('fetch request:', url.url)
              url = new Request(window.gameUnxUrl, url)
            }
            return originalFetch.call(this, url, options)
          }

const originalOpen = XMLHttpRequest.prototype.open
          XMLHttpRequest.prototype.open = function (method, url, ...rest) {
            if (url.includes('game.unx')) {
              console.log('XHR:', url)
              url = window.gameUnxUrl
            }
            return originalOpen.call(this, method, url, ...rest)
          }
          let index = document.createElement('script')
          index.src = 'index.js'
          document.body.appendChild(index)

let runner = document.createElement('script')
          runner.src = 'runner.js'
          document.body.appendChild(runner)
        })
        .catch((error) => {
          console.error('Failed to merge files:', error)
        })
    </script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"aaf6d32a02dd44fd95a497458a06ef11","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>

CSS