Sonic (retro version)

1,015 argghh

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@latest/sonic.exe/">
    <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" />
    <title>GXC Game</title>
    <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: #060612;
      }

body {
        font-family: arial;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: fill-available;
        min-height: 100svh; /* 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%,
          #1c1726 0%,
          #060612 100%
        );
        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;
      }

/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
      canvas.emscripten {
        display: none;
        border: 0px none;
        background-color: black;
        position: relative;
        transition: opacity 5s ease-in;
        -webkit-transition: opacity 5s ease-in;
        opacity: 0;
        filter: blur(0) grayscale(0);
        margin-top: auto;
        margin-bottom: auto;
        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%;
      }

.multiplayer-stats {
        position: absolute;
        left: 20px;
        top: 20px;
        font-family: monospace;
        font-size: 8;
        color: white;
        visibility: hidden;
        background-color: rgba(0, 0, 0, 0.5);
      }

#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: #20c20e;
        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.0;
         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>
        <div
      id="loading-text"
      style="
        color: white;
        font-size: 48px;
        font-family: cursive;
        text-align: center;
        margin-top: 20px;
      "
    >
      LOADING...
    </div>
    <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>

<progress value="0" max="100" id="progress" hidden="1"></progress>
      <img id="QRCode" class="qrCode" src="runner.svg" alt="URL QR Code" hidden="1"></img>
      <img id="QR2Code" class="qrCode" src="runnerLocal.svg" alt="URL QR2 Code" hidden="1"></img>
    </div>
    <div class="multiplayer-stats" id="multiplayer-stats">
      [no stats available]
    </div>
    <div class="output-container" id="output-container">
      <button class="output-button" onclick="toggleConsole()">
        Toggle Console
      </button>
      <button id="QRButton" class="output-button" onclick="toggleQRCode()">
        Show QRCode
      </button>
      <button id="QR2Button" class="output-button" onclick="toggleQRCode2()">
        Show Opera GX QRCode
      </button>
      
      <button class="output-button" id="stats-button" style="visibility: hidden" onclick="toggleStats()">
        Toggle Stats
      </button>
      <button class="output-button" id="share-button" style="visibility: hidden" onclick="navigator.clipboard.writeText(window.shareUrl)">
        Copy Share Url
      </button>
      <button class="output-button" id="log-state-button" onclick="log_next_game_state()" style="visibility: hidden">
        Log State
      </button>
      <input id="output" rows="8"/>
    </div>

window.gameUnxUrl = gameurl;

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);
      };
      loadingText.remove();
          var indexscript = document.createElement("script");
  indexscript.src= "index.js";
  indexscript.type="text/javascript";

var runnerscript = document.createElement("script");
  runnerscript.src= "runner.js";
  runnerscript.async= true;
  runnerscript.type="text/javascript";

document.body.appendChild(indexscript);
    document.body.appendChild(runnerscript);
      })();
  </script>
  </body>
</html>

CSS

Sonic (retro version)

Recommended