grovedruid
78 lines
3.9 KiB
HTML
78 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title>FSYS Agent — Platformer</title>
|
|
<meta property="og:title" content="FSYS Agent — Platformer" />
|
|
<meta property="og:description" content="Help the Collector from Australia Collect Cards from the Clouds in Kenya!" />
|
|
<meta property="og:image" content="https://jr.fsysgame.org/preview.png" />
|
|
<meta property="og:image:width" content="1728" />
|
|
<meta property="og:image:height" content="1080" />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #0F0F23; overflow: hidden; }
|
|
#game-container { width: 100%; height: 100%; touch-action: manipulation; }
|
|
|
|
#rotate-warning {
|
|
display: none; position: fixed; inset: 0; z-index: 9999;
|
|
background: #0F0F23; color: #FFD700;
|
|
flex-direction: column; align-items: center; justify-content: center;
|
|
font-family: Arial, sans-serif; text-align: center; padding: 20px;
|
|
}
|
|
#rotate-warning .icon { font-size: 64px; margin-bottom: 20px; animation: rotatePhone 2s ease-in-out infinite; }
|
|
#rotate-warning .msg { font-size: 20px; max-width: 280px; line-height: 1.5; }
|
|
@keyframes rotatePhone { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
|
|
|
|
@media (orientation: portrait) and (pointer: coarse) {
|
|
#rotate-warning { display: flex; }
|
|
#game-container { display: none; }
|
|
}
|
|
</style>
|
|
<script src="phaser.min.js"></script>
|
|
<script defer src="https://stats.fsysgame.org/script.js" data-website-id="45be0edb-fbdb-4ce2-b65a-9495f0ea26e9"></script>
|
|
</head>
|
|
<body>
|
|
<div id="rotate-warning">
|
|
<div class="icon">📱</div>
|
|
<div class="msg">Rotate your device to landscape for the best experience</div>
|
|
</div>
|
|
<div id="game-container"></div>
|
|
<button id="fs-btn" style="display:none;position:fixed;bottom:16px;right:16px;z-index:9000;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:10px;padding:10px 18px;font-family:Arial;font-size:14px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);">⛶ Fullscreen</button>
|
|
<script>
|
|
(function(){
|
|
var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
if (!isTouch) return;
|
|
var fsBtn = document.getElementById('fs-btn');
|
|
|
|
function goFull() {
|
|
var e = document.documentElement;
|
|
if (e.requestFullscreen) e.requestFullscreen();
|
|
else if (e.webkitRequestFullscreen) e.webkitRequestFullscreen();
|
|
}
|
|
|
|
fsBtn.style.display = 'block';
|
|
fsBtn.addEventListener('click', goFull);
|
|
|
|
document.querySelector('#game-container').addEventListener('click', goFull);
|
|
document.querySelector('#game-container').addEventListener('touchstart', function(){}, {passive:true});
|
|
|
|
var rotWarn = document.getElementById('rotate-warning');
|
|
var mo = new MutationObserver(function(){
|
|
if (rotWarn.style.display !== 'flex' && !document.fullscreenElement && !document.webkitFullscreenElement) {
|
|
setTimeout(goFull, 300);
|
|
}
|
|
});
|
|
mo.observe(rotWarn, {attributes:true, attributeFilter:['style']});
|
|
})();
|
|
</script>
|
|
<script src="./src/scenes/Boot.js"></script>
|
|
<script src="./src/scenes/Preloader.js"></script>
|
|
<script src="./src/scenes/TitleScreen.js"></script>
|
|
<script src="./src/scenes/Game.js"></script>
|
|
<script src="./src/scenes/GameOver.js"></script>
|
|
<script src="./src/main.js"></script>
|
|
</body>
|
|
</html>
|