Lienzo HTML WebGL de Super Mario 64

110 31lhelton

Abrir en el editor Publica tu código

Recomendado

18 August 2024

Animación de título interactivo

26 April 2025

Un código de shasshan7236

16 October 2025

Ejemplos de animaciones CSS: Carga, Cubos, Esferas

HTML

<html lang="en-us"><head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Super Mario 64</title>
    <style>
      body, html{
        margin: 0;
        padding: 0;
        width: 100vw;
        min-height: 100vh;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        image-rendering: pixelated;
        scrollbar-width: none;
      }
      ::-webkit-scrollbar {
        display: none;
      }
      #container {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      canvas {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <canvas class="emscripten" id="canvas" width="1920" height="1080" style="cursor: default;"></canvas>
    </div>
    <script type="text/javascript">
      var Module = {
        preRun: [],
        postRun: [],
        print: (function() {
          return function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            console.log(text);
          };
        })(),
        printErr: function(text) {
          if (arguments.length > 1)
            text = Array.prototype.slice.call(arguments).join(' ');
          console.error(text);
        },
        canvas: (function() {
          var canvas = document.getElementById('canvas');
          canvas.width = window.innerWidth; // Todo: how to do this from c++
          canvas.height = window.innerHeight;
          canvas.addEventListener("webglcontextlost", function(e) {
            alert('WebGL context lost. You will need to reload the page.');
            e.preventDefault();
          }, false);
          return canvas;
        })(),
        setStatus: function(text) {
        }
      };
    </script>
    <script async="" type="text/javascript" src="https://cdn.jsdelivr.net/gh/ArkShocer/sm64@main/sm64.us.f3dex2e.js"></script>
    <script>
    </script>

</body></html>

Recomendado

Animación de título interactivo

Un código de shasshan7236

Ejemplos de animaciones CSS: Carga, Cubos, Esferas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS