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

←

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 {
			font-family: 'Noto Sans JP', sans-serif;
			background-color: #ffe0b2;
		}
		h1 {
			text-align: center;
			font-size: 3rem;
			margin-top: 1rem;
			color: #8d6e63;
		}
		button {
			background-color: #ffcc80;
			border: none;
			padding: 1rem 2rem;
			border-radius: 1rem;
			font-size: 2rem;
			cursor: pointer;
			box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
			color: #5d4037;
		}
		.game-area {
			max-width: 500px;
			margin: 2rem auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.animal {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			width: 120px;
			height: 120px;
			margin: 1rem;
			cursor: pointer;
			border-radius: 50%;
			box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
			transition: transform 0.3s ease-in-out;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 3rem;
			color: #fff;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
		}
		.animal:hover {
			transform: scale(1.1);
		}
		.enemy {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			width: 200px;
			height: 200px;
			margin: 2rem auto;
			border-radius: 50%;
			box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 4rem;
			color: #fff;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
		}
		.attack-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rem;
			background-color: rgba(0,0,0,0.5);
			visibility: hidden;
			opacity: 0;
			transition: visibility 0s, opacity 0.3s ease-in-out;
		}
		.attack {
			background-color: #ff7043;
			border: none;
			padding: 1rem 2rem;
			border-radius: 1rem;
			font-size: 2rem;
			cursor: pointer;
			box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
			color: #fff;
		}
	</style>
</head>
<body>
	<h1>どうぶつスクールシミュレーター続編</h1>
	<div class="game-area"></div>
	<div class="enemy"></div>
	<div class="attack-wrapper">
		<button class="attack">攻撃する！</button>
	</div>
	<script>
		const animals = [
			{
				name: 'ライオン',
				image: 'https://image.flaticon.com/icons/svg/2919/2919357.svg',
				power: 150,
				speed: 2
			},
			{
				name: 'パンダ',
				image: 'https://image.flaticon.com/icons/svg/2919/2919385.svg',
				power: 100,
				speed: 3
			},
			{
				name: 'クマ',
				image: 'https://image.flaticon.com/icons/svg/2919/2919383.svg',
				power: 120,
				speed: 2
			},
			{
				name: 'トラ',
				image: 'https://image.flaticon.com/icons/svg/2919/2919360.svg',
				power: 180,
				speed: 2
			},
			{
				name: 'サル',
				image: 'https://image.flaticon.com/icons/svg/2919/2919338.svg',
				power: 80,
				speed: 4
			}
		];
		const enemy = {
			name: 'イノシシジャイアント',
			image: 'https://image.flaticon.com/icons/svg/2919/2919381.svg',
			power: 200,
			speed: 1
		};
		let myAnimal = null;
		let attackInterval = null;
		const gameArea = document.querySelector('.game-area');
		const enemyArea = document.querySelector('.enemy');
		const attackWrapper = document.querySelector('.attack-wrapper');
		const attackBtn = document.querySelector('.attack');

renderAnimals();

function selectAnimal(animal) {
			myAnimal = animal;
			gameArea.innerHTML = '';
			const myAnimalDiv = document.createElement('div');
			myAnimalDiv.classList.add('animal');
			myAnimalDiv.textContent = myAnimal.name;
			myAnimalDiv.style.backgroundImage = `url(${myAnimal.image})`;
			gameArea.appendChild(myAnimalDiv);
			attackWrapper.style.visibility = 'visible';
			attackWrapper.style.opacity = 1;
			attackBtn.addEventListener('click', startAttack);
			updateEnemy();
		}

function updateEnemy() {
			enemyArea.style.backgroundImage = `url(${enemy.image})`;
			enemyArea.style.backgroundSize = 'contain';
			enemyArea.style.backgroundRepeat = 'no-repeat';
			enemyArea.style.backgroundPosition = 'center';
			enemyArea.textContent = enemy.name;
		}