Lion Max Game

ライオンのマックスを成長させよう！

マックスの体力: 0%

このゲームでは、プレーヤーはライオンのマックスを育てることが目的です。体力バーを上げるために、2つのボタンでマックスにエサを与えるか、マックスと遊びます。マックスの体力が0になると、ゲームオーバーになります。スマホでも簡単にプレイできるよう、ボタンとテキストサイズを大きくしました。また、可愛い絵文字を多く使用しました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Lion Max Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}

#max-bar {
			background-color: green;
			width: 0%;
			height: 30px;
			transition: width 0.5s ease-in-out;
			display: inline-block;
		}

.button {
			background-color: yellow;
			border: none;
			padding: 20px;
			margin: 10px;
			font-size: 1em;
			border-radius: 50%;
			cursor: pointer;
			transition: transform 0.2s ease-in-out;
			display: inline-block;
		}

.button:hover {
			transform: scale(1.1);
		}
	</style>
</head>
<body>
	<h1>Lion Max Game</h1>
	<p>ライオンのマックスを成長させよう！</p>
	<p>マックスの体力: <span id="max-bar">0%</span></p>

function feedMax() {
			maxHealth = Math.min(maxHealth + 10, 100);
			updateMaxBar();
		}

function playWithMax() {
			maxHealth = Math.max(maxHealth - 20, 0);
			updateMaxBar();
		}

function updateMaxBar() {
			document.getElementById('max-bar').style.width = maxHealth + '%';
			if (maxHealth <= 0) {
				document.getElementById('max-bar').style.backgroundColor = 'red';
				document.getElementsByClassName('button').disabled = true;
			}
		}
	</script>
</body>
</html>