Lion Simulator Game

Score: 0

🦁

🍝

Use arrow keys to move the lion and eat the food. Each food item will give you 10 points. Avoid hitting the edges of the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Lion Simulator Game</title>
	<style>
		/*CSS code for styling the game*/
		body{
			text-align:center;
			background-color:#ffe6e6;
			font-size:25px;
		}
		#score{
			font-size:40px;
			margin-top:20px;
		}
		#lion{
			position:absolute;
			bottom:50px;
			left:50%;
			transform:translateX(-50%);
			font-size:50px;
		}
		#food{
			position:absolute;
			bottom:100px;
			font-size:40px;
		}
	</style>
	<script>
		//JavaScript code for the game
		var score = 0;
		var lion = document.getElementById("lion");
		var food = document.getElementById("food");

function moveLion(event){
			var key = event.keyCode;
			switch(key){
				case 37:
					lion.style.left = parseInt(lion.style.left) - 50 + 'px';
					break;
				case 39:
					lion.style.left = parseInt(lion.style.left) + 50 + 'px';
					break;
				case 40:
					lion.style.bottom = parseInt(lion.style.bottom) - 50 + 'px';
					break;
				case 38:
					lion.style.bottom = parseInt(lion.style.bottom) + 50 + 'px';
					break;
			}
			checkCollision(lion, food);
		}

function getRandomPosition(){
			var x = Math.floor(Math.random() * 1100) + 1;
			var y = Math.floor(Math.random() * 600) + 1;
			return [x, y];
		}

function checkCollision(lion, food){
			var lionTop = parseInt(lion.style.bottom) + lion.offsetHeight;
			var lionLeft = parseInt(lion.style.left) + lion.offsetWidth;
			var foodTop = parseInt(food.style.bottom) + food.offsetHeight;
			var foodLeft = parseInt(food.style.left) + food.offsetWidth;
			if(lionTop >= foodTop && lionLeft >= foodLeft){
				score += 10;
				document.getElementById("score").innerHTML = "Score: " + score;
				var pos = getRandomPosition();
				food.style.left = pos[0] + 'px';
				food.style.bottom = pos[1] + 'px';
			}
		}

function startGame(){
			document.addEventListener("keydown", moveLion);
			var pos = getRandomPosition();
			food.style.left = pos[0] + 'px';
			food.style.bottom = pos[1] + 'px';
		}

</script>
</head>
<body onload="startGame()">
	<h1>Lion Simulator Game</h1>
	<div id="score">Score: 0</div>
	<div id="lion">🦁</div>
	<div id="food">🍝</div>
	<p>Use arrow keys to move the lion and eat the food. Each food item will give you 10 points. Avoid hitting the edges of the screen.</p>
</body>
</html>