全民吃鸡H5横屏适配版 - Cocos Creator 16:9 全屏锁定与点击校准 - 源码大陆

全民吃鸡 (16:9 横屏全能适配版)

本方案由源码大陆优化：专门解决射击类游戏在横屏模式下最致命的“点击偏移”与“Canvas 比例失真”问题。

修复重点
横屏对齐

显示模式：Landscape (横屏强制)
设计分辨率：1280×720

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

横屏比例锁定： 针对 16:9 射击视角，代码通过 CSS 强制锁定容器比例，并在 Meta 标签中声明 landscape，防止手机转屏导致渲染崩溃。
点击位移校正： 射击游戏对点击要求极高。代码中加入了 inputManager._updateOffset 强制补丁，彻底解决因 Canvas 居中导致的鼠标/触控点位移 Bug。
SHOW_ALL 策略： 采用模式 1 (SHOW_ALL) 配合黑底居中，确保在刘海屏或挖孔屏手机上，左右两侧的操作按钮不会被遮挡。
WebKit 强制渲染： 针对 360 和 X5 内核开启 WebKit 模式，大幅提升 WebGL 的帧率表现，确保吃鸡过程流畅不卡顿。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>源码大陆 | EatChicken (横屏版)</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,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 name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  
  <meta name="screen-orientation" content="landscape"/>
  <meta name="x5-orientation" content="landscape">

  <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;
    }

    /* 严格 16:9 物理容器 */
    #GameDiv {
      position: relative;
      width: 100vw !important; 
      height: 56.25vw !important; /* 9除以16 */
      max-height: 100vh;
      max-width: 177.78vh; /* 16除以9 */
      overflow: hidden;
      background: #000;
      box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }

    #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%; bottom: 20%; width: 80%; height: 4px; border: 1px solid #444; border-radius: 5px; }
    .progress-bar span { display: block; height: 100%; background-color: #34c0e2; }
    .header, .footer { display: none; }
  </style>
</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.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>

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

    // 16:9 横屏专属校准逻辑
    function fixEatChickenLandscape() {
        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. 强制 1280x720 横屏设计分辨率
        // 模式 2 (FIXED_WIDTH) 或 1 (SHOW_ALL)，根据点选精度选择，这里推荐 1
        cc.view.setDesignResolutionSize(1280, 720, 1); 

        // 3. 核心点击补丁：修正横屏位移
        if (cc.internal && cc.internal.inputManager) {
            cc.internal.inputManager._updateOffset();
        }

        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.js', function () {
      
      var originalBoot = window.boot;
      window.boot = function() {
          if (originalBoot) originalBoot();
          
          // 启动后多次校准
          var count = 0;
          var timer = setInterval(function() {
              fixEatChickenLandscape();
              if (++count > 15) clearInterval(timer);
          }, 500);
      };

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

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

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

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

原创 温馨提示：

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

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

本文链接：

THE END