どうぶつスクールシミュレーターアップデート

🦁

このアプリは、ライオンの絵文字が表示され、ガツンとマシマシするボタンがあります。それぞれをクリックすると、力やスピードが上がっていきます。力やスピードの値に応じて、絵文字が変化し、50に達するとゲームクリアとなります。ゲームクリア時には、お祝いの絵文字が表示されます。スマホでも遊びやすいよう、ボタンや絵文字は大きく作られ、背景色も明るめに設定されています。

←

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>
		body {
			font-size: 2em;
			text-align: center;
		}
		#animal {
			font-size: 5em;
			margin-bottom: 0.5em;
		}
		button {
			font-size: 1.5em;
			padding: 0.5em;
			margin: 0.5em;
			border: none;
			border-radius: 1em;
			background-color: orange;
			color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>どうぶつスクールシミュレーターアップデート</h1>
	<div id="animal">🦁</div>
	<button onclick="increasePower()">ガツンする</button>
	<button onclick="increaseSpeed()">マシマシする</button>
	<script>
		let power = 10;
		let speed = 10;

function increasePower() {
			power += 5;
			updateEmoji();
			checkWin();
		}

function increaseSpeed() {
			speed += 5;
			updateEmoji();
			checkWin();
		}

function checkWin() {
			if (power >= 50 && speed >= 50) {
				alert("ゲームクリア！🎉🎊");
				resetGame();
			}
		}

function resetGame() {
			power = 10;
			speed = 10;
			updateEmoji();
		}
	</script>
</body>
</html>