XiuXian
/
XiuXianProject


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
							<!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 | 万世镜</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="screen-orientation" content="portrait">
  <script src="https://cdn.jihuigame.com/sdk/h5sdk-1.0.2.js" onerror="console.error('SDK加载失败!')">
  </script>

  <!-- 保持原有head内容不变 -->
  <style>
    /* 视口规则建议放在CSS最前面 */
    @viewport {
      width: device-width;
      zoom: 1.0;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      touch-action: none;
    }

    #unity-container {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
      /* 确保初始状态就居中 */
      left: 0;
      right: 0;
      margin: 0 auto;
      /* 添加过渡效果避免闪动 */
      transition: opacity 0.3s ease;
      opacity: 0;
      /* 初始不可见 */
    }

    /* 基础竖屏尺寸（9:16比例） */
    #unity-canvas {
      width: 360px;
      /* 基准宽度 */
      height: 640px;
      /* 基准高度 */
      background: url('Build/webgl.jpg') center / cover;
      /* 确保canvas初始位置正确 */
      position: relative;
      left: 0;
      margin: 0 auto;
    }

    /* 高质量渲染 */
    #unity-canvas {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -webkit-font-smoothing: subpixel-antialiased;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      #unity-canvas {
        width: 100vw !important;
        /* 精确匹配视口宽度 */
        height: calc(100vw * 16/9) !important;
        /* 强制按比例计算高度 */
        max-height: 100vh !important;
        /* 确保不超过屏幕高度 */
        position: absolute;
        left: 0 !important;
        right: 0 !important;
      }

      #unity-container {
        width: 100vw !important;
        /* 使用视口单位确保精确 */
        overflow: hidden;
        /* 隐藏任何可能的溢出 */
      }

      /* 修复iOS Safari的视口问题 */
      @supports (-webkit-touch-callout: none) {
        #unity-canvas {
          height: -webkit-fill-available !important;
        }
      }
    }

    /* PC端特殊适配 */
    @media (min-width: 769px) {
      #unity-canvas {
        height: 100vh !important;
        /* 独占高度 */
        width: calc(100vh * 9/16) !important;
        /* 按比例计算宽度 */
      }
    }
  </style>
</head>

