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

No:3264

442

←

Prev Next

→

Game #5! Lets put everything through the bus!
Developer User3589｜Date and time 23/6/24 10:13:44
Build time 45.485 sec｜Game capacity 4.384KB｜

Script

こちらが「バス通しゲーム」となります。

バス通しゲーム

このゲームでは、バス停や現在位置を表示するバスのポップアップが表示されます。スペースバーまたはエンターキー、または「次のバス停へ進む」ボタンを押すことで、現在位置が次のバス停に移動します。すべてのバス停に到着した段階で、ゲームがクリアされます。楽しんでプレイしてください！ 🚌🔜🏁

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

こちらが「バス通しゲーム」となります。

<!DOCTYPE html>
<html>
<head>
	<title>バス通しゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
			font-family: Arial, sans-serif;
			color: #333;
		}

h1 {
			font-size: 1.5rem;
			text-align: center;
			padding: 1rem;
		}

.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			min-height: 80vh;
			max-width: 600px;
			margin: 0 auto;
			padding: 1rem;
			background-color: #fff;
			box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
			border-radius: 0.5rem;
		}

.bus {
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 80%;
			margin: 1rem;
			padding: 1rem;
			background-color: #ffe5db;
			border: 0.25rem solid #ff6659;
			border-radius: 0.25rem;
			box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
		}

.bus:before {
			content: "";
			position: absolute;
			top: -1rem;
			left: 50%;
			transform: translateX(-50%);
			border-top: 1rem solid #ff6659;
			border-left: 1rem solid transparent;
			border-right: 1rem solid transparent;
		}

.bus:after {
			content: "";
			position: absolute;
			bottom: -1rem;
			left: 50%;
			transform: translateX(-50%);
			border-bottom: 1rem solid #ff6659;
			border-left: 1rem solid transparent;
			border-right: 1rem solid transparent;
		}

.bus span {
			display: inline-block;
			margin-left: 1rem;
			font-weight: bold;
			font-size: 1.25rem;
			text-transform: uppercase;
		}

button {
			display: block;
			margin: 0 auto;
			padding: 1rem 2rem;
			background-color: #ff6659;
			color: #fff;
			border: none;
			border-radius: 0.25rem;
			font-weight: bold;
			font-size: 1rem;
			text-transform: uppercase;
			letter-spacing: 0.05rem;
			cursor: pointer;
			box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
		}

button:hover {
			background-color: #ff5549;
		}

.completed {
			color: #4caf50;
			text-align: center;
			font-size: 1.5rem;
			font-weight: bold;
			padding: 1rem;
		}
	</style>
</head>
<body>
	<h1>バス通しゲーム</h1>
	<div class="container"></div>

let busStops = [
			{ name: "渋谷", completed: false },
			{ name: "新宿", completed: false },
			{ name: "池袋", completed: false },
			{ name: "上野", completed: false },
			{ name: "東京", completed: false },
			{ name: "品川", completed: false },
			{ name: "港区", completed: false },
			{ name: "六本木", completed: false }
		];

busStops.forEach((busStop, index) => {
			let bus = document.createElement("div");
			bus.classList.add("bus");
			bus.innerHTML = `<span>${busStop.name}</span> <span>${index + 1}</span>`;
			container.appendChild(bus);
		});

let currentIndex = 0;

showCurrentStop();

function goNextStop() {
			if (currentIndex === busStops.length - 1) {
				let completedMsg = document.createElement("div");
				completedMsg.classList.add("completed");
				completedMsg.textContent = "すべてのバス停に到着しました！";
				container.appendChild(completedMsg);
				return;
			}

currentIndex++;
			showCurrentStop();
		}

document.addEventListener("keydown", event => {
			if (event.key === "Enter") {
				goNextStop();
			}
		});

let button = document.createElement("button");
		button.textContent = "次のバス停へ進む";
		button.addEventListener("click", goNextStop);
		container.appendChild(button);
	</script>
</body>
</html>

このゲームでは、バス停や現在位置を表示するバスのポップアップが表示されます。スペースバーまたはエンターキー、または「次のバス停へ進む」ボタンを押すことで、現在位置が次のバス停に移動します。すべてのバス停に到着した段階で、ゲームがクリアされます。

楽しんでプレイしてください！ 🚌🔜🏁