CocosCreator h5游戏移动端全屏显示

最新推荐文章于 2023-05-19 19:17:26 发布

_大猪

最新推荐文章于 2023-05-19 19:17:26 发布

阅读量1.7w

点赞数 4

分类专栏： javascript h5 CocosCreator 文章标签： javascript h5 全屏

本文链接：https://blog.csdn.net/u013654125/article/details/79034208

版权

CocosCreator 同时被 3 个专栏收录

59 篇文章 3 订阅

订阅专栏

javascript

41 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

文章里的方法主要是针对creator游戏引擎的构建后项目，但是也可以由此文章中的方法，再作针对其他h5游戏引擎的修改，由此借鉴出其他h5游戏引擎的全屏显示。

先来看构建后的文件结构：

其中，红色框里的文件是需要自定义的，css、dist和img文件夹是creator不会构建出来的，需要自己加上去。index.html是creator构建出来的，我们需要对它进行修改。

再看css、dist和img文件夹里的内容：

我们先修改index.html里的代码为：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title>test</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <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">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  
  <!-- force screen orientation on some browser -->
  <meta name="screen-orientation" content=""/>
  <meta name="x5-orientation" content="">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">
  <link rel="stylesheet" type="text/css" href="style-mobile.css"/>
  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
  <script src="dist/orientationchangeend.js"></script>  
</head>
<body id="body-sec">
  <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 id="orientationswipe"></div>
<script src="src/settings.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
<script type="text/javascript" src="dist/index.js"></script>

</body>
</html>

style.css：

/*.content-holder,.flag-holder,.logo-holder,.form-holder {
	border:1px green solid;
}*/
html, body, form {
  	height:101%;
  	width:100%;	
  	margin:0;
  	padding:0;
    overflow: hidden;
}

#orientationswipe {
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/swipe2.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    z-index: 999;
    display : none;
    opacity: .4;
}

index.js：

 //desktop
var isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) !=null;

var isiPad = navigator.userAgent.match(/iPad/i) != null; 

var isiPhone = navigator.userAgent.match(/iPhone|iPod/i) != null;  

//baidu
var isBaidu = navigator.userAgent.match('baidu') != null;

//QQ browser
var isQQ = navigator.userAgent.match('MQQBrowser') != null;

//Saferi Browser
var isFirefox = navigator.userAgent.match('FxiOS') != null;

// UC Browser
var  isUC = navigator.userAgent.indexOf("UCBrowser") != -1;

// Chrome 1+
var isChrome = navigator.userAgent.match('CriOS') != null;

//xiaomi
var isXiaomi = navigator.userAgent.match('XiaoMi') != null;

// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = navigator.userAgent.match('Safari') && !isBaidu && !isFirefox && !isQQ && !isChrome && !isUC && !isXiaomi;

var isAndroid = /android/i.test(navigator.userAgent || navigator.vendor || window.opera);

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;



var OCE = gajus.orientationchangeend({
  debug: false
});

var maxPorHet = 0;
var maxLanHet = 0;

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function nopreventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = true;
}

var bodyTag = document.getElementsByTagName('body')[0]; 
function displaySwipe() {
    document.getElementById("orientationswipe").style.display = "block";
    var isFullScreen =  window.navigator.standalone | false;
    if(!isFullScreen){
        bodyTag.style.height = '150%';
    }
}

function setOrientationSize(maxHet) {
    if(window.innerHeight >= maxHet){
        document.getElementById("orientationswipe").style.display = "none";        
        if(window.innerHeight > maxHet*1.01) {
            maxHet = window.innerHeight;
        }
        if(isSafari) {
            setTimeout(function(){window.scrollTo(0,0);},200); 
        } else {
            bodyTag.style.height = '100%';
        }
        // cmkj.EventCtrl.sendDataEvent("test", window.innerHeight + " v2 " + maxHet + " " + maxPorHet + " " + maxLanHet);
        
    }else {
        displaySwipe();
    }

    return maxHet;
}


function setOnOriention() {
    setTimeout(function(){
        window.scrollTo(0,0);
    },100); 
    if(window.orientation == 0 || window.orientation == 180){
        maxPorHet = setOrientationSize(maxPorHet);
    }
    if(window.orientation == 90 || window.orientation == -90){
        maxLanHet = setOrientationSize(maxLanHet);
    }
}

//safari第一次会自动滑动一下。
var isFirstScroll = true;
function setOnScroll() {
    if(isFirstScroll) {
        isFirstScroll = null;
        return;
    }
    if(window.orientation == 0 || window.orientation == 180){
        maxPorHet = setOrientationSize(maxPorHet);
    }
    if(window.orientation == 90 || window.orientation == -90){
        maxLanHet = setOrientationSize(maxLanHet);
    }
}

window.addEventListener('load', function() {
    if(!iOS) {
        return ;
    }
    if(window.orientation == 0 || window.orientation == 180){
        displaySwipe();
        maxPorHet = window.innerHeight;
    }
    if(window.orientation == 90 || window.orientation == -90){
        displaySwipe();
        maxLanHet = window.innerHeight;
    }

    OCE.on('orientationchangeend', function () {
        setOnOriention();
    });

    if(window.addEventListener){
        window.addEventListener('scroll', setOnScroll, false);
    } else {
        window.attachEvent('onscroll', setOnScroll);
    }
}, false);