<body>
  <div id="unity-container" class="unity-desktop">
    <canvas id="unity-canvas" width=960 height=600></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 id="unity-footer">
      <div id="unity-webgl-logo"></div>
      <div id="unity-fullscreen-button"></div>
      <div id="unity-build-title">万世镜</div>
    </div>
  </div>

  <!-- 添加SDK交互的div -->
  <div id="sdk-container" style="display:none;"></div>

  <script>
    // 全局缩放控制
    var currentScale = 1;
    var baseWidth = 360;  // 基准设计宽度
    var baseHeight = 640; // 基准设计高度

    window.onload = function () {
      var container = document.getElementById("unity-container");
      var canvas = document.getElementById("unity-canvas");

      function updateCanvasSize() {
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        var gameRatio = baseWidth / baseHeight;
        // 立即显示容器（避免闪动）
        container.style.opacity = '1';

        // 初始强制居中
        container.style.left = '0';
        container.style.right = '0';
        canvas.style.left = '0';
        canvas.style.margin = '0 auto';

        // PC端特殊处理（高度优先）
        if (windowWidth > 768) {
          // 按高度计算显示宽度
          var displayWidth = windowHeight * gameRatio;
          currentScale = windowHeight / baseHeight;

          // 更新Canvas物理尺寸（解决模糊）
          canvas.style.width = displayWidth + 'px';
          canvas.style.height = windowHeight + 'px';
          canvas.width = displayWidth * window.devicePixelRatio;
          canvas.height = windowHeight * window.devicePixelRatio;
        }
        // 移动端处理
        else {
          // 保持原比例缩放
          var scale = Math.min(
            windowWidth / baseWidth,
            windowHeight / baseHeight
          );
          currentScale = scale;

          // 更新Canvas物理尺寸
          var displayWidth = baseWidth * scale;
          var displayHeight = baseHeight * scale;
          canvas.style.width = displayWidth + 'px';
          canvas.style.height = displayHeight + 'px';
          canvas.width = displayWidth * window.devicePixelRatio;
          canvas.height = displayHeight * window.devicePixelRatio;
        }

        // 强制重绘（解决某些浏览器渲染问题）
        if (window.unityInstance) {
          window.unityInstance.Module.requestAnimationFrame(() => { });
        }
      }

      // 初始化调整
      updateCanvasSize();
      window.addEventListener('resize', updateCanvasSize);
      window.addEventListener('fullscreenchange', updateCanvasSize);
    };
  </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 fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // SDK相关的全局变量
    var sdkParams = null;

    // 修复鼠标/触摸事件坐标
    function fixEventCoordinates(event) {
      if (!window.unityInstance) return;

      var rect = canvas.getBoundingClientRect();
      var scaleX = canvas.width / rect.width;
      var scaleY = canvas.height / rect.height;

      // 修正坐标
      if (event.clientX !== undefined) {
        event.unityX = (event.clientX - rect.left) * scaleX;
        event.unityY = (event.clientY - rect.top) * scaleY;
      }

      // 传递修正后的事件给Unity
      // if (window.unityInstance.Module) {
      //   window.unityInstance.Module.handleEvent(event);
      // }
    }

    // 从URL获取SDK参数
    function getSDKParamsFromUrl() {
      var urlParams = new URLSearchParams(window.location.search);
      return {
        user_id: urlParams.get('user_id'),
        user_name: urlParams.get('user_name'),
        uuid: urlParams.get('uuid'),
        sign: urlParams.get('sign'),
        timestamp: urlParams.get('timestamp'),
        cp_ext: urlParams.get('cp_ext')
      };
    }

    // 初始化SDK参数
    function initSDKParams() {
      sdkParams = getSDKParamsFromUrl();
      console.log("SDK Params:", sdkParams);

      // 这里可以添加将参数传递给Unity的逻辑
      // 例如通过UnityInstance.SendMessage
      //if (unityInstance) {
      //  unityInstance.SendMessage('JHGameSDKGameObject', 'OnInitSDKParams', JSON.stringify(sdkParams));
      //}
    }

    // 显示临时消息横幅
    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();
    }

    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/webgl.loader.js";
    // 监听所有输入事件
    ['mousedown', 'mouseup', 'mousemove', 'touchstart', 'touchend', 'touchmove'].forEach(function (eventName) {
      canvas.addEventListener(eventName, fixEventCoordinates, { passive: false });
    });
    var config = {
      dataUrl: "Build/webgl.data.gz",
      frameworkUrl: "Build/webgl.framework.js.gz",
      codeUrl: "Build/webgl.wasm.gz",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "gfg",
      productName: "万世镜",
      productVersion: "1.0",
      showBanner: unityShowBanner,
      devicePixelRatio: window.devicePixelRatio || 1,
      preserveDrawingBuffer: true
    };

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      // 强制重新计算（解决iOS Safari的1px问题）
      canvas.style.width = '100vw';
      canvas.style.height = 'calc(100vw * 16/9)';

      // 修复Android Chrome的视口问题
      setTimeout(() => {
        canvas.style.width = '100%';
        canvas.style.height = '100%';
      }, 100);
    } else {
      // PC端设置
      config.devicePixelRatio = 1;
    }
    canvas.style.background = "url('" + buildUrl + "/webgl.jpg') center / cover";
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        window.unityInstance = unityInstance;
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1).then(() => {
            setTimeout(() => {
              // 全屏后重新计算尺寸
              canvas.width = canvas.clientWidth * window.devicePixelRatio;
              canvas.height = canvas.clientHeight * window.devicePixelRatio;
              unityInstance.SendMessage('JSBridge', 'OnFullscreenChanged', '1');
              updateCanvasSize();
              if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
                document.getElementById("unity-canvas").style.marginLeft = '0';
              }

            }, 300);
          });
        };

        // Unity实例加载完成后初始化SDK
        initSDKParams();
        // 这里可以添加将unityInstance保存为全局变量的代码
        window.unityInstance = unityInstance;
        setupSDKCallbacks(unityInstance);

      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>

  <!-- 添加SDK交互的JavaScript代码 -->
  <script>
    function onSDKLoaded() {
      setupSDKCallbacks(window.unityInstance);
    }

    // 这部分代码将在Unity加载完成后执行
    function setupSDKCallbacks(unityInstance) {
      // 支付回调示例
      window.JHRecharge = function (params) {
        console.log("调用支付:", params);

        const sdkParams = {
          amount: Number(params.amount), // 确保是 Number 类型
          cpProductId: params.cpProductId,       // cpProductId → cp_product_id
          productName: params.productName,        // productName → product_name
          notifyUrl: "https://webgltest.goufuguiwxw.com/gfg/recharge/jhganmeh5",            // notifyUrl → notify_url
          serverId: params.serverId,              // serverId → server_id
          serverName: params.serverName,          // serverName → server_name
          roleName: params.roleName,              // roleName → role_name
          roleId: params.roleId,                  // roleId → role_id
          roleLevel: params.roleLevel,            // roleLevel → role_level
          vipLevel: params.vipLevel,              // vipLevel → vip_level
          cpOrderId: params.cpOrderId,           // cpOrderId → cp_order_id（关键字段）
          balance: params.balance,                 // 确保是 String 类型（文档要求）
          extra: params.extra,
          fighting: params.fighting
        };

        // 这里可以添加支付前的Unity交互逻辑
        // 例如通知Unity准备支付
        if (unityInstance) {
          unityInstance.SendMessage('JHGameSDKGameObject', 'OnRechargeStart', JSON.stringify(params));
        }

        // 调用SDK支付
        JHGameSDK.recharge(sdkParams).then(function (res) {
          console.log('支付结果:', res);
          // 支付完成后通知Unity
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnRechargeComplete', JSON.stringify(res));
          }
        }).catch(function (error) {
          console.error('支付错误:', error);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnRechargeError', JSON.stringify(error));
          }
        });
      };

      // 创建角色回调
      window.JHCreateRole = function (params) {
        console.log("创建角色:", params);
        if (unityInstance) {
          unityInstance.SendMessage('JHGameSDKGameObject', 'OnCreateRoleStart', JSON.stringify(params));
        }

        JHGameSDK.createRole(params).then(function (res) {
          console.log('创建角色结果:', res);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnCreateRoleComplete', JSON.stringify(res));
          }
        }).catch(function (error) {
          console.error('创建角色错误:', error);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnCreateRoleError', JSON.stringify(error));
          }
        });
      };

      // 角色登录回调
      window.JHLoginRole = function (params) {
        console.log("角色登录:", params);
        if (unityInstance) {
          unityInstance.SendMessage('JHGameSDKGameObject', 'OnLoginRoleStart', JSON.stringify(params));
        }

        JHGameSDK.loginRole(params).then(function (res) {
          console.log('角色登录结果:', res);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnLoginRoleComplete', JSON.stringify(res));
          }
        }).catch(function (error) {
          console.error('角色登录错误:', error);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnLoginRoleError', JSON.stringify(error));
          }
        });
      };

      // 角色升级回调
      window.JHUpgradeRole = function (params) {
        console.log("角色升级:", params);
        if (unityInstance) {
          unityInstance.SendMessage('JHGameSDKGameObject', 'OnUpgradeRoleStart', JSON.stringify(params));
        }

        JHGameSDK.upgradeRole(params).then(function (res) {
          console.log('角色升级结果:', res);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnUpgradeRoleComplete', JSON.stringify(res));
          }
        }).catch(function (error) {
          console.error('角色升级错误:', error);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnUpgradeRoleError', JSON.stringify(error));
          }
        });
      };

      // 顶号回调
      window.JHRepeatLogin = function () {
        console.log("顶号处理");
        if (unityInstance) {
          unityInstance.SendMessage('JHGameSDKGameObject', 'OnRepeatLoginStart', '');
        }

        JHGameSDK.repeatLogin().then(function (res) {
          console.log('顶号结果:', res);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnRepeatLoginComplete', JSON.stringify(res));
          }
        }).catch(function (error) {
          console.error('顶号错误:', error);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnRepeatLoginError', JSON.stringify(error));
          }
        });
      };

      // 备案跳转回调
      window.JHCallIcpBeian = function () {
        console.log("备案跳转");
        if (unityInstance) {
          unityInstance.SendMessage('JHGameSDKGameObject', 'OnCallIcpBeianStart', '');
        }

        JHGameSDK.call({ target: "icpbeian" }).then((res) => {
          console.log('备案跳转结果:', res);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnCallIcpBeianComplete', JSON.stringify(res));
          }
        }).catch(function (error) {
          console.error('备案跳转错误:', error);
          if (unityInstance) {
            unityInstance.SendMessage('JHGameSDKGameObject', 'OnCallIcpBeianError', JSON.stringify(error));
          }
        });
      };
    }
  </script>
</body>

</html>