Cargador de juegos HTML5 con integración con Yandex SDK

Abrir en el editor Publica tu código

Recomendado

4 February 2025

Ejemplo de código HTML de la página de inicio de sesión en turco

HTML

<!DOCTYPE html>

<head>
  <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" />
  <link rel="stylesheet" href="./style.css" /> 
  
  <script src="https://cdn.jsdelivr.net/gh/gn-math/assets@main/yandex-sdk.js?lol"></script>
  <style>
    canvas:focus {
      outline: none;
    }

html,
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      height: 100%;
    }
  </style>
  
</head>

<body class="dark">
  <div id="unity-container" class="unity-desktop">
    <canvas id="unity-canvas" tabindex="-1"></canvas>
  </div>
  <div id="loading-cover" style="display: none">
    <div id="unity-loading-bar">
      <div id="unity-logo"><img src="Images/logo.png" /></div>
      <div id="unity-progress-bar-empty" style="display: none">
        <div id="unity-progress-bar-full"></div>
      </div>
      <div class="spinner"></div>
    </div>
  </div>
  
  <script>
            function mergeFiles(fileParts) {
            return new Promise((resolve, reject) => {
                let buffers = [];

const container = document.querySelector("#unity-container");
    const canvas = document.querySelector("#unity-canvas");
    const loadingCover = document.querySelector("#loading-cover");
    const progressBarEmpty = document.querySelector(
      "#unity-progress-bar-empty"
    );
    const progressBarFull = document.querySelector(
      "#unity-progress-bar-full"
    );
    const spinner = document.querySelector(".spinner");

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
    }

// The background image when loading the game. When building a build, the code changes depending on the project settings.

loadingCover.style.display = "";

let StartUnityInstance;
    let ygGameInstance = null;
    let ysdk = null;
    let initYSDK = false;
    let initGame = false;
    let syncInit = false;
    let isVisibility = true;
    let isPausedGame = false;
    const NO_DATA = "no data";

document.addEventListener("contextmenu", (event) =>
      event.preventDefault()
    );
    document.addEventListener("visibilitychange", () =>
      SetVisibility(!document.hidden)
    );
    window.addEventListener("blur", () => SetVisibility(false));
    window.addEventListener("focus", () => SetVisibility(true));

window.addEventListener("pointerdown", () => {
      FocusGame();
      SetVisibility(true);
    });

function InstallBlurFocusBlocker() {
      if (!("onblur" in document)) return;
      if (window.blurFocusHandlersInstalled) return;

window.addEventListener("blur", function() {
        let blockerButton = document.createElement("button");
        blockerButton.style.position = "fixed";
        blockerButton.style.top = "0";
        blockerButton.style.left = "0";
        blockerButton.style.width = "100%";
        blockerButton.style.height = "100%";
        blockerButton.style.zIndex = "9999";
        blockerButton.style.backgroundColor = "rgba(0, 0, 0, 0)";
        blockerButton.style.border = "none";
        blockerButton.style.cursor = "default";

document.body.appendChild(blockerButton);

function removeBlocker() {
          if (blockerButton && blockerButton.parentNode) {
            blockerButton.parentNode.removeChild(blockerButton);
          }
          window.removeEventListener("focus", removeBlocker);
        }

window.addEventListener("focus", removeBlocker);
      });

window.blurFocusHandlersInstalled = true;
    }

function FocusGame() {
      canvas.focus();
    }

const PauseCallback = () => {
      isPausedGame = true;
      YG2Instance("SetPauseGame", "true");
    };

const ResumeCallback = () => {
      isPausedGame = false;
      YG2Instance("SetPauseGame", "false");
    };

InstallBlurFocusBlocker();
      // Removed duplicate call, now handled after config is set

if (IsLocalHost() || syncInit) StartUnityInstance_IfUnloaded();
    };

function StartUnityInstance_IfUnloaded() {
      if (spinner.style.display !== "none") StartUnityInstance();
    }

function IsLocalHost() {
      return true;
      try {
        if (window.top !== window) {
          return false;
        }

const host = window.location.hostname;
        if (
          host === "localhost" ||
          host === "127.0.0.1" ||
          host.endsWith(".local")
        ) {
          LogStyledMessage("Local Host");
          return true;
        }
      } catch (error) {
        console.error("Error checking the local host:", error);
        return false;
      }
    }

function YG2Instance(method) {
      if (ygGameInstance == null) return;

if (!initGame) {
        setTimeout(function() {
          if (ygGameInstance)
            ygGameInstance.SendMessage("YG2Instance", method);
        }, 100);
      } else {
        ygGameInstance.SendMessage("YG2Instance", method);
      }
    }

function YG2Instance(method, arg) {
      if (ygGameInstance == null) return;

if (!initGame) {
        setTimeout(function() {
          ygGameInstance.SendMessage("YG2Instance", method, arg);
        }, 100);
      } else {
        ygGameInstance.SendMessage("YG2Instance", method, arg);
      }
    }

function LogStyledMessage(message, style) {
      console.log("%c" + message, style);
    }

function LogStyledMessage(message) {
      console.log(
        "%c" + message,
        "color: #FFDF73; background-color: #454545"
      );
    }

async function InitYSDK() {
      try {
        if (IsLocalHost()) return;

ysdk = await YaGames.init();
        ysdk.on("game_api_pause", PauseCallback);
        ysdk.on("game_api_resume", ResumeCallback);

// Additional init0 modules
        await RequestingEnvironmentData();
        LogStyledMessage("Init EnvirData ysdk");

// Additional init1 modules

// Additional init2 modules
        await InitPlayer();
        LogStyledMessage("Init Authorization ysdk");

// Additional init modules
        await LoadCloud();
        LogStyledMessage("Init Storage ysdk");

await InitPayments();
        LogStyledMessage("Init Payments ysdk");

await GetFlags();
        LogStyledMessage("Init Flags ysdk");

initYSDK = true;
        if (ygGameInstance != null)
          ygGameInstance.SendMessage("YG2Instance", "InitSDKComplete");

LogStyledMessage("Init YandexSDK Success");
      } catch (e) {
        console.error("CRASH Initialization SDK: ", e);
      }

if (!IsLocalHost() && !syncInit) StartUnityInstance_IfUnloaded();
    }

function InitGame() {
      initGame = true;

setTimeout(function() {
        if (isPausedGame == true) YG2Instance("SetPauseGame", "true");
      }, 100);

// Additional start modules
    }

// Additional script modules
    LogStyledMessage("PluginYG2 v2.0041  build: 7");

var cloudSaves = NO_DATA;

function Final(res) {
          cloudSaves = res;
          YG2Instance("SetLoadSaves", res);
          resolve(res);
        }
      });
    }

