update0909/UnityDemo

1<!DOCTYPE html>2<html lang="en-us">3  <head>4    <meta charset="utf-8">5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6    <title>Unity WebGL Player | AIrestaurant</title>7    <link rel="shortcut icon" href="TemplateData/favicon.ico">8    <link rel="stylesheet" href="TemplateData/style.css">9  </head>10  <body>11    <div id="unity-container" class="unity-desktop">12      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>13      <div id="unity-loading-bar">14        <div id="unity-logo"></div>15        <div id="unity-progress-bar-empty">16          <div id="unity-progress-bar-full"></div>17        </div>18      </div>19      <div id="unity-warning"> </div>20      <div id="unity-footer">21        <div id="unity-webgl-logo"></div>22        <div id="unity-fullscreen-button"></div>23        <div id="unity-build-title">AIrestaurant</div>24      </div>25    </div>26    <script>27 28      var container = document.querySelector("#unity-container");29      var canvas = document.querySelector("#unity-canvas");30      var loadingBar = document.querySelector("#unity-loading-bar");31      var progressBarFull = document.querySelector("#unity-progress-bar-full");32      var fullscreenButton = document.querySelector("#unity-fullscreen-button");33      var warningBanner = document.querySelector("#unity-warning");34 35      // Shows a temporary message banner/ribbon for a few seconds, or36      // a permanent error message on top of the canvas if type=='error'.37      // If type=='warning', a yellow highlight color is used.38      // Modify or remove this function to customize the visually presented39      // way that non-critical warnings and error messages are presented to the40      // user.41      function unityShowBanner(msg, type) {42        function updateBannerVisibility() {43          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';44        }45        var div = document.createElement('div');46        div.innerHTML = msg;47        warningBanner.appendChild(div);48        if (type == 'error') div.style = 'background: red; padding: 10px;';49        else {50          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';51          setTimeout(function() {52            warningBanner.removeChild(div);53            updateBannerVisibility();54          }, 5000);55        }56        updateBannerVisibility();57      }58 59      var buildUrl = "Build";60      var loaderUrl = buildUrl + "/aaa.loader.js";61      var config = {62        dataUrl: buildUrl + "/aaa.data.gz",63        frameworkUrl: buildUrl + "/aaa.framework.js.gz",64        codeUrl: buildUrl + "/aaa.wasm.gz",65        streamingAssetsUrl: "StreamingAssets",66        companyName: "DefaultCompany",67        productName: "AIrestaurant",68        productVersion: "0.1",69        showBanner: unityShowBanner,70      };71 72      // By default Unity keeps WebGL canvas render target size matched with73      // the DOM size of the canvas element (scaled by window.devicePixelRatio)74      // Set this to false if you want to decouple this synchronization from75      // happening inside the engine, and you would instead like to size up76      // the canvas DOM size and WebGL render target sizes yourself.77      // config.matchWebGLToCanvasSize = false;78 79      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {80        // Mobile device style: fill the whole browser client area with the game canvas:81 82        var meta = document.createElement('meta');83        meta.name = 'viewport';84        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';85        document.getElementsByTagName('head')[0].appendChild(meta);86        container.className = "unity-mobile";87        canvas.className = "unity-mobile";88 89        // To lower canvas resolution on mobile devices to gain some90        // performance, uncomment the following line:91        // config.devicePixelRatio = 1;92 93 94      } else {95        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:96 97        canvas.style.width = "960px";98        canvas.style.height = "600px";99      }100 101      loadingBar.style.display = "block";102 103      var script = document.createElement("script");104      script.src = loaderUrl;105      script.onload = () => {106        createUnityInstance(canvas, config, (progress) => {107          progressBarFull.style.width = 100 * progress + "%";108              }).then((unityInstance) => {109                loadingBar.style.display = "none";110                fullscreenButton.onclick = () => {111                  unityInstance.SetFullscreen(1);112                };113              }).catch((message) => {114                alert(message);115              });116            };117 118      document.body.appendChild(script);119 120    </script>121  </body>122</html>123