ライオンガツンとマシマシゲーム

スマホで遊べる、ヒョウ柄のライオンを撃つゲーム！

指でタップして、ライオンをガツンと倒そう！

Score: 0

←

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>ライオンガツンとマシマシゲーム</title>
	<style>
		body {
			background-color: #FFE4E1;
			color: #1E90FF;
			font-size: 2rem;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>ライオンガツンとマシマシゲーム</h1>
	<p>スマホで遊べる、ヒョウ柄のライオンを撃つゲーム！</p>
	<p>指でタップして、ライオンをガツンと倒そう！</p>
	<div>
		<img src="./lion.png" id="lion" />
	</div>
	<script>
		const lion = document.getElementById('lion');
		let timerId;
		let score = 0;
		
		lion.addEventListener('click', function() {
			score++;
			lion.style.transform = 'scale(0.8)';
			setTimeout(function() {
				lion.style.transform = 'scale(1)';
			}, 200);
			document.getElementById('score').textContent = score;
		});
		
		function startGame() {
			timerId = setInterval(function() {
				const x = Math.floor(Math.random() * window.innerWidth);
				const y = Math.floor(Math.random() * window.innerHeight);
				lion.style.left = x + 'px';
				lion.style.top = y + 'px';
			}, 1000);
		}
		
		function endGame() {
			clearInterval(timerId);
			alert('ゲーム終了！　スコア：' + score);
		}
		
		startGame();
		
		setTimeout(function() {
			endGame();
		}, 10000);
	</script>
	<p>Score: <span id="score">0</span></p>
</body>
</html>