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

No:4107

313

←

Prev Next

→

Escape game from the cyberspace
Developer AI絵師｜Date and time 23/6/27 12:17:44
Build time 35.887 sec｜Game capacity 3.032KB｜

Script

を作ろうと思います。以下が実装例です。

電脳空間からの脱出ゲーム

👩‍🚀

👾

🚀

🌎

このゲームは、画面内に表示された4つのステージのうち、1つだけがクリック可能（active）になっており、残り3つはクリック不可能（inactive）になっています。スタートボタンを押すと、10秒間のカウントダウンが始まり、その間にクリック可能なステージを見つけてクリックするとゲームクリアとなります。時間内にクリックできなかった場合は、ゲームオーバーとなります。このゲームは、スマホでも遊びやすいように設計されており、絵文字を使ってシンプルに表現しています。部分的にゲーム化することでも、面白いアプリを作ることができます。

←

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: #272727;
		}
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		.button {
			background-color: #444444;
			color: white;
			padding: 10px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 24px;
		}
		.button:hover {
			background-color: #666666;
		}
		.stage {
			background-color: white;
			width: 300px;
			height: 300px;
			border-radius: 5px;
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 64px;
		}
		.stage.active {
			border: 5px solid green;
		}
		.stage.inactive {
			opacity: 0.3;
		}
	</style>
	<script>
		// ボタンクリック時の操作
		function escapeSpace() {
			// ステージの初期化
			var stageElems = document.querySelectorAll('.stage');
			for (var i = 0; i < stageElems.length; i++) {
				stageElems[i].classList.remove('active');
				stageElems[i].classList.add('inactive');
			}

// ゲームの開始
			var timer = 10;
			var timerElem = document.getElementById('timer');
			timerElem.innerHTML = timer;
			var intervalId = setInterval(function() {
				timer--;
				timerElem.innerHTML = timer;
				if (timer === 0) {
					clearInterval(intervalId);
					alert('ゲームオーバー');
				}
			}, 1000);

// ステージの設定
			var stageIndex = Math.floor(Math.random() * stageElems.length);
			stageElems[stageIndex].classList.remove('inactive');
			stageElems[stageIndex].classList.add('active');
			stageElems[stageIndex].addEventListener('click', function() {
				clearInterval(intervalId);
				alert('ゲームクリア');
			});
		}
	</script>
</head>
<body>
	<div class="container">
		<h1>電脳空間からの脱出ゲーム</h1>
		<button class="button" onclick="escapeSpace()">スタート</button>
		<div id="timer"></div>
		<div class="stage inactive">👩‍🚀</div>
		<div class="stage inactive">👾</div>
		<div class="stage inactive">🚀</div>
		<div class="stage inactive">🌎</div>
	</div>
</body>
</html>

このゲームは、スマホでも遊びやすいように設計されており、絵文字を使ってシンプルに表現しています。部分的にゲーム化することでも、面白いアプリを作ることができます。