Código HTML Canvas de WebGL para Super Mario 64

1,123 GΛMΞ STΔSH

Abrir en el editor Publica tu código

Código HTML Canvas de WebGL para Super Mario 64

Recomendado

22 May 2025

Deslizadores de tres figuras 3D

15 October 2025

Reloj de cuenta regresiva de Halloween Monstruo

26 August 2025

Sitio web de portafolio turco: HTML, CSS, JS, Tailwind

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>

CSS