🦁マシマシゲーム

マシマシを何個食べられるかな？

マシマシ数: 0

上記は、JavaScriptを含む1枚のHTMLファイルで構成される簡単なゲームプログラムです。プレイヤーは「食べる」ボタンをクリックして、ライオンがマシマシを食べる回数をカウントします。マシマシを5つ食べたら、プレイヤーの勝利となり、「お腹いっぱい！あなたの勝ち！🎉」というメッセージが表示されます。絵文字を多用し、スマホでも簡単に遊べるようにUIをシンプルにしています。

←

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 Max Max Game</title>
	<style>
		body {
			background-color: #FFE3CA;
			font-family: 'Arial', sans-serif;
			text-align: center;
		}
		h1 {
			font-size: 3rem;
			margin: 2rem;
		}
		button {
			background-color: #FFC128;
			border: none;
			border-radius: 10px;
			color: #ffffff;
			cursor: pointer;
			font-size: 2rem;
			padding: 1rem 2rem;
			margin: 1rem;
		}
		#lionImg {
			height: 300px;
			margin: 2rem auto;
			display: block;
		}
		#result {
			font-size: 2rem;
			margin: 2rem;
		}
	</style>
	<script>
		let maxMaxCount = 0;
		
		function eatMaxMax() {
			maxMaxCount++;
			document.getElementById("maxMaxCount").innerHTML = maxMaxCount;
			document.getElementById("lionImg").src = "lion2.png";
			setTimeout(function(){
				document.getElementById("lionImg").src = "lion1.png";
			}, 1000);
			checkWin();
		}
		
		function checkWin() {
			if(maxMaxCount === 5) {
				document.getElementById("result").innerHTML = "お腹いっぱい！あなたの勝ち！🎉";
				document.getElementById("eatBtn").disabled = true;
			}
		}
	</script>
</head>
<body>
	<h1>🦁マシマシゲーム</h1>
	<img id="lionImg" src="lion1.png" alt="Lion" />
	<p>マシマシを何個食べられるかな？</p>
	<button id="eatBtn" onclick="eatMaxMax()">食べる</button>
	<br />
	マシマシ数: <span id="maxMaxCount">0</span>
	<p id="result"></p>
</body>
</html>