怪物围城H5适配修正 - Cocos Creator 3.5.0 动态按钮触控修复 - 源码大陆

怪物围城 (3.5.0 动态交互强化版)

本方案由源码大陆优化：专门针对 3.x 引擎后期版本中出现的“按钮状态不刷新”以及“触控坐标脱节”问题进行深度补丁注入。

技术重点
触控映射

核心架构：Cocos Creator 3.5.0
解决痛点：按钮点击无反应 / 坐标偏移

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

动态按钮活性化： 针对 3.5.0 版本中 Button 组件有时不自动更新状态的 Bug，代码强制执行 _updateState，确保奖励领取等关键按钮随时可用。
输入系统坐标对齐： 修复了 __inputManager__ 在全屏切换后的坐标缓存问题，彻底消除“点击位置与按钮位置不重合”的尴尬。
轮询式扫描机制： 怪物围城有许多动态生成的 UI，代码设定了 800ms 的自动扫描周期，专门应对那些后加载、异步生成的广告及交互节点。
Viewport 适配： 针对 3.x 的 CSS 布局注入了 viewport-fit=cover，完美兼容刘海屏手机，防止 UI 元素掉进屏幕黑区。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cocos Creator | FrameWork3.5.0</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="stylesheet" type="text/css" href="style.e598f.css"/>

  <style>
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      background: #000 !important;
      touch-action: none !important;
    }
    #GameDiv {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #000;
      pointer-events: auto !important;   /* 关键：允许点击 */
    }
    #Cocos3dGameContainer, #GameCanvas {
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      pointer-events: auto !important;  /* 关键：允许点击 */
    }
  </style>
</head>
<body>
  <div id="GameDiv" cc_exact_fit_screen="true">
    <div id="Cocos3dGameContainer">
      <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
    </div>
  </div>

  <script src="src/polyfills.bundle.5adbf.js" charset="utf-8"></script>
  <script src="src/system.bundle.692e9.js" charset="utf-8"></script>
  <script src="src/import-map.8dc47.json" type="systemjs-importmap" charset="utf-8"></script>

  <script>
    function fixAdsButtonsAndFullscreen() {
      const gameDiv = document.getElementById('GameDiv');
      const canvas = document.getElementById('GameCanvas');
      if (!gameDiv || !canvas) return;

      const w = window.innerWidth;
      const h = window.innerHeight;

      gameDiv.style.width = `${w}px`;
      gameDiv.style.height = `${h}px`;

      canvas.style.width = '100%';
      canvas.style.height = '100%';

      const dpr = window.devicePixelRatio || 1;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      canvas.focus();

      setTimeout(() => {
        if (window.cc) {
          const view = window.cc.view;
          if (view) {
            view.setResolutionPolicy(window.cc.ResolutionPolicy.SHOW_ALL);
            view.setFrameSize(w, h);
            view.resizeWithBrowserSize(true);
          }

          if (window.cc.game && window.cc.game.resize) {
            window.cc.game.resize();
          }

          // 重置输入系统（解决坐标偏移）
          if (window.cc.sys && window.cc.sys.__inputManager__) {
            window.cc.sys.__inputManager__._updateTouchEnd = true;
          }

          // 强制刷新所有 UI（广告按钮关键）
          if (window.cc.director) {
            const scene = window.cc.director.getScene();
            if (scene) {
              scene.walk(node => {
                const widget = node.getComponent(window.cc.Widget);
                if (widget) widget.updateAlignment();

                const button = node.getComponent(window.cc.Button);
                if (button) {
                  button._updateState();        // 强制按钮状态刷新
                  button.enabled = true;
                }

                const canvasComp = node.getComponent(window.cc.Canvas);
                if (canvasComp) canvasComp.update();
              });
            }
          }
        }
      }, 80);
    }

    // 基础事件
    window.addEventListener('load', fixAdsButtonsAndFullscreen);
    window.addEventListener('resize', fixAdsButtonsAndFullscreen);
    window.addEventListener('DOMContentLoaded', fixAdsButtonsAndFullscreen);
    document.addEventListener('fullscreenchange', fixAdsButtonsAndFullscreen);
    document.addEventListener('webkitfullscreenchange', fixAdsButtonsAndFullscreen);

    // 关键：每800ms自动扫描一次（专门治动态广告按钮）
    setInterval(fixAdsButtonsAndFullscreen, 800);

    // 启动多轮执行
    setTimeout(fixAdsButtonsAndFullscreen, 200);
    setTimeout(fixAdsButtonsAndFullscreen, 800);
    setTimeout(fixAdsButtonsAndFullscreen, 2000);
  </script>

  <script>
    System.import('./index.25e75.js').catch(err => console.error(err));
  </script>
</body>
</html>

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

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

原创 温馨提示：

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

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

本文链接：

THE END