Sonic EXE (original)

572 argghh

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 December 2025

Exemple de fiche produit 3D HTML pour une chaussure Nike

16 October 2025

Exemple d'animation CSS : chargement et effets de texte

16 October 2025

Exemples d'animation CSS : chargement, cubes, sphères

HTML

<!DOCTYPE html>

<!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