upload house game

.gitattributes

@@ -41,3 +41,4 @@ house/MatchNGame.pck filter=lfs diff=lfs merge=lfs -text
 matchn/Logo.png filter=lfs diff=lfs merge=lfs -text
 snake/Logo.png filter=lfs diff=lfs merge=lfs -text
 watermelon/Logo.png filter=lfs diff=lfs merge=lfs -text
+house/Logo.png filter=lfs diff=lfs merge=lfs -text

house/HintText.json

@@ -0,0 +1,7 @@
+[
+	"Don't forget to give a like to the game you think is fun!",
+	"Pay attention to the creators you like, and they will remind you of their new works as soon as possible!",
+	"Set your favorite music as the background music for your work, so that you can share it with others.",
+	"Failed the game? The best solution is to play another round.",
+	"Remember to talk more with your little pet!"
+]

house/TowerBlocksGame.html

@@ -14,6 +14,40 @@
 			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;
@@ -51,32 +85,56 @@
 			visibility: hidden;
 		}
 
-		#status-progress {
-			width: 366px;
-			height: 7px;
-			background-color: #38363A;
-			border: 1px solid #444246;
-			padding: 1px;
-			box-shadow: 0 0 2px 1px #1B1C22;
-			border-radius: 2px;
-			visibility: visible;
+		@keyframes breathing {
+			0% { opacity: 0.5; }
+			50% { opacity: 1; }
+			100% { opacity: 0.5; }
 		}
 
-		@media only screen and (orientation:portrait) {
-			#status-progress {
-				width: 61.8%;
-			}
+		/* 外层背景（加载图） */
+		#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%;
-			width: 0;
-			box-sizing: border-box;
-			transition: width 0.5s linear;
-			background-color: #202020;
-			border: 1px solid #222223;
-			box-shadow: 0 0 1px 1px #27282E;
-			border-radius: 3px;
+			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 {
@@ -111,141 +169,218 @@
 			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='TowerBlocksGame.icon.png' />
+	<link id='-gd-engine-icon' rel='icon' type='image/png' href='TowerBlocksGame.icon.png' />
 <link rel='apple-touch-icon' href='TowerBlocksGame.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>
+	<link rel='apple-touch-icon' href='TowerBlocks.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='status'>
-		<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div>
-		<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>
+<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='status-notice' class='godot' style='display: none;'></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' src='TowerBlocksGame.js'></script>
-	<script type='text/javascript'>//<![CDATA[
+<!-- // 文字轮播效果  -->
+<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>
 
-		const GODOT_CONFIG = {"args":[],"canvasResizePolicy":0,"executable":"TowerBlocksGame","experimentalVK":false,"fileSizes":{"TowerBlocksGame.pck":60549072,"TowerBlocksGame.wasm":19761972},"focusCanvas":true,"gdnativeLibs":[]};
-		var engine = new Engine(GODOT_CONFIG);
+<script type='text/javascript' src='TowerBlocks.js'></script>
+<script type='text/javascript'>//<![CDATA[
+const GODOT_CONFIG = {"args":[],"canvasResizePolicy":0,"executable":"TowerBlocks","experimentalVK":false,"fileSizes":{"TowerBlocks.pck":56207824,"TowerBlocks.wasm":25658069},"focusCanvas":true,"gdnativeLibs":[]};
+var engine = new Engine(GODOT_CONFIG);
 
-		(function() {
-			const INDETERMINATE_STATUS_STEP_MS = 100;
-			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');
+(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 initializing = true;
+	var statusMode = 'hidden';
 
-			var animationCallbacks = [];
-			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';
-						break;
-					case 'indeterminate':
-						statusIndeterminate.style.display = 'block';
-						animationCallbacks.push(animateStatusIndeterminate);
-						break;
-					case 'notice':
-						statusNotice.style.display = 'block';
-						break;
-					case 'hidden':
-						break;
-					default:
-						throw new Error('Invalid status mode');
-				}
-				statusMode = mode;
-			}
+	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 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 setStatusMode(mode) {
 
-			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) {
-							statusProgressInner.style.width = current/total * 100 + '%';
-							setStatusMode('progress');
-							if (current === total) {
-								// wait for progress bar animation
-								setTimeout(() => {
-									setStatusMode('indeterminate');
-								}, 500);
-							}
-						} else {
+		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');
-						}
-					},
-				}).then(() => {
-					setStatusMode('hidden');
-					initializing = false;
-				}, displayFailureNotice);
-			}
-		})();
-	//]]></script>
+						}, 500);
+					}
+				} else {
+					setStatusMode('indeterminate');
+				}
+			},
+		}).then(() => {
+			// 不隐藏， 等待游戏通知
+			console.log('Godot 引擎已启动， 等待游戏内资源加载完成...');
+			//setStatusMode('hidden');
+			//initializing = false;
+		}, displayFailureNotice);
+
+	}
+})();
+//]]></script>
 </body>
 </html>
 
+
+

house/TowerBlocksGame.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8e9ae9d009a8d11ea028310e4e81d88664b6d3885a6d221feaea526a26f7393
-size 19761972
+oid sha256:30d8df5794ff9b30728fd91d1c976ba8a25c8b3acd7d4daf89435ebf1b9b840c
+size 15494210