Cargador de juegos HTML5 de People Playground

27 iroger7

Abrir en el editor Video Publica tu código

Cargador de juegos HTML5 de People Playground

Recomendado

14 October 2023

Juego de Memoria

13 November 2024

Efecto de marco de fotos CSS 3D para imágenes

15 August 2025

Código HTML para tableta de dibujo con Javascript

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="https://cdn.jsdelivr.net/gh/bubbls/ugss@main/people-playground/">
    <title>people playground.</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="manifest" href="manifest.webmanifest">
    <style>
      #xp-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        background: #ece9d8;
        border: 2px solid #3a6ea5;
        box-shadow: 0 0 0 3px #ffffff inset;
        font-family: Tahoma, sans-serif;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      #xp-loader-title {
        background: linear-gradient(#2b74c7, #1a4a9c);
        color: white;
        padding: 4px 8px;
        font-size: 14px;
      }
      #xp-loader-bar {
        width: 100%;
        height: 18px;
        border: 1px solid #3a6ea5;
        background: white;
        overflow: hidden;
      }
      #xp-loader-fill {
        width: 0%;
        height: 100%;
        background: #4a8be0;
      }
      #unity-loading-bar {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="xp-loader">
      <div id="xp-loader-title">Loading..</div>
      <div id="xp-loader-bar"><div id="xp-loader-fill"></div></div>
      <div id="xp-loader-text">0%</div>
    </div>

<div id="unity-container">
      <canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>
      <div id="unity-warning"></div>
    </div>
    <script>
      window.fileMergerConfig = {
        files: [
          { name: 'pggbog.data', parts: 7 },
          { name: 'pggbog.wasm', parts: 3 }
        ],
        basePath: 'Build/',
        debug: true
      };  
  </script>
  <script src="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@main/merge.js"></script>
    <script>
      window.addEventListener("load", function () {
        if ("serviceWorker" in navigator) {
          navigator.serviceWorker.register("ServiceWorker.js");
        }
      });

var canvas = document.querySelector("#unity-canvas");
      var xpBox = document.querySelector("#xp-loader");
      var xpFill = document.querySelector("#xp-loader-fill");
      var xpText = document.querySelector("#xp-loader-text");
      var warningBanner = document.querySelector("#unity-warning");

var buildUrl = "Build";
      var loaderUrl = buildUrl + "/pggbog.loader.js";
      var config = {
        dataUrl: buildUrl + "/pggbog.data",
        frameworkUrl: buildUrl + "/pggbog.framework.js",
        codeUrl: buildUrl + "/pggbog.wasm",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "Studio Minus",
        productName: "People Playground",
        productVersion: "1",
        showBanner: unityShowBanner
      };

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
      }

Recomendado

Juego de Memoria

Efecto de marco de fotos CSS 3D para imágenes

Código HTML para tableta de dibujo con Javascript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS