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

No:2553

1252

←

Prev Next

→

A game to learn how to fold clothes
Developer User3578｜Date and time 23/6/21 23:10:21
Build time 42.72 sec｜Game capacity 3.516KB｜

Script

服のたたみ方ゲーム

畳みたい服をクリックしてください。

もう一度プレイする

←

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>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			background-color: #F7DC6F;
			text-align: center;
			font-family: sans-serif;
		}
		
		h1 {
			font-size: 3em;
			color: #34495E;
			margin-top: 50px;
			margin-bottom: 20px;
		}
		
		.instructions {
			margin-bottom: 30px;
			font-size: 1.5em;
			color: #34495E;
		}
		
		#clothing {
			width: 80%;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-top: 50px;
		}
		
		.clothing-item {
			font-size: 5em;
			margin: 5px;
			cursor: pointer;
		}
		
		#folded-clothing {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50px;
			margin-bottom: 50px;
		}
		
		.folded-clothing-item {
			font-size: 5em;
			margin: 5px;
		}
		
		#score {
			font-size: 2em;
			color: #34495E;
			margin-bottom: 30px;
		}
		
		#play-again {
			background-color: #34495E;
			color: #FFFFFF;
			font-size: 1.5em;
			padding: 10px 20px;
			border-radius: 10px;
			cursor: pointer;
		}
		
		#play-again:hover {
			background-color: #FFFFFF;
			color: #34495E;
			box-shadow: 0 0 10px #34495E;
		}
	</style>
	<script>
		var clothingItems = ['👕', '👖', '👔', '👗', '👚'];
		var foldedClothingItems = [];
		var score = 0;
		
		window.onload = function() {
			displayClothing();
			displayFoldedClothing();
		};
		
		function displayClothing() {
			var clothingDiv = document.getElementById('clothing');
			clothingDiv.innerHTML = '';
			
			for (var i = 0; i < clothingItems.length; i++) {
				var clothingItem = document.createElement('div');
				clothingItem.className = 'clothing-item';
				clothingItem.innerHTML = clothingItems[i];
				clothingItem.onclick = (function(i) {
					return function() {
						foldClothing(i);
					}
				})(i);
				
				clothingDiv.appendChild(clothingItem);
			}
		}
		
		function displayFoldedClothing() {
			var foldedClothingDiv = document.getElementById('folded-clothing');
			foldedClothingDiv.innerHTML = '';
			
			for (var i = 0; i < foldedClothingItems.length; i++) {
				var foldedClothingItem = document.createElement('div');
				foldedClothingItem.className = 'folded-clothing-item';
				foldedClothingItem.innerHTML = foldedClothingItems[i];
				
				foldedClothingDiv.appendChild(foldedClothingItem);
			}
			
			var scoreDiv = document.getElementById('score');
			scoreDiv.innerHTML = 'Score: ' + score;
		}
		
		function foldClothing(i) {
			var clothingItem = clothingItems.splice(i, 1)[0];
			foldedClothingItems.push(clothingItem);
			foldedClothingItems.sort();
			displayClothing();
			displayFoldedClothing();
			checkWin();
		}
		
		function checkWin() {
			if (clothingItems.length === 0) {
				alert('すごい！全部の服を畳みました。あなたのスコアは' + score + 'です。');
				resetGame();
			}
		}
		
		function resetGame() {
			clothingItems = ['👕', '👖', '👔', '👗', '👚'];
			foldedClothingItems = [];
			score = 0;
			displayClothing();
			displayFoldedClothing();
		}
	</script>
</head>
<body>
	<h1>服のたたみ方ゲーム</h1>
	<div class="instructions">畳みたい服をクリックしてください。</div>
	<div id="clothing"></div>
	<div id="folded-clothing"></div>
	<div id="score"></div>
	<div id="play-again" onclick="resetGame()">もう一度プレイする</div>
</body>
</html>