var paymentsData = NO_DATA;
    let payments = null;

function InitPayments(sendback) {
      return new Promise((resolve) => {
        try {
          if (ysdk == null) {
            Final(NO_DATA);
            return;
          }

ysdk
            .getPayments()
            .then((_payments) => {
              payments = _payments;

payments.getCatalog().then((products) => {
                let productID = [];
                let title = [];
                let description = [];
                let imageURI = [];
                let price = [];
                let priceValue = [];
                let priceCurrencyCode = [];
                let currencyImageURL = [];
                let consumed = [];

payments.getPurchases().then((purchases) => {
                  for (let i = 0; i < products.length; i++) {
                    productID[i] = products[i].id;
                    title[i] = products[i].title;
                    description[i] = products[i].description;
                    imageURI[i] = products[i].imageURI;
                    price[i] = products[i].price;
                    priceValue[i] = products[i].priceValue;
                    priceCurrencyCode[i] = products[i].priceCurrencyCode;
                    currencyImageURL[i] =
                      products[i].getPriceCurrencyImage("medium");

consumed[i] = true;
                    for (i2 = 0; i2 < purchases.length; i2++) {
                      if (purchases[i2].productID === productID[i]) {
                        consumed[i] = false;
                        break;
                      }
                    }
                  }

let jsonPayments = {
                    id: productID,
                    title: title,
                    description: description,
                    imageURI: imageURI,
                    price: price,
                    priceValue: priceValue,
                    priceCurrencyCode: priceCurrencyCode,
                    currencyImageURL: currencyImageURL,
                    consumed: consumed,
                    language: ysdk.environment.i18n.lang,
                  };

Final(JSON.stringify(jsonPayments));
                });
              });
            })
            .catch((e) => {
              LogStyledMessage("Purchases are not available", e.message);
              Final(NO_DATA);
            });
        } catch (e) {
          console.error("CRASH Init Payments: ", e.message);
          Final(NO_DATA);
        }

function Final(res) {
          paymentsData = res;
          YG2Instance("PaymentsEntries", res);
          resolve(res);
        }
      });
    }

function ConsumePurchase(id, onPurchaseSuccess) {
      try {
        if (payments != null) {
          payments.getPurchases().then((purchases) => {
            for (i = 0; i < purchases.length; i++) {
              if (purchases[i].productID === id) {
                payments.consumePurchase(purchases[i].purchaseToken);

if (onPurchaseSuccess) YG2Instance("OnPurchaseSuccess", id);
              }
            }
          });
        } else {
          LogStyledMessage("Consume purchase: payments null");
        }
      } catch (e) {
        console.error("CRASH Consume Purchase: ", e.message);
      }
    }

