どうぶつスクールシミュレーター

ようこそ！どうぶつスクールへ！先生の指示に従って、動物たちを育てよう！

←

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>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #B2DDF8;
			text-align: center;
		}
		
		#game {
			margin-top: 20px;
		}
		
		#canvas {
			border: 3px solid #87CEEB;
			background-color: #FFF8DC;
			margin: 0 auto;
		}
		
		#message {
			font-size: 20px;
		}
		
		#buttons {
			margin-top: 20px;
		}
		
		.button {
			display: inline-block;
			margin: 0 10px;
			padding: 10px 20px;
			background-color: #FFF;
			border: none;
			border-radius: 10px;
			font-size: 16px;
			cursor: pointer;
		}
		
		#emoji {
			font-size: 50px;
			margin-top: 20px;
			margin-bottom: 30px;
		}
		
		#emoji img {
			margin-right: 10px;
		}
		
		#lion {
			width: 100px;
		}
	</style>
</head>
<body>
	<h1>どうぶつスクールシミュレーター</h1>
	<div id="game">
		<canvas id="canvas" width="600" height="400"></canvas>
		<div id="message">ようこそ！どうぶつスクールへ！先生の指示に従って、動物たちを育てよう！</div>
		<div id="buttons">
			<button class="button" onclick="feed()">エサをあげる</button>
			<button class="button" onclick="teach()">授業をする</button>
		</div>
		<div id="emoji">
			<img src="https://twemoji.maxcdn.com/2/svg/1f984.svg" alt="unicorn">
			<img src="https://twemoji.maxcdn.com/2/svg/1f6a2.svg" alt="police car">
			<img src="https://twemoji.maxcdn.com/2/svg/1f4d8.svg" alt="blue book">
		</div>
		<img id="lion" src="https://twemoji.maxcdn.com/2/svg/1f981.svg" alt="lion">
	</div>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		// 動物たち
		var animalList = [
			{name: "ぞう", x: 100, y: 200, image: "https://twemoji.maxcdn.com/2/svg/1f418.svg", state: "normal"},
			{name: "うし", x: 400, y: 200, image: "https://twemoji.maxcdn.com/2/svg/1f404.svg", state: "normal"}
		];
		
		// ライオン
		var lion = {name: "ライオン", x: 250, y: 300, image: "https://twemoji.maxcdn.com/2/svg/1f981.svg", state: "normal"};
		
		// エサをあげる
		function feed() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawAnimals();
			
			// ライオンにエサをあげる
			if (lion.state === "hunger") {
				lion.state = "normal";
				showMessage("ライオンはお腹いっぱいになりました！");
				showEmoji("🍖");
			} else {
				showMessage("ライオンはお腹がいっぱいです！");
				showEmoji("💔");
			}
		}
		
		// 授業をする
		function teach() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawAnimals();
			
			// 動物たちに授業する
			for (var i = 0; i < animalList.length; i++) {
				if (animalList[i].state === "lazy") {
					animalList[i].state = "normal";
					showMessage(animalList[i].name + "は勉強しています！");
				} else {
					showMessage(animalList[i].name + "はもう勉強しています！");
				}
			}
			
			// ライオンの状態を変更
			if (lion.state === "hunger") {
				showMessage("ライオンには授業をする前にエサをあげてください！");
				showEmoji("💩");
			} else if (lion.state === "normal") {
				lion.state = "happy";
				showMessage("ライオンは授業が大好きです！");
				showEmoji("🦁");
			} else {
				showMessage("ライオンはもう授業が終わりました！");
			}
		}
		
		// 動物たちを描画する
		function drawAnimals() {
			// ライオンを描画する
			drawAnimal(lion);
			
			// 動物たちを描画する
			for (var i = 0; i < animalList.length; i++) {
				drawAnimal(animalList[i]);
			}
		}
		
		// 動物を描画する
		function drawAnimal(animal) {
			// 画像を読み込む
			var imageObj = new Image();
			imageObj.src = animal.image;
			
			imageObj.onload = function() {
				// 画像を描画する
				ctx.drawImage(imageObj, animal.x, animal.y, 100, 100);
				
				// 状態を表示する
				ctx.fillStyle = "#333";
				ctx.font = "16px sans-serif";
				ctx.textAlign = "center";
				
				switch (animal.state) {
					case "hunger":
						ctx.fillText("お腹が空いています", animal.x + 50, animal.y + 120);
						break;
					case "lazy":
						ctx.fillText("勉強していません", animal.x + 50, animal.y + 120);
						break;
				}
			};
		}
		
		// メッセージを表示する
		function showMessage(message) {
			document.getElementById("message").textContent = message;
		}
		
		// 絵文字を表示する
		function showEmoji(emoji) {
			document.getElementById("emoji").innerHTML = emoji;
		}
		
		// 新しい動物を追加する
		function addAnimal(animal) {
			animalList.push(animal);
		}
		
		// 新しい動物を追加
		addAnimal({name: "らいおん", x: 500, y: 200, image: "https://twemoji.maxcdn.com/2/svg/1f981.svg", state: "normal"});
		
		// ゲームを開始する
		drawAnimals();
	</script>
</body>
</html>