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

ライオン

象

猿

ペンギン

このゲームは、どうぶつスクールに通う動物たちを強制的にアップデートさせるという設定で、プレイヤーは4種類の動物の中から1種類を選択し、その動物の筋力と知能を管理することができます。ボタンをクリックすることで、筋力と知能をアップすることができます。ただし、筋力または知能が100を超えることはできず、0を下回ることもできません。絵文字を多く使用し、スマートフォンを操作することを前提としています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>どうぶつスクールシミュレーター</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		body {
			background-color: lightgreen;
			text-align: center;
			font-size: 20px;
			margin: 0;
			padding: 0;
		}

#container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 100vh;
			width: 100%;
		}

.animal {
			display: inline-block;
			margin: 10px;
			text-align: center;
			border: 2px solid black;
			padding: 20px;
			border-radius: 20px;
			background-color: white;
		}

.animal img {
			max-width: 80%;
			height: auto;
		}

.button {
			background-color: lightblue;
			padding: 10px;
			border: none;
			border-radius: 10px;
			font-size: 20px;
			color: white;
			margin-top: 20px;
			cursor: pointer;
			box-shadow: 2px 2px 2px grey;
		}

.button:hover {
			background-color: blue;
		}
	</style>
</head>
<body>
	<h1>どうぶつスクールシミュレーター</h1>
	<div id="container">
		<div class="animal">
			<img src="images/lion.png">
			<p>ライオン</p>
			<button class="button" onclick="updateFeature('strength', 10)">筋力アップ！</button>
			<button class="button" onclick="updateFeature('intelligence', -5)">勉強したい</button>
		</div>
		<div class="animal">
			<img src="images/elephant.png">
			<p>象</p>
			<button class="button" onclick="updateFeature('strength', 5)">筋力アップ！</button>
			<button class="button" onclick="updateFeature('intelligence', 10)">勉強したい</button>
		</div>
		<div class="animal">
			<img src="images/monkey.png">
			<p>猿</p>
			<button class="button" onclick="updateFeature('strength', -5)">筋力アップ！</button>
			<button class="button" onclick="updateFeature('intelligence', 5)">勉強したい</button>
		</div>
		<div class="animal">
			<img src="images/penguin.png">
			<p>ペンギン</p>
			<button class="button" onclick="updateFeature('strength', -10)">筋力アップ！</button>
			<button class="button" onclick="updateFeature('intelligence', -5)">勉強したい</button>
		</div>
	</div>
	<script type="text/javascript">
		let animalData = [
			{ name: 'ライオン', strength: 50, intelligence: 30 },
			{ name: '象', strength: 80, intelligence: 20 },
			{ name: '猿', strength: 40, intelligence: 60 },
			{ name: 'ペンギン', strength: 20, intelligence: 50 }
		];

refreshScreen();
	</script>
</body>
</html>