Código de inserción del juego WebGL Granny 2

333 55646093

Abrir en el editor Publica tu código

Código de inserción del juego WebGL Granny 2

Recomendado

6 December 2024

Página de inicio - Casa de lujo

30 August 2025

Animación CSS: barra de progreso y gotas

12 December 2025

Ejemplo de código de interruptor de palanca suave CSS

HTML

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Unity WebGL Player | Granny 2</title> <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/TemplateData/favicon.ico"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bubbls/ruffle@895d0224580381ddd003fc2ab72afead3cf134ad/john.css"/> </head> <body> <div id="unity-container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%;"> <canvas id="unity-canvas" style="position: absolute; width: 100%; height: 100%"></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> YaGames.init().then(ysdk => { console.log('Yandex SDK initialized'); window.ysdk = ysdk; initPlayer(); }); var player; function initPlayer() { return ysdk.getPlayer({ scopes: false }).then(_player => { player = _player; return player; }); } </script> <script> 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"); function unityShowBanner(msg, type) { function updateBannerVisibility() { warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; } var div = document.createElement('div'); div.innerHTML = msg; warningBanner.appendChild(div); if (type == 'error') div.style = 'background: red; padding: 10px;'; else { if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; setTimeout(function() { warningBanner.removeChild(div); updateBannerVisibility(); }, 5000); } updateBannerVisibility(); } let environmentData = { language: "en", domain: "default_domain", deviceType: "desktop", isMobile: false, isDesktop: true, isTablet: false, isTV: false, appID: "default_app_id", browserLang: navigator.language || "en", payload: null, promptCanShow: false, reviewCanShow: false, platform: navigator.platform, browser: (function() { let userAgent = navigator.userAgent; if (userAgent.includes("YaBrowser")) return "Yandex"; if (userAgent.includes("OPR") || userAgent.includes("Opera")) return "Opera"; if (userAgent.includes("Firefox")) return "Firefox"; if (userAgent.includes("MSIE") || userAgent.includes("Trident")) return "IE"; if (userAgent.includes("Edge")) return "Edge"; if (userAgent.includes("Chrome")) return "Chrome"; if (userAgent.includes("Safari")) return "Safari"; return "Other"; })() }; async function mergeFiles(parts, onProgress) { let loaded = 0; const total = parts.length; const blobs = await Promise.all(parts.map(async (part, index) => { const res = await fetch(part); const blob = await res.blob(); loaded++; if (onProgress) onProgress(loaded / total); return blob; })); return URL.createObjectURL(new Blob(blobs)); } async function initializeGame() { var buildUrl = "https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/Build"; var loaderUrl = buildUrl + "/Granny 2.loader.js"; var dataParts = [ "https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/Build/Granny 2_part1.data", "https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/Build/Granny 2_part2.data", "https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/Build/Granny 2_part3.data" ]; var wasmParts = [ "https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/Build/Granny 2_part1.wasm", "https://cdn.jsdelivr.net/gh/forms-docs-slides-glgl/ngng@main/Build/Granny 2_part2.wasm" ]; loadingBar.style.display = "block"; var dataUrl = await mergeFiles(dataParts, progress => { progressBarFull.style.width = (50 * progress) + "%"; }); var wasmUrl = await mergeFiles(wasmParts, progress => { progressBarFull.style.width = (50 + 50 * progress) + "%"; }); var config = { dataUrl: dataUrl, frameworkUrl: buildUrl + "/Granny 2.frameworkx.js", codeUrl: wasmUrl, streamingAssetsUrl: "StreamingAssets", companyName: "Awesome", productName: "Granny 2", productVersion: "1.0", showBanner: unityShowBanner, }; var script = document.createElement("script"); script.src = loaderUrl; script.onload = () => { createUnityInstance(canvas, config, (progress) => { progressBarFull.style.width = (100 * progress) + "%"; }).then((unityInstance) => { myGameInstance = unityInstance; setTimeout(() => { loadingBar.style.display = "none"; }, 500); }).catch((message) => { alert(message); }); }; document.body.appendChild(script); } initializeGame(); </script> </body> </html>

Recomendado

Página de inicio - Casa de lujo

Animación CSS: barra de progreso y gotas

Ejemplo de código de interruptor de palanca suave CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS