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

No:3857

773

←

Prev Next

→

「植物を育てよう！」 - 絵文字で様々な種類の種を表示する - スマホでタップすることで種を選び..ALL
Developer User3589｜Date and time 23/6/26 19:22:41
Build time 32.759 sec｜Game capacity 3.102KB｜

Script

プログラムの例です。実際のゲーム性を持たせるために、CSSとHTMLもここに記述します。

植物を育てよう！

使う種：

🍓

🌻

🍇

成長速度：

経験値：

レベル：

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

プログラムの例です。実際のゲーム性を持たせるために、CSSとHTMLもここに記述します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>植物を育てよう！</title>
	<style>
		body {
			text-align: center;
		}
		#container {
			display: inline-block;
			padding: 10px;
			border: 1px solid black;
			margin: 10px;
			width: 150px;
			height: 200px;
		}
		#control {
			margin: 20px;
		}
		.seed {
			font-size: 40px;
			cursor: pointer;
			margin: 10px;
			display: inline-block;
			vertical-align: middle;
		}
		.growing {
			font-size: 30px;
			margin: 10px;
			display: inline-block;
			vertical-align: middle;
		}
		.harvest {
			font-size: 20px;
			cursor: pointer;
			margin: 10px;
			display: inline-block;
			vertical-align: middle;
		}
		.level {
			margin: 20px;
		}
	</style>
</head>
<body>
	<h1>植物を育てよう！</h1>
	<p id="message"></p>
	<div id="container">
		
	</div>
	<div id="control">
		<p>使う種：</p>
		<div class="seed" onclick="setSeed('🍓')">🍓</div>
		<div class="seed" onclick="setSeed('🌻')">🌻</div>
		<div class="seed" onclick="setSeed('🍇')">🍇</div>
		<p>成長速度：</p>
		<input type="range" id="range" min="1" max="10" value="5" onchange="setSpeed()">
		<p>経験値：</p>
		<p id="exp">0</p>
		<p>レベル：</p>
		<p id="level">1</p>
	</div>
	<script>
		let container = document.getElementById("container");
		let message = document.getElementById("message");
		let seed = "";
		let timer = null;
		let growing = false;
		let exp = 0;
		let level = 1;
		
		function setSeed(selectedSeed) {
			seed = selectedSeed;
			container.innerHTML = seed;
		}
		
		function setSpeed() {
			let val = document.getElementById("range").value;
			let duration = Math.floor(Math.random() * 10) * val;
			message.innerHTML = "成長に必要な時間：" + duration + "秒";
			if (growing) {
				clearTimeout(timer);
				timer = setTimeout(grow, duration * 1000);
			}
		}
		
		function grow() {
			if (growth < 100) {
				growth += 10;
				container.innerHTML = seed + " <span class='growing'>" + growth + "%</span>";
				timer = setTimeout(grow, duration * 1000);
			} else {
				growing = false;
				container.innerHTML = seed + " <span class='harvest' onclick='harvest()'>🌟</span>";
				exp += Math.floor(Math.random() * 10) + 1;
				message.innerHTML = "収穫しました！経験値が" + exp + "増えました！";
				if (exp >= level * 100) {
					levelUp();
				}
			}
		}
		
		function harvest() {
			container.innerHTML = "";
			message.innerHTML = "";
			growth = 0;
			exp += Math.floor(Math.random() * 10) + 1;
			message.innerHTML = "収穫しました！経験値が" + exp + "増えました！";
			if (exp >= level * 100) {
				levelUp();
			}
		}
		
		function levelUp() {
			level += 1;
			exp = 0;
			message.innerHTML = "おめでとうございます！レベルアップしました！新しい種がアンロックされました！";
			document.getElementById("exp").innerHTML = exp;
			document.getElementById("level").innerHTML = level;
		}
	</script>
</body>
</html>