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

No:3233

1888

←

Prev Next

→

castle town
Developer sayaensm｜Date and time 23/6/24 8:49:36
Build time 34.019 sec｜Game capacity 3.215KB｜

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 charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: lightblue;
			text-align: center;
		}
		
		h1 {
			margin-top: 50px;
			font-size: 48px;
			color: darkgreen;
		}
		
		p {
			font-size: 24px;
			color: brown;
		}
		
		button {
			padding: 10px 20px;
			font-size: 24px;
			color: white;
			background-color: darkorange;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin: 10px;
			box-shadow: 3px 3px 5px gray;
		}
		
		button:hover {
			background-color: orange;
		}
		
		#message {
			font-size: 36px;
			margin: 20px;
			color: red;
		}
		
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-top: 30px;
		}
		
		.cell {
			width: 60px;
			height: 60px;
			background-color: yellowgreen;
			border: 1px solid black;
			text-align: center;
			font-size: 36px;
			margin: 5px;
			line-height: 60px;
			border-radius: 5px;
			cursor: pointer;
			box-shadow: 3px 3px 5px gray;
		}
		
		.cell:hover {
			background-color: green;
			color: white;
		}
	</style>
</head>
<body>
	<h1>城下町ゲーム</h1>
	<p>隣の家は何をしているかな？</p>
	<button onclick="startGame()">ゲームスタート！</button>
	<div id="message"></div>
	<div class="container">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<script>
		var houses = ['🏠', '🏡', '🏢', '🏬', '🏣', '🏥', '🏦', '🏨', '🏪'];
		
		var selectedHouses = [];
		var matchedHouses = [];
		
		var message = document.getElementById('message');
		
		var cells = document.querySelectorAll('.cell');
		
		function startGame() {
			for (var i = 0; i < cells.length; i++) {
				cells[i].addEventListener('click', checkHouse);
				var randomIndex = Math.floor(Math.random() * houses.length);
				var house = houses[randomIndex];
				selectedHouses.push(house);
				houses.splice(randomIndex, 1);
				cells[i].textContent = house;
			}
			setTimeout(hideHouses, 3000);
		}
		
		function hideHouses() {
			for (var i = 0; i < cells.length; i++) {
				cells[i].textContent = '';
			}
			selectedHouses = [];
		}
		
		function checkHouse() {
			var index = Array.from(cells).indexOf(this);
			var house = selectedHouses[index];
			if (matchedHouses.includes(house)) {
				message.textContent = 'すでに見つかっています！';
				return;
			}
			this.textContent = house;
			if (matchedHouses.length === houses.length) {
				message.textContent = 'おめでとうございます！すべての家を見つけました！';
				return;
			}
			if (selectedHouses.filter(h => h === house).length === 2) {
				message.textContent = 'おめでとうございます！同じ家を見つけました！';
				matchedHouses.push(house);
			} else {
				message.textContent = '違う家です。もう一度探してみてください！';
			}
		}
	</script>
</body>
</html>