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

スコア: 0

YOU WIN!

※ゲーム概要：どうぶつスクールシミュレーターのアップデートを放置した開発者ひさしに代わって、プレイヤーが画面上に表示される色々な動物から2つずつ同じ動物を探し当て、消していきます。全ての動物を消せば、プレイヤーの勝利です。スマホでもプレイしやすいように、選択肢のアイコンは絵文字を使用しています。

←

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 type="text/css">
		body {
			background-color: #F6D8AE;
		}

h1 {
			text-align: center;
			font-size: 3em;
			margin-top: 30px;
			margin-bottom: 30px;
		}

#game {
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

.animal {
			width: 100px;
			height: 100px;
			margin-top: 20px;
			margin-bottom: 20px;
			background-color: #FFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		}

.animal.selected {
			border: 3px solid orange;
		}

.score {
			text-align: center;
			font-size: 2em;
			margin-top: 30px;
		}

.win-message {
			text-align: center;
			font-size: 2em;
			margin-top: 30px;
			display: none;
		}

.play-again {
			display: block;
			margin: 0 auto;
			margin-top: 30px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: orange;
			color: #FFF;
			font-size: 1.2em;
			cursor: pointer;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		}

.play-again:hover {
			background-color: #FFA500;
		}

@media (max-width: 500px) {
			.animal {
				width: 80px;
				height: 80px;
			}
		}

@media (max-width: 400px) {
			.animal {
				width: 60px;
				height: 60px;
			}

h1 {
				font-size: 2em;
			}

.score {
				font-size: 1.5em;
			}

.win-message {
				font-size: 1.5em;
			}

.play-again {
				font-size: 1em;
			}
		}
	</style>
</head>
<body>
	<h1>どうぶつスクールシミュレーター ゲーム</h1>
	<div id="game"></div>
	<div class="score">スコア: <span id="score">0</span></div>
	<div class="win-message">YOU WIN!</div>
	<button class="play-again">もう一度プレイする</button>

// 初期化処理を行うメソッド
			init() {
				// ゲーム画面に色々な動物を表示する
				const animalNames = ['🐶', '🐱', '🐰', '🐻', '🦊', '🐷', '🐯', '🦁'];
				for (let i = 0; i < 8; i++) {
					const animalElement = document.createElement('div');
					animalElement.classList.add('animal');
					animalElement.innerHTML = animalNames[i];
					animalElement.addEventListener('click', () => {
						this.selectAnimal(animalElement); // 現在クリックされた要素を選択する
					});
					document.getElementById('game').appendChild(animalElement);
					this.animals.push(animalElement); // 配列に追加する
				}

this.shuffleAnimals(); // 配列をシャッフルする
			},

// どうぶつをシャッフルするメソッド
			shuffleAnimals() {
				for (let i = this.animals.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[this.animals[i], this.animals[j]] = [this.animals[j], this.animals[i]];
				}
			},

// どうぶつを選択するメソッド
			selectAnimal(animal) {
				if (this.selectedAnimal && this.selectedAnimal !== animal) {
					// プレイヤーが既にどうぶつを選んでいて、かつ今クリックされたどうぶつが違う場合
					const firstAnimalName = this.selectedAnimal.innerHTML;
					const secondAnimalName = animal.innerHTML;
					if (firstAnimalName === secondAnimalName) {
						// 2つのどうぶつが一致する場合は、スコアを加算して非表示にする
						this.score++;
						document.getElementById('score').innerHTML = this.score;
						animal.style.display = 'none';
						this.selectedAnimal.style.display = 'none';
						this.selectedAnimal = null;

// ゲームクリア判定を行う
						if (document.querySelectorAll('.animal[style="display: none;"]').length === this.animals.length) {
							document.querySelector('.win-message').style.display = 'block';
						}
					} else {
						// 2つのどうぶつが一致しない場合は、プレイヤーが選んだどうぶつを変更する
						this.selectedAnimal.classList.remove('selected');
						this.selectedAnimal = animal;
						this.selectedAnimal.classList.add('selected');
					}
				} else {
					// プレイヤーがまだどうぶつを選んでいない場合
					this.selectedAnimal = animal;
					this.selectedAnimal.classList.add('selected');
				}
			},

// ゲームをリスタートするメソッド
			restartGame() {
				// スコアを初期化する
				this.score = 0;
				document.getElementById('score').innerHTML = this.score;

// どうぶつを再表示する
				this.animals.forEach((animal) => {
					animal.style.display = 'flex';
				});

this.shuffleAnimals(); // 配列をシャッフルする
				this.selectedAnimal = null; // 選択されたどうぶつをリセットする
				document.querySelector('.win-message').style.display = 'none'; // ゲームクリアメッセージを非表示にする
			}
		};

// ゲームを初期化する
		game.init();

// 「もう一度プレイする」ボタンがクリックされた場合は、ゲームをリスタートする
		document.querySelector('.play-again').addEventListener('click', () => {
			game.restartGame();
		});
	</script>
</body>
</html>

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

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