Simulador de camión indio

518 argghh

Abrir en el editor Publica tu código

Recomendado

30 August 2024

Juego de tres en raya

31 January 2025

Películas de tarjetas CSS 3D puras

28 November 2024

Fondo animado de Matrix

HTML

<!DOCTYPE html>

<html lang="en-us" style="height:100%; overflow:hidden">
<head>
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@79091a3feb921044b3597bd32cea7357b43e2d9c/indian-truck-simulator-3d-gh-pages/">
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unity WebGL Player | BlightBorne</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

body {
      overflow: hidden;
    }

#gameContainer canvas {
      display:block;
    }

div#webgl-content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

div#loadingBox {
      width: 100%;
      height: 0px;
      position: absolute;
      top: 50%;
      margin-top: 137px;
      text-align: center;
    }

div#icon {
      width: 300px;
      height: 310px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -185px;
      margin-left: -150px;
      background-image: url("Template/Blight-Borne.jpg");
      background-repeat: no-repeat;
      box-shadow: 1px 1px 5px #141414;
    }

div#box {
      width: 328px;
      height: 367px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -199px;
      margin-left: -164px;
      background: #222;
      box-shadow: 1px 1px 5px #000;
    }

div#bgBar {
      display: none;
      position: absolute;
      width: 300px;
      margin-left: -150px;
      left: 50%;
      height: 18px;
      background-color: #882121;
      box-shadow: 1px 1px 5px #111;
    }

div#progressBar {
      display: none;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      width: 0px;
      height: 18px;
      background-color: #dc4241;
    }

p#loadingInfo {
      color: #fff;
      letter-spacing: 1px;
      position: absolute;
      width: 100%;
      font-family: sans-serif;
      text-align: center;
      top: 50%;
      font-size: 11px;
      font-weight: 500;
      margin-top: 140px;
      text-shadow: 0px 0px 5px #000;
    }

div#spinner {
      position: absolute;
      height: 18px;
      left: 50%;
      margin-left: -150px;
      width: 300px;
      position: relative;
      overflow: hidden;
      background-color: #882121;
      box-shadow: 1px 1px 5px #111;
    }

div#spinner:before {
      display: block;
      position: absolute;
      content: "";
      width: 150%;
      margin-left: -10px;
      height: 10px;
      background-color: #e85352;
      transform: rotate(-5deg);
      animation: loading 1s linear infinite;
    }

@keyframes loading {
      from {
        top: -185%
      }
      to {
        top: 225%
      }
    }
  </style>
 
  <script src="Build/UnityLoader.js"></script>
  <script>
    window.mergedBlobUrls = {};

function getParts(file, start, end) {
      let arr = [];
      for (let i = start; i <= end; i++) {
        arr.push(file + ".part" + i);
      }
      return arr;
    }

function resizeUnityContainer() {
      var container = document.getElementById("gameContainer");
      if (container) {
        container.style.width = window.innerWidth + "px";
        container.style.height = window.innerHeight + "px";
      }
    }

window.addEventListener('resize', resizeUnityContainer);

function UnityProgress(gameInstance, progress) {
      var container = document.getElementById("gameContainer");
      if (container) document.body.style.background = container.style.background;

if (!gameInstance.Module) {
         return;
      } else if (progress === "complete") {
        document.getElementById("loadingBox").style.display = "none";
        document.getElementById("icon").style.display = "none";
        document.getElementById("loadingInfo").style.display = "none";
        document.getElementById("box").style.display = "none";
      } else if (progress === 1 || progress === "preinit") {
        document.getElementById("loadingInfo").innerHTML = "PROCESSING...";
        document.getElementById("spinner").style.display = "inherit";
        document.getElementById("bgBar").style.display = "none";
        document.getElementById("progressBar").style.display = "none";
      } else if (progress > 0) {
        document.getElementById("progressBar").style.width = 300 * progress + "px"
        document.getElementById("loadingInfo").innerHTML = Math.round(progress * 100) + "%";
        document.getElementById("spinner").style.display = "none";
        document.getElementById("bgBar").style.display = "block";
        document.getElementById("progressBar").style.display = "inherit";
      }
    }

window.addEventListener("load", function () {
      fetch("Build/indian_truck_gd_2_0_1.json")
        .then(r => r.json())
        .then(config => {
          return Promise.all([
            mergeFiles(getParts("Build/indian_truck_gd_2_0_1.data.unityweb", 1, 2)),
            mergeFiles(getParts("Build/indian_truck_gd_2_0_1.wasm.code.unityweb", 1, 1)),
            mergeFiles(getParts("Build/indian_truck_gd_2_0_1.wasm.framework.unityweb", 1, 1))
          ]).then(([dataUrl, wasmCodeUrl, wasmFrameworkUrl]) => {
            window.mergedBlobUrls["indian_truck_gd_2_0_1.data.unityweb"] = dataUrl;
            window.mergedBlobUrls["indian_truck_gd_2_0_1.wasm.code.unityweb"] = wasmCodeUrl;
            window.mergedBlobUrls["indian_truck_gd_2_0_1.wasm.framework.unityweb"] = wasmFrameworkUrl;

config.dataUrl = "Build/indian_truck_gd_2_0_1.data.unityweb";
            config.wasmCodeUrl = "Build/indian_truck_gd_2_0_1.wasm.code.unityweb";
            config.wasmFrameworkUrl = "Build/indian_truck_gd_2_0_1.wasm.framework.unityweb";

let blob = new Blob([JSON.stringify(config)], { type: "application/json" });
            let blobUrl = URL.createObjectURL(blob);

CSS