<!DOCTYPE html>
<html>
<head>
<title>Plant Growing Game</title>
</head>
<body>
<h1>Plant Growing Game</h1>
<!-- 水をやるボタン -->
<button id="waterButton">水をやる</button>
<!-- 肥料をやるボタン -->
<button id="fertilizerButton">肥料をやる</button>
<!-- 植物の画像 -->
<img id="plantImg" src="https://image.shutterstock.com/image-vector/cartoon-plant-growing-on-pot-260nw-675322224.jpg" alt="plant">
<!-- 成長度合い -->
<p id="growthLevel"></p>
<!-- メッセージを表示する場所 -->
<div id="messageBox"></div>
<script>
//植物の成長度合を表す変数
let growthLevel = 0;
//水をやる関数
function waterPlant() {
//植物の成長度合いが100未満の場合
if (growthLevel < 100) {
//植物の成長度合いを増やす
growthLevel += 10;
//メッセージを表示する
showMessage("水が足りていたのね！");
//植物の画像を変更する
document.getElementById("plantImg").src = "https://image.shutterstock.com/image-vector/green-house-plant-leaf-symbol-260nw-1033773266.jpg";
} else {
//植物の成長度合いが100以上の場合はメッセージを表示する
showMessage("水をやり過ぎると逆効果ですよ！");
}
//成長度合いを表示する
document.getElementById("growthLevel").textContent = "成長度合い：" + growthLevel + "%";
}
//肥料をやる関数
function fertilizePlant() {
//植物の成長度合いが100未満の場合
if (growthLevel < 100) {
//植物の成長度合いを増やす
growthLevel += 20;
//メッセージを表示する
showMessage("成長が早くなりました！");
//植物の画像を変更する
document.getElementById("plantImg").src = "https://image.shutterstock.com/image-vector/vector-illustration-horizontal-banners-indoor-260nw-1241450820.jpg";
} else {
//植物の成長度合いが100以上の場合はメッセージを表示する
showMessage("まだ肥料が必要なんですか？！");
}
//成長度合いを表示する
document.getElementById("growthLevel").textContent = "成長度合い：" + growthLevel + "%";
}
//メッセージを表示する関数
function showMessage(message) {
//メッセージボックスの中身を空にする
document.getElementById("messageBox").textContent = "";
//新しいメッセージを追加する
document.getElementById("messageBox").appendChild(document.createTextNode(message));
}
//水をやるボタンのクリックイベント
document.getElementById("waterButton").addEventListener("click", waterPlant);
//肥料をやるボタンのクリックイベント
document.getElementById("fertilizerButton").addEventListener("click", fertilizePlant);
</script>
</body>
</html>
※ジョーク：What do you get when you cross a plant and a politician? A plant that lies! （植物と政治家を交配すると何が得られますか？うそをつく植物が得られます！）
