hyper bac à sable

195 beans

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 January 2026

Horloge React composée de composants d'horloges

13 May 2025

passage de charrette

10 December 2025

Jeu du cercle parfait : Dessiner et marquer des points (Canvas HTML)

HTML

<!DOCTYPE html>
<html lang="en-us">

<head>
      <base href="https://cdn.jsdelivr.net/gh/faralong/test@main/hype/">
    <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">

</head>
  <body style="margin:0;padding:0" class="noselect">
    
    <canvas id="unity-canvas"
      style="position:fixed;top:0;left:0;width:100%;height:100%;outline:none"></canvas>

async function unzipWebpFromExternalBins(binUrls) {
    const blobUrls = {};
    const bytes = await fetchAndCombineZip(binUrls);
    const zip = await JSZip.loadAsync(bytes);
    for (const [filename, file] of Object.entries(zip.files)) {
        if (!file.dir) {
            let mime = '';
            if (filename.endsWith('.js') || filename.endsWith('.mjs')) {
                mime = 'text/javascript';
            } else if (filename.endsWith('.css')) {
                mime = 'text/css';
            } else if (filename.endsWith('.html')) {
                mime = 'text/html';
            } else if (filename.endsWith('.wasm.br')) {
                mime = 'application/wasm';
            } else if (filename.endsWith('.js.br')) {
                mime = 'application/javascript';
            } else if (filename.endsWith('.jpg') || filename.endsWith('.jpeg')) {
                mime = 'image/jpeg';
            }
            const rawBlob = await file.async("blob");
            const blob = mime ? new Blob([rawBlob], { type: mime }) : rawBlob;
            const blobUrl = URL.createObjectURL(blob);
            console.log("Extracted:", filename);
            blobUrls[filename] = blobUrl;
        }
    }
    return blobUrls;
}

let blobUrlss = "";
let binParts = [
  "parts_1.bin",
  "parts_2.bin",
  "parts_3.bin",
  "parts_4.bin",
];

unzipWebpFromExternalBins(binParts).then(blobUrls => {
    blobUrlss = blobUrls;
    const ORIGINAL_CREATE_ELEMENT = document.createElement;
    const ORIGINAL_SET_ATTRIBUTE = Element.prototype.setAttribute;

document.createElement = function(tagName) {
        const el = ORIGINAL_CREATE_ELEMENT.call(this, tagName);

if (tagName.toLowerCase() === 'script') {
            Object.defineProperty(el, 'src', {
                set(newSrc) {
                    const filename = extractFilename(newSrc);
                    const replacement = blobUrlss[filename];
                    if (replacement) {
                        ORIGINAL_SET_ATTRIBUTE.call(el, 'src', replacement);
                    } else {
                        ORIGINAL_SET_ATTRIBUTE.call(el, 'src', newSrc);
                    }
                },
                get() {
                    return el.getAttribute('src');
                },
                configurable: true
            });
        }

return el;
    };

Element.prototype.setAttribute = function(name, value) {
        if (this.tagName === 'SCRIPT' && name === 'src') {
            const filename = extractFilename(value);
            const replacement = blobUrlss[filename];
            if (replacement) {
                return ORIGINAL_SET_ATTRIBUTE.call(this, name, replacement);
            }
        }
        return ORIGINAL_SET_ATTRIBUTE.call(this, name, value);
    };

function extractFilename(url) {
        try {
            return new URL(url, location.href).pathname.split('/').pop();
        } catch {
            return url.split('/').pop(); 
        }
    }

const imageSrcDescriptor = Object.getOwnPropertyDescriptor(Image.prototype, 'src');
    Object.defineProperty(Image.prototype, 'src', {
      set(value) {
        const newURL = rewriteURL(value);
        imageSrcDescriptor.set.call(this, newURL);
      },
      get: imageSrcDescriptor.get,
      configurable: true,
      enumerable: true,
    });

const scriptSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src');
    Object.defineProperty(HTMLScriptElement.prototype, 'src', {
      set(value) {
        const newURL = rewriteURL(value);
        scriptSrcDescriptor.set.call(this, newURL);
      },
      get: scriptSrcDescriptor.get,
      configurable: true,
      enumerable: true,
    });

const linkHrefDescriptor = Object.getOwnPropertyDescriptor(HTMLLinkElement.prototype, 'href');
    Object.defineProperty(HTMLLinkElement.prototype, 'href', {
      set(value) {
        const newURL = rewriteURL(value);
        linkHrefDescriptor.set.call(this, newURL);
      },
      get: linkHrefDescriptor.get,
      configurable: true,
      enumerable: true,
    });

const mediaSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'src');
    Object.defineProperty(HTMLMediaElement.prototype, 'src', {
      set(value) {
        const newURL = rewriteURL(value);
        mediaSrcDescriptor.set.call(this, newURL);
      },
      get: mediaSrcDescriptor.get,
      configurable: true,
      enumerable: true,
    });

// fetch
    const originalFetch = window.fetch;
    window.fetch = function(resource, init) {
      if (typeof resource === "string") {
        resource = rewriteURL(resource);
      } else if (resource instanceof Request) {
        resource = new Request(rewriteURL(resource.url), resource);
      }
      return originalFetch.call(this, resource, init);
    };

// XMLHttpRequest
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, ...rest) {
      const newURL = rewriteURL(url);
      return originalOpen.call(this, method, newURL, ...rest);
    };

const OriginalAudio = window.Audio;
    window.Audio = function(src) {
      const audio = new OriginalAudio();
      if (src) {
        audio.src = rewriteURL(src);
      }
      return audio;
    };
    window.Audio.prototype = OriginalAudio.prototype;

function rewriteURL(original) {
      var trimmed = original.split("/").pop();
      if (trimmed.includes("?")) trimmed = trimmed.split("?")[0]
      return blobUrlss[trimmed] || original;
    }

window.addEventListener("load", function () {
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("ServiceWorker.js");
      }
    });

function setFocus() {
      window.focus();
      canvas.focus();
    }
    window.addEventListener("touchstart", setFocus);
    window.addEventListener("pointerdown", setFocus);
    window.addEventListener("resize", setFocus);
});
    </script>
	<script>
function resizeCanvas() {
    const canvas = document.getElementById("unity-canvas");
   
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    canvas.style.width = window.innerWidth + "px";
    canvas.style.height = window.innerHeight + "px";
}

window.addEventListener("load", resizeCanvas);
window.addEventListener("resize", resizeCanvas);
</script>

</body>
</html>

CSS