function ConsumePurchases(onPurchaseSuccess) {
      try {
        if (payments != null) {
          payments.getPurchases().then((purchases) => {
            LogStyledMessage("Unprocessed purchases: ", purchases.length);
            for (i = 0; i < purchases.length; i++) {
              payments.consumePurchase(purchases[i].purchaseToken);

if (onPurchaseSuccess)
                YG2Instance("OnPurchaseSuccess", purchases[i].productID);
            }
          });
        } else {
          LogStyledMessage("Consume purchases: payments null");
        }
      } catch (e) {
        console.error("CRASH Consume purchases: ", e.message);
      }
    }

function SetLeaderboard(name, score, extraData) {
      if (!ysdk) return;

try {
        ysdk.leaderboards.setScore(name, score, extraData);
      } catch (e) {
        console.error("CRASH Set Leaderboard: ", e.message);
      }
    }

function GetLeaderboard(
      nameLB,
      quantityTop,
      quantityAround,
      photoSize,
      auth
    ) {
      if (!ysdk) return;

var jsonEntries = {
        technoName: "",
        isDefault: false,
        isInvertSortOrder: false,
        decimalOffset: 0,
        type: "",
      };

ysdk.leaderboards
        .getDescription(nameLB)
        .then((res) => {
          jsonEntries.technoName = nameLB;
          jsonEntries.isDefault = res.default;
          jsonEntries.isInvertSortOrder = res.description.invert_sort_order;
          jsonEntries.decimalOffset =
            res.description.score_format.options.decimal_offset;
          jsonEntries.type = res.description.type;

return ysdk.leaderboards.getEntries(nameLB, {
            quantityTop: quantityTop,
            includeUser: auth,
            quantityAround: quantityAround,
          });
        })
        .then((res) => {
          let jsonPlayers = EntriesLB(res, photoSize);
          let combinedJson = {
            ...jsonEntries,
            ...jsonPlayers
          };

YG2Instance("LeaderboardEntries", JSON.stringify(combinedJson));
        })
        .catch((err) => {
          if (err.code === "LEADERBOARD_PLAYER_NOT_PRESENT")
            LogStyledMessage("Leaderboard player not present");
          console.error(err);
        });
    }

function EntriesLB(res, photoSize) {
      let LbdEntriesText = "";
      let plCount = res.entries.length;

let ranks = new Array(plCount);
      let photos = new Array(plCount);
      let names = new Array(plCount);
      let scores = new Array(plCount);
      let uniqueIDs = new Array(plCount);
      let extraDataArray = new Array(plCount);

for (i = 0; i < plCount; i++) {
        ranks[i] = res.entries[i].rank;
        scores[i] = res.entries[i].score;
        uniqueIDs[i] = res.entries[i].player.uniqueID;
        photos[i] = res.entries[i].player.getAvatarSrc(photoSize);

if (
          res.entries[i].extraData == "" ||
          res.entries[i].extraData == null
        )
          extraDataArray[i] = NO_DATA;
        else extraDataArray[i] = res.entries[i].extraData;

if (res.entries[i].player.scopePermissions.public_name !== "allow")
          names[i] = "anonymous";
        else names[i] = res.entries[i].player.publicName;

LbdEntriesText +=
          ranks[i] + ". " + names[i] + ": " + scores[i] + "\n";
      }

if (plCount === 0) {
        LbdEntriesText = "no data";
      }

let jsonPlayers = {
        entries: LbdEntriesText,
        ranks: ranks,
        photos: photos,
        names: names,
        scores: scores,
        uniqueIDs: uniqueIDs,
        extraDataArray: extraDataArray,
      };

return jsonPlayers;
    }

let nowFullAdOpen = false;

function InterAdvShow() {
      YG2Instance("CloseInterAdv", "true");
      FocusGame();
      return;
      try {
        if (ysdk == null) {
          LogStyledMessage("Cancel InterAdvShow: SDK is not initialized");
          return;
        }
        if (nowFullAdOpen == true) {
          LogStyledMessage(
            "Cancel InterAdvShow: The advertisement is already open"
          );
          return;
        }

ysdk.adv.showFullscreenAdv({
          callbacks: {
            onOpen: () => {
              LogStyledMessage("Open Interstitial Adv");
              nowFullAdOpen = true;
              if (initGame === true) {
                YG2Instance("OpenInterAdv");
              }
            },
            onClose: (wasShown) => {
              LogStyledMessage("Close Interstitial Adv");
              nowFullAdOpen = false;
              if (initGame === true) {
                if (wasShown) {
                  YG2Instance("CloseInterAdv", "true");
                } else {
                  YG2Instance("CloseInterAdv", "false");
                }
              }
              FocusGame();
            },
            onError: (error) => {
              console.error("Error Interstitial Adv", error);
              nowFullAdOpen = false;
              YG2Instance("ErrorInterAdv");
              FocusGame();
            },
          },
        });
      } catch (e) {
        console.error("CRASH Interstitial Adv Show: ", e.message);
      }
    }

