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

No:2462

←

Prev Next

→

time capsule
Developer anonymous｜Date and time 23/6/21 13:18:06
Build time 21.8 sec｜Game capacity 2.915KB｜

Script

タイムカプセルゲーム

10年後、あなたが今の自分に残したい一言を入力してください。

このアプリは、10年後に自分にメッセージを送るタイムカプセルゲームです。最初に画面に表示された文言に従って、メッセージを入力して「ゲームスタート」ボタンをクリックします。すると、画面が切り替わって、10年後に受け取るメッセージと送信日時が表示されます。再度遊ぶ場合は、「もう一度遊ぶ」ボタンをクリックします。スマホでも操作が可能で、絵文字も使って読みやすくしています。JavaScriptで動作しているため、リアルタイムに画面が切り替わるなど、ゲームらしい動きも実現しています。

←

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 {
			margin: 0;
			padding: 0;
			background-color: #eee;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 2.5rem;
			margin-top: 2rem;
		}
		p {
			font-size: 1.5rem;
			margin-top: 1.5rem;
		}
		button {
			font-size: 1.2rem;
			padding: 1rem;
			background-color: #2ecc71;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		input[type="text"] {
			font-size: 1.2rem;
			padding: 0.5rem;
			border: none;
			border-radius: 5px;
			margin-top: 1rem;
		}
		#game-container {
			height: 80vh;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		#question {
			font-size: 2rem;
			margin-top: 5rem;
		}
	</style>
</head>
<body>
	<h1>タイムカプセルゲーム</h1>
	<p>10年後、あなたが今の自分に残したい一言を入力してください。</p>
	<input type="text" id="message-input">
	<button onclick="startGame()">ゲームスタート</button>
	<div id="game-container" style="display: none;">
		<p>10年後、あなたが残しておいたメッセージが届きました。</p>
		<div>
			<p style="font-size: 5rem;" id="message"></p>
			<p style="font-size: 1.2rem;">- 送信日時: <span id="date"></span> -</p>
		</div>
		<button onclick="window.location.reload()">もう一度遊ぶ</button>
	</div>
	<script>
		function startGame() {
			const messageInput = document.getElementById("message-input");
			const message = messageInput.value;
			if (message === "") {
				alert("メッセージを入力してください。");
			} else {
				messageInput.disabled = true;
				document.querySelector("button").style.display = "none";
				document.querySelector("p").innerHTML = "メッセージを送信しました。";
				const now = new Date();
				now.setFullYear(now.getFullYear() + 10);
				const messageDate = now.toLocaleString();
				document.getElementById("date").innerHTML = messageDate;
				document.getElementById("message").innerHTML = message;
				document.getElementById("game-container").style.display = "flex";
			}
		}
	</script>
</body>
</html>