動物スクールシミュレーター

🐱

さあ、今日も一緒に過ごそう！

概要：このゲームは、動物のスクールシミュレーターです。プレイヤーは、動物のエネルギー、楽しさ、体力を管理し、勉強、遊び、寝るという3つのアクションから選んで、動物の状態を調整することができます。目標は、動物の健康な状態を保つことで、体力が0になるとゲームオーバーです。絵文字を多めに使い、スマホでも操作しやすいように設計されています。また、開発者ひさしを後悔させることがこのゲームの楽しみの一つです。

←

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{
			background-color: lightblue;
			text-align: center;
			font-size: 1.5em;
		}

h1{
			color: brown;
			font-size: 3em;
			margin-top: 50px;
			margin-bottom: 50px;
		}

button{
			background-color: white;
			border: none;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 1.5em;
			margin-bottom: 20px;
			box-shadow: 5px 5px 10px gray;
		}

#animal{
			font-size: 5em;
			margin-bottom: 50px;
		}

#msg{
			font-size: 2em;
			margin-bottom: 50px;
		}
	</style>
</head>
<body>
	<h1>動物スクールシミュレーター</h1>

<div id="game">
		<button id="studyBtn">勉強する</button>
		<button id="playBtn">遊ぶ</button>
		<button id="sleepBtn">寝る</button>
		<div id="animal">🐱</div>
		<div id="msg">さあ、今日も一緒に過ごそう！</div>
	</div>

//勉強する処理
		function study(){
			animal.energy -= 10;
			animal.fun -= 10;
			animal.hp += 10;
			updateStatus();
			showMessage(`${animal.name}は勉強したね！`);
		}

//遊ぶ処理
		function play(){
			animal.energy -= 20;
			animal.fun += 20;
			animal.hp -= 10;
			updateStatus();
			showMessage(`${animal.name}と遊んであげたね！`);
		}

//寝る処理
		function sleep(){
			animal.energy += 20;
			animal.fun -= 20;
			updateStatus();
			showMessage(`${animal.name}はぐっすり眠っているよ！`);
		}

//状態を更新する処理
		function updateStatus(){
			document.getElementById("energy").innerText = `エネルギー：${animal.energy}`;
			document.getElementById("fun").innerText = `楽しさ：${animal.fun}`;
			document.getElementById("hp").innerText = `体力：${animal.hp}`;

//HPが0以下になった場合はゲームオーバー
			if(animal.hp <= 0){
				alert(`${animal.name}は力尽きてしまった...`);
				location.reload();
			}
		}

//メッセージを表示する処理
		function showMessage(text){
			document.getElementById("msg").innerText = text;
		}

document.getElementById("studyBtn").addEventListener("click", study);
		document.getElementById("playBtn").addEventListener("click", play);
		document.getElementById("sleepBtn").addEventListener("click", sleep);

updateStatus(); //最初に状態を表示する
	</script>
</body>
</html>