let flasgsData = NO_DATA;

function GetFlags() {
      return new Promise((resolve) => {
        if (ysdk == null) {
          Final(NO_DATA);
          return;
        }
        try {
          ysdk.getFlags().then((flags) => {
            let names = [];
            let values = [];

for (let key in flags) {
              if (flags.hasOwnProperty(key)) {
                names.push(key);
                values.push(flags[key]);
              }
            }

let jsonFlags = {
              names: names,
              values: values,
            };

Final(JSON.stringify(jsonFlags));
          });
        } catch (e) {
          console.error("CRASH Get Flags: ", e.message);
          Final(NO_DATA);
        }

function Final(res) {
          flasgsData = res;
          resolve(res);
        }
      });
    }

var environmentData = NO_DATA;

function RequestingEnvironmentData() {
      return new Promise((resolve) => {
        if (ysdk == null) {
          Final(NO_DATA);
          return;
        }
        try {
          var browser = navigator.userAgent;
          if (
            browser.includes("YaBrowser") ||
            browser.includes("YaSearchBrowser")
          )
            browser = "Yandex";
          else if (browser.includes("Opera") || browser.includes("OPR"))
            browser = "Opera";
          else if (browser.includes("Firefox")) browser = "Firefox";
          else if (browser.includes("MSIE")) browser = "IE";
          else if (browser.includes("Edge")) browser = "Edge";
          else if (browser.includes("Chrome")) browser = "Chrome";
          else if (browser.includes("Safari")) browser = "Safari";
          else browser = "Other";

let jsonEnvir = {
            language: ysdk.environment.i18n.lang,
            domain: ysdk.environment.i18n.tld,
            deviceType: ysdk.deviceInfo.type,
            isMobile: ysdk.deviceInfo.isMobile(),
            isDesktop: ysdk.deviceInfo.isDesktop(),
            isTablet: ysdk.deviceInfo.isTablet(),
            isTV: ysdk.deviceInfo.isTV(),
            appID: ysdk.environment.app.id,
            browserLang: ysdk.environment.browser.lang,
            payload: ysdk.environment.payload,
            platform: navigator.platform,
            browser: browser,
          };

Final(JSON.stringify(jsonEnvir));
          LogStyledMessage("Environment Data: " + JSON.stringify(jsonEnvir));
        } catch (e) {
          console.error("CRASH Requesting Environment Data: ", e.message);
          Final(NO_DATA);
        }

function Final(res) {
          environmentData = res;
          YG2Instance("SetEnvirData", res);
          resolve(res);
        }
      });
    }

var playerData = NO_DATA;
    let player = null;

async function InitPlayer() {
      return new Promise(async (resolve) => {
        try {
          if (!ysdk) return Final(NotAuthorized(false));

player = await ysdk.getPlayer();

if (!player.isAuthorized()) return Final(NotAuthorized());

const authJson = {
            playerAuth: "resolved",
            playerName: player.getName(),
            playerId: player.getUniqueID(),
            playerPhoto: player.getPhoto("small"),
            payingStatus: player.getPayingStatus(),
          };

return Final(JSON.stringify(authJson));
        } catch (e) {
          console.error("CRASH init Player: ", e.message);
          return Final(NotAuthorized(false));
        }

function Final(res) {
          playerData = res;
          YG2Instance("SetAuth", res);
          resolve(res);
        }
      });
    }

function NotAuthorized(isInitSDK = true) {
      let authJson = {
        playerAuth: "rejected",
        playerName: "unauthorized",
        playerId: isInitSDK ? player.getUniqueID() : "unauthorized",
        playerPhoto: "no data",
        payingStatus: "unknown",
      };
      return JSON.stringify(authJson);
    }

document.body.appendChild(script);
  </script>
</body>

</html>

Cargador de juegos HTML5 con integración con Yandex SDK

Recomendado

Fracción de animación

Clon de Pinterest

Ejemplo de código HTML de la página de inicio de sesión en turco

HTML

CSS

JS

Recomendado

Fracción de animación

Clon de Pinterest

Ejemplo de código HTML de la página de inicio de sesión en turco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS