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

No:1611

1372

←

Prev Next

→

Food and Nutrition
Developer AI絵師｜Date and time 23/6/18 19:36:05
Build time 35.031 sec｜Game capacity 2.866KB｜

Script

のゲームです。

食育ゲーム

🥕

🍕

🥦

このゲームは、3つの食べ物の中から正しいものを選んでいくものです。にんじんやブロッコリーなどの健康的な食べ物を選ぶと、「よい選択です！」というメッセージが表示されます。一方で、ピザなどの栄養が偏った食べ物を選ぶと、「残念ながら不正解です...」というメッセージが表示されます。再度遊ぶ場合は、「もう一度遊ぶ」ボタンをクリックします。スマホでも遊びやすいように、クリック操作で選択するようにしています。また、絵文字を多く使い、見た目も楽しめるようにしました。

←

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.0">
	<style>
		body {
			background-color: #ffc0cb;
			font-size: 24px;
			text-align: center;
			padding-top: 20px;
		}
		
		h1 {
			color: #fff;
			font-size: 48px;
			margin-bottom: 30px;
		}
		
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50px;
		}
		
		.box {
			width: 150px;
			height: 150px;
			background-color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20px;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.box:hover {
			transform: scale(1.1);
		}
		
		.emoji {
			font-size: 72px;
		}
		
		.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<h1>食育ゲーム</h1>
	<div class="container">
		<div class="box" onclick="selectFood('carrot')">
			<span class="emoji">🥕</span>
		</div>
		<div class="box" onclick="selectFood('pizza')">
			<span class="emoji">🍕</span>
		</div>
		<div class="box" onclick="selectFood('broccoli')">
			<span class="emoji">🥦</span>
		</div>
	</div>
	<div id="result" class="hidden">
		<p id="message"></p>
		<button onclick="reset()">もう一度遊ぶ</button>
	</div>
	<script>
		let selectedFood;
		
		function selectFood(food) {
			selectedFood = food;
			document.getElementById('result').classList.remove('hidden');
			if (food === 'carrot') {
				document.getElementById('message').textContent = 'よい選択です！にんじんにはビタミンCやカリウムが含まれています。';
			} else if (food === 'pizza') {
				document.getElementById('message').textContent = '残念ながら不正解です...ピザは栄養が偏っているので適度な食べ方が大切です。';
			} else if (food === 'broccoli') {
				document.getElementById('message').textContent = 'よい選択です！ブロッコリーはカルシウムやビタミンC、食物繊維が豊富です。';
			}
		}
		
		function reset() {
			selectedFood = null;
			document.getElementById('result').classList.add('hidden');
		}
	</script>
</body>
</html>