ライオンゲーム

ライオンを操作して、エサを食べよう！

※このゲームでは、ライオンの飢餓レベルが表され、エサを食べることで栄養を補給します。ライオンの画像は、飢餓レベルに応じて変化します。ライオンをクリックすると、飢餓レベルが減少します。

←

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>Lion Game</title>
	<style>
		body {
			background-color: #ffdab9;
			font-family: sans-serif;
			text-align: center;
		}
		
		h1 {
			font-size: 50px;
			margin-top: 50px;
		}
		
		button {
			border: none;
			background-color: #ffa07a;
			padding: 20px 40px;
			border-radius: 10px;
			font-size: 30px;
			color: white;
			margin-top: 50px;
			cursor: pointer;
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
		}
		
		button:hover {
			background-color: #ff7f50;
		}
	</style>
</head>
<body>
	<h1>ライオンゲーム</h1>
	<p>ライオンを操作して、エサを食べよう！</p>
	<img id="lion" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/lion-face_1f981.png" width="200">
	<button id="eatBtn">エサを食べる</button>
	
	<script>
		const lionImg = document.getElementById("lion");
		const eatBtn = document.getElementById("eatBtn");
		
		let hungerLevel = 0;
		
		lionImg.addEventListener("click", () => {
			hungerLevel--;
			if (hungerLevel < 0) {
				hungerLevel = 0;
			}
			updateLionImage();
		});
		
		eatBtn.addEventListener("click", () => {
			hungerLevel++;
			if (hungerLevel > 10) {
				alert("食べ過ぎてお腹いっぱいだ！");
				hungerLevel = 10;
			}
			updateLionImage();
		});
		
		function updateLionImage() {
			let lionImgSrc = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/lion-face_1f981.png";
			if (hungerLevel < 3) {
				lionImgSrc = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/lion-face_1f981.png";
			} else if (hungerLevel < 6) {
				lionImgSrc = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/lion-face_1f981.png";
			} else if (hungerLevel < 9) {
				lionImgSrc = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/lion-face_1f981.png";
			} else {
				lionImgSrc = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/lion-face_1f981.png";
			}
			lionImg.src = lionImgSrc;
		}
	</script>
</body>
</html>