どうぶつスクールシミュレーター：アップデート強制版

上記のコードは、どうぶつスクールシミュレーターのアップデートを強制的に行うゲームです。プログレスバーを使って進捗を表示し、アップデートが完了するとメッセージが表示されます。スマホでも操作可能です。絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>どうぶつスクールシミュレーター：アップデート強制版</title>
	<style>
		body {
			background-color: #FFE4C4;
			font-family: sans-serif;
		}

h1 {
			text-align: center;
			font-size: 2.5rem;
			margin: 1.5rem;
		}

#game-container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

.button {
			background-color: #FFA07A;
			border: none;
			color: white;
			padding: 1rem 2rem;
			font-size: 1.5rem;
			border-radius: 1rem;
			margin: 1.5rem;
			cursor: pointer;
		}

#progress-bar-container {
			background-color: white;
			border-radius: 1rem;
			width: 90%;
			margin: 1.5rem;
			height: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}

#progress-bar {
			background-color: #20B2AA;
			height: 100%;
			border-radius: 1rem;
			position: absolute;
			left: 0;
			top: 0;
			width: 0;
			transition: width 0.5s;
		}

#percent {
			font-size: 1.5rem;
			color: #20B2AA;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>

<body>
	<h1>どうぶつスクールシミュレーター：アップデート強制版</h1>

<button id="update-button" class="button">アップデート開始！</button>

function updateGame() {
			updateButton.disabled = true; // ボタンを押せないようにする

// アップデート中の処理を再現するために、0.1秒ごとにページの下部に移動する
			const intervalId = setInterval(function() {
				window.scrollTo(0, document.body.scrollHeight);
			}, 100);

// アップデートの進捗を示すプログレスバーを動かす
			let progress = 0;
			const progressIntervalId = setInterval(function() {
				progress += 1 / updateDuration * 500; // 0.5秒ごとに進捗が1%増加
				progressBar.style.width = `${progress}%`;
				percent.innerText = `${Math.round(progress)}%`;

if (progress >= 100) {
					clearInterval(progressIntervalId);
					clearInterval(intervalId);
					updateButton.innerText = '再度アップデート';
					resultMessage.innerText = 'アップデートが完了しました！';
					updateButton.disabled = false; // ボタンを再度押せるようにする
				}
			}, 500);
		}

updateButton.addEventListener('click', updateGame);
	</script>
</body>
</html>