塔防英雄H5适配修正 - 解决点击偏移与UI空气墙 - 源码大陆

塔防英雄 (稳定适配版)

本方案由源码大陆优化：重点拆除由于 Canvas 缩放导致的“点击空气墙”，并找回在长屏手机上消失的功能按钮。

技术重点
坐标对齐

适配模式：SHOW_ALL (模式1)
解决痛点：点击偏移 / 按钮丢失

🛠️ 逻辑优化说明（站长亲测）

拆除空气墙： 塔防游戏对点击精度要求极高。很多适配方案只改了视觉缩放却没同步物理框架，导致“看得到点不到”。本代码通过 setFrameSize 强制同步，彻底解决偏移。
策略切换： 相比 FIXED_WIDTH，本项目采用 SHOW_ALL 策略配合黑边锁定，确保在任何奇葩比例的屏幕下，塔防地图的边缘 UI 都能完整显示。
动态注入检测： 针对 Cocos 引擎启动时会自动重置分辨率的特性，代码加入了 15 次循环注入机制，确保适配逻辑在引擎初始化后依然拥有最高优先级的控制权。
像素强制刷新： 通过主动分发 resize 事件，强制引擎重新计算坐标映射表，避免了从加载页进入游戏瞬间可能出现的画面闪烁。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>源码大陆 | 稳定适配版</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover"/>
  <style>
    /* 强制居中与黑底 */
    html, body {
      margin: 0 !important; padding: 0 !important;
      width: 100%; height: 100%;
      background-color: #000 !important;
      overflow: hidden;
      display: flex; justify-content: center; align-items: center;
    }
    /* 严格 9:16 物理容器，防止 UI 飘走 */
    #GameDiv {
      position: relative;
      width: 56.25vh !important; 
      height: 100vh !important;
      max-width: 100vw;
      max-height: 177.78vw; 
      overflow: hidden;
      background: #000;
    }
    #GameCanvas { width: 100% !important; height: 100% !important; display: block; }
    #splash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #171717; z-index: 99; }
    .progress-bar { position: absolute; left: 10%; top: 50%; width: 80%; height: 3px; border: 1px solid #444; border-radius: 5px; }
    .progress-bar span { display: block; height: 100%; background-color: #34c0e2; }
  </style>
  <link rel="stylesheet" type="text/css" href="style-mobile.25fc5.css"/>
</head>
<body>
  <div id="GameDiv">
    <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
    <div id="splash">
      <div class="progress-bar stripes"><span style="width: 0%"></span></div>
    </div>
  </div>

<script src="src/settings.a4ac8.js" charset="utf-8"></script>
<script src="main.beb2c.js" charset="utf-8"></script>

<script type="text/javascript">
(function () {
    var splash = document.getElementById('splash');
    splash.style.display = 'block';

    // 核心校准：找回返回按钮 + 拆除空气墙
    function fixEverything() {
        if (!window.cc || !cc.view) return;

        var container = document.getElementById('GameDiv');
        var w = container.clientWidth;
        var h = container.clientHeight;

        // 1. 同步物理点击区域，解决空气墙
        cc.view.setFrameSize(w, h);
        
        // 2. 策略：SHOW_ALL 保证 UI 完整，1334 高度给返回按钮留出空间
        cc.view.setDesignResolutionSize(720, 1334, 1); 

        // 3. 2.x 坐标映射强制刷新
        if (cc.view._updateFrameSize) cc.view._updateFrameSize();
        window.dispatchEvent(new Event('resize'));
    }

    function loadScript (moduleName, cb) {
      var domScript = document.createElement('script');
      domScript.async = true;
      domScript.src = moduleName;
      domScript.addEventListener('load', function scriptLoaded () {
          document.body.removeChild(domScript);
          domScript.removeEventListener('load', scriptLoaded, false);
          cb && cb();
      }, false);
      document.body.appendChild(domScript);
    }

    var debug = window._CCSettings.debug;
    // 使用你提供的新版引擎文件名
    loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.327d6.js', function () {
      
      var originalBoot = window.boot;
      window.boot = function() {
          if (originalBoot) originalBoot();
          
          // 循环注入，压制引擎自带的分辨率重置
          var count = 0;
          var timer = setInterval(function() {
              fixEverything();
              if (++count > 15) clearInterval(timer);
          }, 500);
      };

      if (window.CC_PHYSICS_BUILTIN || window.CC_PHYSICS_CANNON) {
        loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
      } else {
        window.boot();
      }
    });

    window.addEventListener('resize', fixEverything);
})();
</script>
</body>
</html>

📢 更多精彩源码适配，尽在源码大陆！

专注于深度解决 H5 游戏开发中的各类“疑难杂症”。欢迎在下方评论区交流。

原创 温馨提示：

感谢阅读！本文由 源码大陆 原创分享。

如果教程对你有帮助，欢迎转发分享给更多朋友！转载请务必保留本文出处。

本文链接：

THE END