Skip to content

D
dap-hu
Commit 9d680b71 authored by Vũ Gia Vương's avatar Vũ Gia Vương
Browse files
Options

add build template

parent 480f3ce2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 605 additions and 318 deletions
assets/main.fire
View file @ 9d680b71
This diff is collapsed.
build-templates/web-mobile/index.html 0 → 100644
View file @ 9d680b71
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FreeTheKey</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="portrait" />
<meta name="x5-orientation" content="portrait" />
<!--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-mobile.css"/> -->
<link rel="icon" href="favicon.ico" />
</head>
<body>
<!-- <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
<div id="splash">
<div class="progress-bar stripes">
<span style="width: 0%"></span>
</div>
</div> -->
<script>
let isMobile = false;
(function (a) {
if (
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
a
) ||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
a.substr(0, 4)
)
)
isMobile = true;
})(navigator.userAgent || navigator.vendor || window.opera);
let html = ``;
let html2 = ``;
if (isMobile) {
html = `
<canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
<div id="splash">
<div class="progress-bar stripes">
<span style="width: 0%"></span>
</div>
</div>
`;
html2 = `<link rel="stylesheet" type="text/css" href="style-mobile.css"/>`;
} else {
html = `
<div id="GameDiv">
<canvas id="GameCanvas"></canvas>
<div id="splash">
<div class="progress-bar stripes">
<span style="width: 0%"></span>
</div>
</div>
</div>
`;
html2 = `<link rel="stylesheet" type="text/css" href="style-desktop.css"/>`;
}
document.head.innerHTML += html2;
document.body.insertAdjacentHTML("afterbegin", html);
</script>
<script src="src/settings.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
<script type="text/javascript">
(function () {
// open web debugger console
if (typeof VConsole !== "undefined") {
window.vConsole = new VConsole();
}
var debug = window._CCSettings.debug;
var splash = document.getElementById("splash");
splash.style.display = "block";
function loadScript(moduleName, cb) {
function scriptLoaded() {
document.body.removeChild(domScript);
domScript.removeEventListener("load", scriptLoaded, false);
cb && cb();
}
var domScript = document.createElement("script");
domScript.async = true;
domScript.src = moduleName;
domScript.addEventListener("load", scriptLoaded, false);
document.body.appendChild(domScript);
}
loadScript(debug ? "cocos2d-js.js" : "cocos2d-js-min.js", function () {
if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
loadScript(debug ? "physics.js" : "physics-min.js", window.boot);
} else {
window.boot();
}
});
})();
</script>
</body>
</html>
build-templates/web-mobile/style-desktop.css 0 → 100644
View file @ 9d680b71
body {
cursor: default;
padding: 0;
/* border: 0;*/
margin: 0;
text-align: center;
/* background-color: black;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./background.png"); */
font-family: Helvetica, Verdana, Arial, sans-serif;
}
body,
canvas,
div {
outline: 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 */
}
#Cocos2dGameContainer {
position: absolute;
margin: 0;
overflow: hidden;
left: 0px;
top: 0px;
}
canvas {
background-color: rgba(0, 0, 0, 0);
}
a:link,
a:visited {
color: #000;
}
a:active,
a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.footer {
font-size: x-small;
}
#splash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./splash.png) no-repeat center;
background-size: cover;
}
.progress-bar {
background-color: #1a1a1a;
position: absolute;
left: 50%;
top: 80%;
height: 15px;
width: 200px;
margin: 0 -100px;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: block;
height: 100%;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
transition: width 0.4s ease-in-out;
background-color: #3dc5de;
}
.stripes span {
background-size: 30px 30px;
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
animation: animate-stripes 1s linear infinite;
}
@keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60px 0;
}
}
h1 {
color: #444;
text-shadow: 3px 3px 15px;
}
#GameDiv {
width: calc(100vh * 45 / 80);
height: 100vh;
margin: 0 auto;
background: black;
position: relative;
}
build-templates/web-mobile/style-mobile.css 0 → 100644
View file @ 9d680b71
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;
/* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 */
/* overflow cannot be applied in Cocos2dGameContainer,
otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */
overflow: hidden;
}
#Cocos2dGameContainer {
position: absolute;
margin: 0;
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;
}
@media (orientation: landscape) {
#splash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./splash.png) no-repeat center;
background-size: cover;
}
}
@media (orientation: portrait) {
#splash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./splash.png) no-repeat center;
background-size: cover;
}
}
.progress-bar {
position: absolute;
left: 27.5%;
top: 80%;
height: 15px;
padding: 2px;
width: 45%;
border-radius: 7px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: block;
height: 100%;
border-radius: 5px;
transition: width .4s ease-in-out;
background-color: #06daff;
}
.stripes span {
background-size: 30px 30px;
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%,
transparent 75%, transparent);
animation: animate-stripes 1s linear infinite;
}
@keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment