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

No:1911

←

Prev Next

→

Flag Puzzles
Developer User3442｜Date and time 23/6/19 14:20:54
Build time 81.236 sec｜Game capacity 4.556KB｜

Script

Connect the flags!

リセットする

←

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 {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #f4f4f4;
		}
		h1 {
			margin: 20px;
			font-size: 36px;
			color: #333;
		}
		.flag {
			display: inline-block;
			margin: 10px;
			width: 100px;
			height: 60px;
			background-size: cover;
			border-radius: 5px;
			box-shadow: 2px 2px 5px #888;
		}
		.selected {
			background-color: #ffcc66;
		}
		.btn {
			display: inline-block;
			margin: 10px;
			padding: 10px 20px;
			background-color: #4caf50;
			color: white;
			text-align: center;
			text-decoration: none;
			border-radius: 5px;
			box-shadow: 2px 2px 5px #888;
			cursor: pointer;
		}
		.btn:hover {
			background-color: #3e8e41;
		}
		@media only screen and (max-width: 480px) {
			.flag {
				width: 70px;
				height: 40px;
				margin: 5px;
			}
			h1 {
				font-size: 24px;
				margin: 10px;
			}
			.btn {
				padding: 8px 16px;
				font-size: 14px;
				margin: 5px 10px;
			}
		}
	</style>
	<script>
		// 国旗のリスト
		var flags = [
			{ name: "日本", emoji: "🇯🇵" },
			{ name: "アメリカ", emoji: "🇺🇸" },
			{ name: "イギリス", emoji: "🇬🇧" },
			{ name: "フランス", emoji: "🇫🇷" },
			{ name: "ロシア", emoji: "🇷🇺" },
			{ name: "中国", emoji: "🇨🇳" },
			{ name: "韓国", emoji: "🇰🇷" },
			{ name: "インド", emoji: "🇮🇳" },
			{ name: "ブラジル", emoji: "🇧🇷" },
			{ name: "オーストラリア", emoji: "🇦🇺" }
		];

var selectedFlags = []; // 選択した国旗のリスト
		var solvedFlags = []; // 正解の国旗のリスト

// 選択した国旗を表示
		function showSelectedFlags() {
			var container = document.getElementById("selected-container");
			container.innerHTML = "";
			if (selectedFlags.length > 0) {
				for (var i = 0; i < selectedFlags.length; i++) {
					var flag = selectedFlags[i];
					var div = document.createElement("div");
					div.classList.add("flag");
					div.style.backgroundImage = "url('flags/" + flag.name + ".png')";
					div.dataset.name = flag.name;
					div.addEventListener("click", onFlagClick);
					container.appendChild(div);
				}
			}
			checkSolved();
		}

// 正解の国旗を表示
		function showSolvedFlags() {
			var container = document.getElementById("solved-container");
			container.innerHTML = "";
			if (solvedFlags.length > 0) {
				for (var i = 0; i < solvedFlags.length; i++) {
					var flag = solvedFlags[i];
					var div = document.createElement("div");
					div.classList.add("flag");
					div.style.backgroundImage = "url('flags/" + flag.name + ".png')";
					div.dataset.name = flag.name;
					container.appendChild(div);
				}
			}
		}

// 国旗がクリックされた時の処理
		function onFlagClick() {
			var flag = { name: this.dataset.name };
			if (this.classList.contains("selected")) {
				this.classList.remove("selected");
				selectedFlags.splice(selectedFlags.indexOf(flag), 1);
			} else {
				if (selectedFlags.length < 2) {
					this.classList.add("selected");
					selectedFlags.push(flag);
				}
			}
			showSelectedFlags();
		}

// 正解をチェック
		function checkSolved() {
			if (selectedFlags.length == 2) {
				var solved = false;
				for (var i = 0; i < flags.length; i++) {
					if (selectedFlags[0].name + selectedFlags[1].name == flags[i].name) {
						solved = true;
						solvedFlags.push(selectedFlags[0], selectedFlags[1]);
						selectedFlags = [];
						showSelectedFlags();
						showSolvedFlags();
						if (solvedFlags.length == flags.length) {
							alert("おめでとう！すべての国旗を繋げました！🎉");
						}
						break;
					}
				}
				if (!solved) {
					alert("残念！繋がっていない国旗です😢");
					selectedFlags = [];
					showSelectedFlags();
				}
			}
		}

// 初期化
		function init() {
			showSelectedFlags();
		}
	</script>
</head>
<body onload="init()">
	<h1>国旗をつなげよう！</h1>
	<div id="selected-container"></div>
	<div id="solved-container"></div>
	<div id="flag-container">
		<?php foreach ($flags as $flag): ?>
			<div class="flag" style="background-image: url('flags/<?php echo $flag['name']; ?>.png')" data-name="<?php echo $flag['name']; ?>" onclick="onFlagClick(this)"></div>
		<?php endforeach; ?>
	</div>
	<a href="#" class="btn" onclick="location.reload()">リセットする</a>
</body>
</html>