I am building a game with cocos creator. The game works on mobile browsers.
I what users to swipe the screen and get it to work on full screen.
There are lot of information available on the web, but I can't seems to get it working for my game.
General idea seems to be to increase the height of div containing the canvas more and call
document.getElementById("GameDiv").style.height = '120%';
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
For some reason this is not working for me.
I must have missed a important step? Can someone point what I am doing wrong?
html {
-ms-touch-action: none;
}
body, canvas, div {
display: block;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
margin: 0;
cursor: default;
color: #888;
background-color: #333;
text-align: center;
font-family: Helvetica, Verdana, Arial, sans-serif;
display: flex;
flex-direction: column;
}
#Cocos2dGameContainer {
position: absolute;
margin: 0;
overflow: hidden;
left: 0px;
top: 0px;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center;
-webkit-box-pack: center;
}
canvas {
background-color: rgba(0, 0, 0, 0);
}
a:link, a:visited {
color: #666;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.footer {
font-size: x-small;
}
.progress-bar {
background-color: #1a1a1a;
position: absolute;
left: 25%;
top: 80%;
height: 14px;
padding: 5px;
width: 50%;
/*margin: 0 -175px; */
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
background-color: #34c2e3;
}
.stripes span {
background-size: 30px 30px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
animation: animate-stripes 1s linear infinite;
}
@keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
#GameDiv, #Cocos3dGameContainer, #GameCanvas {
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cocos Creator | NewProject</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"/>
<!--fix fireball/issues/3568 -->
<!--<meta name="browsermode" content="application">-->
<meta name="x5-page-mode" content="app">
<!--<link rel="apple-touch-icon" href=".png" />-->
<!--<link rel="apple-touch-icon-precomposed" href=".png" />-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="GameDiv">
<div id="Cocos3dGameContainer">
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
</div>
</div>
<!-- Polyfills bundle. -->
<script src="src/polyfills.bundle.js" charset="utf-8"> </script>
<!-- SystemJS support. -->
<script src="src/system.bundle.js" charset="utf-8"> </script>
<!-- Import map -->
<script src="src/import-map.json" type="systemjs-importmap" charset="utf-8"> </script>
<script>
System.import('./index.js').catch(function(err) { console.error(err); })
</script>
<script>
function hideAddressBar() {
console.log("hide address called");
document.getElementById("GameDiv").style.height = '120%';
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
}
</script>
</body>
</html>