Juegos para 2, 3 o 4 jugadores

153 davidtheo422

Abrir en el editor Publica tu código

Recomendado

1 November 2025

Tienda online de Nike Air Force 1

12 December 2025

Juego de ping pong retro en JavaScript con rondas especiales

2 September 2025

Ejemplo de animación de fragmento CSS

HTML

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@main/2-3-4-player-game/">
  <title>TwoPlayerGames 2 3 4 Player</title>

div#gameContainer {
      background: transparent !important;
      position: absolute;
    }

div#gameContainer canvas {
      position: absolute;
    }

div#gameContainer canvas[data-pixel-art="true"] {
      position: absolute;
      image-rendering: optimizeSpeed;
      image-rendering: -webkit-crisp-edges;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: optimize-contrast;
      image-rendering: pixelated;
      -ms-interpolation-mode: nearest-neighbor;
    }

.loadingOut {
      width: 250px;
      position: fixed;
      left: 50%;
      top: calc(50% - 8px);
      transform: translate(-50%);
      border: 2px solid white;
      height: 14px;
    }

.centered {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -85px;
      margin-left: -155px;
      width: 300px;
    }
  </style>
</head>

<body>
  <div id="gameContainer">
    <img src="TemplateData/logo.png" class="centered">
    <div class="loadingOut"> </div>
    <canvas id="unity-canvas" data-pixel-art=""></canvas>
      <script>
    window.fileMergerConfig = {
      files: [
        { name: 'TPG_TwoPlayerGames_V01a.data.unityweb', parts: 4 },
      ],
      basePath: 'Build/',
      debug: true
    };
  </script>
  <script src="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@main/merge.js" ></script>
    <script src="Build/TPG_TwoPlayerGames_V01a.loader.js"></script>
    <script>
      var canvas = document.querySelector("#unity-canvas");
      var config = {
        dataUrl: "Build/TPG_TwoPlayerGames_V01a.data.unityweb",
        frameworkUrl: "Build/TPG_TwoPlayerGames_V01a.framework.js.unityweb",
        codeUrl: "Build/TPG_TwoPlayerGames_V01a.wasm.unityweb",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "twoplayergames.org",
        productName: "TwoPlayerGames 2 3 4 Player",
        productVersion: "1.6",
      };
      var scaleToFit;
      var myGameInstance = null;
      try {
        scaleToFit = !!JSON.parse("");
      } catch (e) {
        scaleToFit = true;
      }

function progressHandler(progress) {
        var percent = progress * 100 + '%';
        canvas.style.background = 'linear-gradient(to right, white, white ' + percent + ', transparent ' + percent + ', transparent) no-repeat center';
        canvas.style.backgroundSize = '100% 1rem';
        canvas.style.width = '250px';
        canvas.style.position = 'fixed';
        canvas.style.left = '50%';
        canvas.style.transform = 'translate(-50%)';
      }

function onResize() {
        var container = canvas.parentElement;
        var w;
        var h;

if (scaleToFit) {
          w = window.innerWidth;
          h = window.innerHeight;

var r = 450 / 800;

if (w * r > window.innerHeight) {
            w = Math.min(w, Math.ceil(h / r));
          }
          h = Math.floor(w * r);
        } else {
          w = 800;
          h = 450;
        }

container.style.width = canvas.style.width = w + "px";
        container.style.height = canvas.style.height = h + "px";
        container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
        container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";
      }

createUnityInstance(canvas, config, progressHandler).then(function(instance) {
        canvas = instance.Module.canvas;
        myGameInstance = instance;
        onResize();
      });

window.addEventListener('resize', onResize);
      onResize();
    </script>

<script type="text/javascript" src="js/rhmApi.js"></script>

</div>

</body>

</html>

CSS