Juego de escape de carretera HTML5 Unity WebGL

51 11391

Abrir en el editor Publica tu código

Juego de escape de carretera HTML5 Unity WebGL

Recomendado

28 February 2025

Formulario de registro/inicio de sesión de animación

30 January 2026

Ejemplo de barra de navegación adaptable con CSS puro

16 December 2024

Un código de meriem

HTML

<html lang="en-us">
  <base href="https://cdn.jsdelivr.net/gh/abisdbest/classroom.google.com@45b2d69c626dc365753f6922d2c48c4075683ef5/drive.google.com/escape%20road/">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Escape Road</title>
<link rel="shortcut icon" href="icon.png">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init()</script>
</head>
<style>
  @font-face {
  font-family: myFirstFont;
  src: url(Chainwhacks.otf);
  }
  #logo-canvas, body
  {
    font-family: myFirstFont;
  }
</style>
<body class="dark">
<div id="unity-container" class="unity-desktop"><p style="opacity: 0;position: absolute;">_</p>
<canvas id="unity-canvas"></canvas>
</div>
<div id="loading-cover" style="display:none;background: black;">
<div id="unity-loading-bar">
<canvas id="logo-canvas" style="position: absolute; background-color: black;">
<img src="loading.png" id="ld_bg">
<img src="car-icon.png" id="ld_car">
</canvas>
</div>
</div>

<img id="azlogo" class="az" src="az_logo.png">
<script type="57480f3f31f76c75506c83a0-text/javascript">
    const container = document.querySelector("#unity-container");
    const canvas = document.querySelector("#unity-canvas");
    const loadingCover = document.querySelector("#loading-cover");
    const fullscreenButton = document.querySelector("#unity-fullscreen-button");

const buildUrl = "TemplateData";
    const loaderUrl = buildUrl + "/loader.js";
    const config = {
      dataUrl: buildUrl + "/data.unityweb",
      frameworkUrl: buildUrl + "/framework.js.unityweb",
      codeUrl: buildUrl + "/wasm.unityweb",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "1games.io",
      productName: "Escape Road",
      productVersion: "2.0",
    };

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      config.devicePixelRatio = 1;
    }
    
    function delay(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, ms);
      });
    }
    async function load() {

loadingCover.style.display = "";

var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      load();
    };

// setTimeout(() => {
    //     var progress = 0.5;
    //     logo_loading_percent = progress;
    //     drawCanvas(progress);
    //   }, 1000);

// var progress = 0;
    // setInterval(() => {
    //   logo_loading_percent = progress;
    //   drawCanvas(progress);
    //   progress += 0.01;
    // }, 30);

var logo_loaded = false;
    var logo_loading_percent = 0;

window.onresize = () => {
      // console.log('onresize');
      drawCanvas(logo_loading_percent);
    }
    window.onload = () => {
      // console.log('onload');
      drawCanvas(logo_loading_percent);
    }

var logo_canvas = document.getElementById("logo-canvas");
    function drawCanvas(_percent = 0) {
      if (logo_loaded) {
        return;
      }
      resizeLogoCanvas();
      var ctx = logo_canvas.getContext("2d");
      var ld_bg = document.getElementById("ld_bg");
      var ld_car = document.getElementById("ld_car");

var _sw = logo_canvas.width / 1920;
      var _sh = logo_canvas.height / 1080;

if (_percent > 1) {
        _percent = 1;
      }

//bgbar
      var bgbar_H = 86;
      var bgbar_W = 1383;
      //fillbar
      var fillbar_H = 55;
      var fillbar_W = 1345;
      //Mask
      var maskbar_H = 55;
      var maskbar_W = 1350;
      //bg_bar_mask
      var bgbar_mask_H = 86;
      var bgbar_mask_W = 1383;

var posshowbar_Y = 200;   //position loadingbar

var posbgbar_X = (1920 - bgbar_W) / 2; // center
      var posbgbar_Y = posshowbar_Y;

var posfillbar_X = (1920 - fillbar_W) / 2;
      var posfillbar_Y = posshowbar_Y - 15;

var posmaskbar_X = (1920 - maskbar_W) / 2;
      var posmaskbar_Y = posshowbar_Y - 15;

var _fl = 0;
      var _fl1 = posmaskbar_X + _percent * maskbar_W;

var _fw = maskbar_W - _percent * maskbar_W;

// console.log(`${logo_canvas.width} ${logo_canvas.height}`);
      //background
      ctx.drawImage(ld_bg, 0, 0, logo_canvas.width, logo_canvas.height);

//loading background
      ctx.fillStyle = "#977e21";
      var _lw = 700;
      var _lh = 50;
      ctx.fillRect((1920 - _lw) * 0.5 * _sw, (1080 - 150) * _sh, _lw * _sw, _lh * _sh);

//loading progress
      ctx.fillStyle = "#fad234";
      var _pad = 5;
      var _pw = (_lw - _pad * 2);
      var _ph = _lh - _pad * 2;
      var _px = (1920 - _pw) * 0.5;
      ctx.fillRect(_px * _sw, (1080 - 150 + _pad) * _sh, _pw * _percent * _sw, _ph * _sh);

//car
      var _car_x = _px + _pw * _percent - 100;
      if (_car_x < _px) {
        _car_x = _px;
      }
     // ctx.drawImage(ld_car,  _car_x * _sw, (1080 - 190) * _sh, 100 * _sw, 42 * _sh);

ctx.font = "18px myFirstFont";
      const match = /(?<value>\d+\.?\d*)/;
      const setFontSize = (size) => ctx.font = ctx.font.replace(match, size);
      setFontSize(35 * _sh);
      ctx.textAlign = "center";
      ctx.fillStyle = "#fff";
      ctx.shadowColor = "black";
      ctx.shadowOffsetY = 2;
      var new_per = parseInt(_percent * 100);
      ctx.fillText("" + new_per + "%", logo_canvas.width / 2, logo_canvas.height / 2 + _sh * 425);
    }
    function resizeLogoCanvas() {
      var _w = window.innerWidth;
      var _h = window.innerHeight;
      var _nw = _h * 16 / 9;
      // console.log(`${_w} ${_h} ${_nw}`);
      if (_nw <= _w) {
        logo_canvas.width = _nw;
        logo_canvas.height = _h;
      }
      else {
        logo_canvas.width = _w;
        logo_canvas.height = _w * 9 / 16;
      }

}

// Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
  apiKey: "AIzaSyC2RwMfh0GMuQMtQdijjUo-MEffB4N9xVY",
  authDomain: "escape-road-gm1.firebaseapp.com",
  projectId: "escape-road-gm1",
  storageBucket: "escape-road-gm1.appspot.com",
  messagingSenderId: "713881704715",
  appId: "1:713881704715:web:615cc93a73d9814b24ea0e",
  measurementId: "G-E8C3TNJE0S"
};
window.dataLayer = window.dataLayer || [];
window.gtag = function(){dataLayer.push(arguments);}

window.gtag("config", firebaseConfig.measurementId, {
    cookie_domain: location.hostname,
    cookie_flags: "SameSite=None;Secure",
});
  // Initialize Firebase

const app = firebase.initializeApp(firebaseConfig);
  const auth = getAuth(app);
</script>
<script src="rocket-loader.min.js" data-cf-settings="57480f3f31f76c75506c83a0-|49" defer></script></body>
</html>

CSS