Spaces:

pgsoft
/

h5staging

Running

App Files Files Community

h5staging / matchn /MatchNGame.html

anan66

upload matchn game

a126c1e about 1 year ago

raw

history blame contribute delete

10.3 kB

	<!DOCTYPE html>
	<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
	<head>
	<meta charset='utf-8' />
	<meta name='viewport' content='width=device-width, user-scalable=no' />
	<title>MatchNGame</title>
	<style type='text/css'>

	body {
	touch-action: none;
	margin: 0;
	border: 0 none;
	padding: 0;
	text-align: center;
	background-color: black;
	}

	#progress-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh; /* 垂直居中整个页面高度 */
	}

	#custom-loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	#logo {
	width: 400px;
	max-width: 80vw;
	margin-bottom: 250px;
	}

	#bottom-text {
	position: absolute;
	bottom: 20px;
	font-size: 14px;
	width: 90%;
	color: white;
	}

	#canvas {
	display: block;
	margin: 0;
	color: white;
	}

	#canvas:focus {
	outline: none;
	}

	.godot {
	font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
	color: #e0e0e0;
	background-color: #3b3943;
	background-image: linear-gradient(to bottom, #403e48, #35333c);
	border: 1px solid #45434e;
	box-shadow: 0 0 1px 1px #2f2d35;
	}


	/* Status display
	* ============== */

	#status {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	/* don't consume click events - make children visible explicitly */
	visibility: hidden;
	}

	@keyframes breathing {
	0% { opacity: 0.5; }
	50% { opacity: 1; }
	100% { opacity: 0.5; }
	}

	/* 外层背景（加载图） */
	#status-progress {
	width: 512px;
	height: 512px;
	background-image: url('loadback.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: visible;
	}

	/* 前景进度图 */
	#status-progress-inner {
	width: 100%;
	height: 100%;
	background-image: url('loadfront.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: inset(0 100% 0 0); /* 动态控制这里 */
	<!-- transition: clip-path 0.3s ease-out; -->
	visibility: visible;
	pointer-events: none;
	}

	/* 百分比文字 */
	#progress-percent {
	position: absolute;
	top: 55%; /* ✅ 在进度条底下 */
	left: 50%;
	transform: translate(-50%, 10px); /* ✅ 微调垂直距离 */
	color: orange;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 1px 1px 2px #000;
	z-index: 2;
	pointer-events: none;
	}

	#status-indeterminate {
	height: 42px;
	visibility: visible;
	position: relative;
	}

	#status-indeterminate > div {
	width: 4.5px;
	height: 0;
	border-style: solid;
	border-width: 9px 3px 0 3px;
	border-color: #2b2b2b transparent transparent transparent;
	transform-origin: center 21px;
	position: absolute;
	}

	#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
	#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
	#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
	#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
	#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
	#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
	#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
	#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }

	#status-notice {
	margin: 0 100px;
	line-height: 1.3;
	visibility: visible;
	padding: 4px 6px;
	visibility: visible;
	}

	/* 手机适配 */
	@media only screen and (orientation: portrait) {
	#status-progress {
	width: 61.8vw;
	height: 61.8vw;
	}
	#logo {
	width: 200px;
	margin-bottom: 150px;
	}
	}

	</style>
	<link id='-gd-engine-icon' rel='icon' type='image/png' href='MatchNGame.icon.png' />
	<link rel='apple-touch-icon' href='MatchNGame.apple-touch-icon.png'/>

	<link rel='apple-touch-icon' href='MatchNGame.apple-touch-icon.png'/>
	<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
	<script type="text/javascript" src="./anan.tool.js"></script>
	<script type="text/javascript" src="./gameapp.js"></script>
	</head>
	<body>
	<canvas id='canvas'>
	HTML5 canvas appears to be unsupported in the current browser.<br />
	Please try updating or use a different browser.
	</canvas>
	<div id="custom-loader">
	<div id="progress-container">
	<img id="logo" src="Logo.png" alt="Loading Logo"/>
	<div id='status-progress'>
	<div id ='status-progress-inner'></div>
	</div>
	<div id="progress-percent">0%</div>
	</div>
	<div id="bottom-text">Set your favorite music as the background music for your work,<br>so that you can share it with others.</div>
	</div>
	<div id='status'>
	<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>
	<div id='status-notice' class='godot' style='display: none;'></div>
	</div>

	<!-- // 文字轮播效果 -->
	<script type='text/javascript'>
	const textElement = document.getElementById("bottom-text");
	let currentIndex = 0;
	let textList = [];

	// 从文件读取内容
	fetch("./HintText.json")
	.then(response => response.json())
	.then(data => {
	textList = data;
	if (textList.length > 0) {
	updateText(); // 初始显示
	setInterval(updateText, 5000); // 每 5 秒切换一次
	}
	})
	.catch(error => {
	console.error("加载消息列表失败：", error);
	});
	function updateText() {
	textElement.innerText = textList[currentIndex];
	currentIndex = (currentIndex + 1) % textList.length;
	}
	</script>

	<script type='text/javascript' src='MatchNGame.js'></script>
	<script type='text/javascript'>//<![CDATA[
	const GODOT_CONFIG = {"args":[],"canvasResizePolicy":0,"executable":"MatchNGame","experimentalVK":false,"fileSizes":{"MatchNGame.pck":56207824,"MatchNGame.wasm":25658069},"focusCanvas":true,"gdnativeLibs":[]};
	var engine = new Engine(GODOT_CONFIG);

	(function() {
	const INDETERMINATE_STATUS_STEP_MS = 100;
	var logo = document.getElementById('logo');
	var statusProgress = document.getElementById('status-progress');
	var statusProgressInner = document.getElementById('status-progress-inner');
	var statusIndeterminate = document.getElementById('status-indeterminate');
	var statusNotice = document.getElementById('status-notice');

	var initializing = true;
	var statusMode = 'hidden';

	var animationCallbacks = [];

	const textElement = document.getElementById("bottom-text");
	let currentIndex = 0;
	let textList = [];

	//定义给 Godot 调用的函数
	window.godotFinishedLoading = function () {
	console.log('Godot 内部加载完成！');
	document.getElementById('status-progress-inner').style.clipPath = `inset(0 0% 0 0)`; // 100%
	setTimeout(() => {
	<!-- setStatusMode('hidden'); -->
	document.getElementById("custom-loader").style.display = "none";
	setStatusMode('hidden');
	initializing = false;
	}, 500); // 延迟一点
	};

	function animate(time) {
	animationCallbacks.forEach(callback => callback(time));
	requestAnimationFrame(animate);
	}
	requestAnimationFrame(animate);

	function setStatusMode(mode) {

	if (statusMode === mode \|\| !initializing)
	return;
	[statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
	elem.style.display = 'none';
	});
	animationCallbacks = animationCallbacks.filter(function(value) {
	return (value != animateStatusIndeterminate);
	});
	switch (mode) {
	case 'progress':
	statusProgress.style.display = 'block';
	logo.style.display = 'block';
	break;
	case 'indeterminate':
	statusIndeterminate.style.display = 'block';
	logo.style.display = 'block';
	animationCallbacks.push(animateStatusIndeterminate);
	break;
	case 'notice':
	statusNotice.style.display = 'block';
	logo.style.display = 'block';
	break;
	case 'hidden':
	if (logo) logo.style.display = 'none';
	break;
	default:
	throw new Error('Invalid status mode');
	}
	statusMode = mode;
	}

	function animateStatusIndeterminate(ms) {
	var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
	if (statusIndeterminate.children[i].style.borderTopColor == '') {
	Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
	child.style.borderTopColor = '';
	});
	statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
	}
	}

	function setStatusNotice(text) {
	while (statusNotice.lastChild) {
	statusNotice.removeChild(statusNotice.lastChild);
	}
	var lines = text.split('\n');
	lines.forEach((line) => {
	statusNotice.appendChild(document.createTextNode(line));
	statusNotice.appendChild(document.createElement('br'));
	});
	};

	function displayFailureNotice(err) {
	var msg = err.message \|\| err;
	console.error(msg);
	setStatusNotice(msg);
	setStatusMode('notice');
	initializing = false;
	};

	if (!Engine.isWebGLAvailable()) {
	displayFailureNotice('WebGL not available');
	} else {
	setStatusMode('indeterminate');
	engine.startGame({
	'onProgress': function (current, total) {
	if (total > 0) {
	let progress = Math.min((current / total) * 100, 90); //进度条卡在90 等待游戏内加载
	progress = Math.floor(progress);
	document.getElementById("progress-percent").innerText = `${progress}%`;
	statusProgressInner.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
	setStatusMode('progress');
	if (current === total) {
	// wait for progress bar animation
	setTimeout(() => {
	setStatusMode('indeterminate');
	}, 500);
	}
	} else {
	setStatusMode('indeterminate');
	}
	},
	}).then(() => {
	// 不隐藏，等待游戏通知
	console.log('Godot 引擎已启动，等待游戏内资源加载完成...');
	//setStatusMode('hidden');
	//initializing = false;
	}, displayFailureNotice);

	}
	})();
	//]]></script>
	</body>
	</html>