orientationchangeend.js：

/**
 * @version 1.1.2
 * @link https://github.com/gajus/orientationchangeend for the canonical source repository
 * @license https://github.com/gajus/orientationchangeend/blob/master/LICENSE BSD 3-Clause
 */
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function (global){
/**
* @link https://github.com/gajus/sister for the canonical source repository
* @license https://github.com/gajus/sister/blob/master/LICENSE BSD 3-Clause
*/
function Sister () {
    var sister = {},
        events = {};

    /**
     * @name handler
     * @function
     * @param {Object} data Event data.
     */

    /**
     * @param {String} name Event name.
     * @param {handler} handler
     * @return {listener}
     */
    sister.on = function (name, handler) {
        var listener = {name: name, handler: handler};
        events[name] = events[name] || [];
        events[name].unshift(listener);
        return listener;
    };

    /**
     * @param {listener}
     */
    sister.off = function (listener) {
        var index = events[listener.name].indexOf(listener);

        if (index != -1) {
            events[listener.name].splice(index, 1);
        }
    };

    /**
     * @param {String} name Event name.
     * @param {Object} data Event data.
     */
    sister.trigger = function (name, data) {
        var listeners = events[name],
            i;

        if (listeners) {
            i = listeners.length;
            while (i--) {
                listeners[i].handler(data);
            }
        }
    };

    return sister;
}

global.gajus = global.gajus || {};
global.gajus.Sister = Sister;

module.exports = Sister;
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],2:[function(require,module,exports){
(function (global){
var Event,
    Sister = require('sister');

Event = function Event (config) {
    var event,
        lastEnd,
        eventEmitter;

    if (!(this instanceof Event)) {
        return new Event(config);
    }

    eventEmitter = Sister();

    event = this;
    event.on = eventEmitter.on;

    config = config || {};

    /**
     * @var {Number} Number of iterations the subject of interval inspection must not mutate to fire "orientationchangeend".
     */
    config.noChangeCountToEnd = config.noChangeCountToEnd || 100;
    /**
     * @var {Number} Number of milliseconds after which fire the "orientationchangeend" if interval inspection did not do it before.
     */
    config.noEndTimeout = 1000 || config.noEndTimeout;
    /**
     * @var {Boolean} Enables logging of the events.
     */
    config.debug = config.debug || false;

    global.addEventListener('orientationchange', function () {
            var interval,
                timeout,
                end,
                lastInnerWidth,
                lastInnerHeight,
                noChangeCount;

            end = function (dispatchEvent) {
                clearInterval(interval);
                clearTimeout(timeout);

                interval = null;
                timeout = null;

                if (dispatchEvent) {
                    eventEmitter.trigger('orientationchangeend');
                }
            };

            // If there is a series of orientationchange events fired one after another,
            // where n event orientationchangeend event has not been fired before the n+2 orientationchange,
            // then orientationchangeend will fire only for the last orientationchange event in the series.
            if (lastEnd) {
                lastEnd(false);
            }

            lastEnd = end;

            interval = setInterval(function () {
                if (global.innerWidth === lastInnerWidth && global.innerHeight === lastInnerHeight) {
                    noChangeCount++;

                    if (noChangeCount === config.noChangeCountToEnd) {
                        if (config.debug) {
                            console.debug('setInterval');
                        }

                        end(true);
                    }
                } else {
                    lastInnerWidth = global.innerWidth;
                    lastInnerHeight = global.innerHeight;
                    noChangeCount = 0;
                }
            });
            timeout = setTimeout(function () {
                if (config.debug) {
                    console.debug('setTimeout');
                }

                end(true);
            }, config.noEndTimeout);
        });
}

global.gajus = global.gajus || {};
global.gajus.orientationchangeend = Event;

module.exports = Event;
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"sister":1}]},{},[2])

最后，有一个动态图，引导用户滑动全屏，swipe2.gif：

2019.5.24更新：

有些手机不能用滑动进入全屏，这样的话，我们可以判断页面是不是可以直接点击进入全屏，再调用滑动进入的功能代码。

下面是判断点击进入全屏和滑动进入全屏功能的项目代码链接：

https://pan.baidu.com/s/1lqjaX2nBf4TieddnFuaIRA

提取码：2ash

_大猪

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
19
评论
CocosCreator h5游戏移动端全屏显示

文章里的方法主要是针对creator游戏引擎的构建后项目，但是也可以由此文章中的方法，再作针对其他h5游戏引擎的修改，由此借鉴出其他h5游戏引擎的全屏显示。先来看构建后的文件结构：其中，红色框里的文件是需要自定义的，css、dist和img文件夹是creator不会构建出来的，需要自己加上去。index.html是creator构建出来的，我们需要对它进行修改。再看css、d...
复制链接

扫一扫