Canvas de chargement de jeu WebGL avec HTML et JavaScript

9 thechosen

Remixer Ouvrir dans l'éditeur Publiez votre code

Canvas de chargement de jeu WebGL avec HTML et JavaScript

Recommandé

20 May 2026

Code HTML TikTok débloqué : Intégrer et contourner

4 March 2026

Cuphead WebGL : Charger un jeu Unity à partir de pièces

5 September 2026

Site des millionnaires

HTML

gtag('config', 'G-L7856P3VNT');
</script><!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/web-ports/clover-pit@main/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity Web Player | CloverPit</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
  <style>
#sidebarad1,
#sidebarad2 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 600px;
  padding: 0;
  margin: 0;
  z-index: 999999;
}
#sidebarad1 {
  left: 0;
}
#sidebarad2 {
  right: 0;
}
.sidebar-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  z-index: 10;
}
.sidebar-frame {
  width: 160px;
  height: 600px;
  border: none;
  display: block;
}
</style>
</head>
  <body>
    <div id="loading-text"
    style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING...
  </div>
    <div id="unity-container">
      <canvas id="unity-canvas" width=960 height=540 tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
    </div>
    <script>
      var loadingText = document.querySelector("#loading-text");
    let totalBytes = 0;
    let loadedBytes = 0;

async function fetchWithProgress(url) {
      const response = await fetch(url);
      const reader = response.body.getReader();
      let chunks = [];
      let received = 0;
      while (true) {
        const {
          done,
          value
        } = await reader.read();
        if (done) break;
        received += value.length;
        loadedBytes += value.length;
        chunks.push(value);
        let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
        let mbTotal = '86.96';
        loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
      }
      let fullBuffer = new Uint8Array(received);
      let offset = 0;
      for (let chunk of chunks) {
        fullBuffer.set(chunk, offset);
        offset += chunk.length;
      }
      return fullBuffer.buffer;
    }

async function mergeFiles(fileParts, cacheKey) {
      const buffers = await Promise.all(
        fileParts.map(part => fetchWithProgress(part))
      );
      const mergedBlob = new Blob(buffers);
      return URL.createObjectURL(mergedBlob);
    }

function getParts(file, start, end) {
      let parts = [];
      for (let i = start; i <= end; i++) {
        parts.push(file + ".part" + i);
      }
      return parts;
    }
    (async () => {
      const [dataUrl, wasmUrl] = await Promise.all([
        mergeFiles(getParts("Build/CloverPit.data", 1, 3), "CloverPit.data"),
        mergeFiles(getParts("Build/CloverPit.wasm", 1, 3), "CloverPit.wasm"),
      ]);

var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var warningBanner = document.querySelector("#unity-warning");

// Shows a temporary message banner/ribbon for a few seconds, or
      // a permanent error message on top of the canvas if type=='error'.
      // If type=='warning', a yellow highlight color is used.
      // Modify or remove this function to customize the visually presented
      // way that non-critical warnings and error messages are presented to the
      // user.
      function unityShowBanner(msg, type) {
      }

var buildUrl = "Build";
      var loaderUrl = buildUrl + "/CloverPit.loader.js";
      var config = {
        arguments: [],
        dataUrl: dataUrl,
        frameworkUrl: buildUrl + "/CloverPit.framework.js",
        codeUrl: wasmUrl,
        streamingAssetsUrl: "StreamingAssets",
        companyName: "Panik Arcade",
        productName: "CloverPit",
        productVersion: "1.3",
        showBanner: unityShowBanner,
      };

// By default Unity keeps WebGL canvas render target size matched with
      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
      // Set this to false if you want to decouple this synchronization from
      // happening inside the engine, and you would instead like to size up
      // the canvas DOM size and WebGL render target sizes yourself.
      // config.matchWebGLToCanvasSize = false;

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:
        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);
      }

loadingBar.style.display = "block";

CSS