Lion Masimasi Game

スマホで操作し、迫りくる敵を避けながら、ライオンをマシマシしよう！

▲ボタンでジャンプ、◀︎▶︎ボタンで移動します。

制限時間内に、なるべく多くのライオンをマシマシして高得点を目指しましょう！

←

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 Masimasi Game</title>
</head>
<body>
	<h1>Lion Masimasi Game</h1>
	<p>スマホで操作し、迫りくる敵を避けながら、ライオンをマシマシしよう！</p>
	<p>▲ボタンでジャンプ、◀︎▶︎ボタンで移動します。</p>
	<p>制限時間内に、なるべく多くのライオンをマシマシして高得点を目指しましょう！</p>
	<div id="game"></div>

let ctx = canvas.getContext("2d");

let playerX = canvas.width / 2;
		let playerY = canvas.height / 2;
		let playerSize = 50;
		let playerSpeed = 10;
		let isJumping = false;
		let jumpStep = 25;
		let jumpHeight = 150;
		let jumpCount = 0;
		let jumpDirection = "up";
		let enemyInterval = 1000;
		let lastEnemyTime = 0;
		let enemies = [];
		let score = 0;
		let timeLimit = 30;
		let timeLeft = timeLimit;
		let isGameOver = false;

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!isGameOver) {
				if (isJumping) {
					if (jumpCount < jumpHeight / jumpStep) {
						if (jumpDirection === "up") {
							playerY -= jumpStep;
						} else {
							playerY += jumpStep;
						}
						jumpCount++;
					} else {
						isJumping = false;
						jumpCount = 0;
					}
				}

if (playerX - playerSize / 2 < 0) {
					playerX = playerSize / 2;
				} else if (playerX + playerSize / 2 > canvas.width) {
					playerX = canvas.width - playerSize / 2;
				}

for (let i = 0; i < enemies.length; i++) {
					enemies[i].x -= enemies[i].speed;
					if (enemies[i].x + enemies[i].size < 0) {
						enemies.splice(i, 1);
					} else if (isColliding(enemies[i])) {
						gameOver();
					}
				}

if ((Date.now() - lastEnemyTime) > enemyInterval) {
					createEnemy();
					lastEnemyTime = Date.now();
				}

drawPlayer();
				drawEnemies();
				drawScore();
				drawTime();

timeLeft -= 1 / 60;
				if (timeLeft < 0) {
					gameOver();
				}
			} else {
				drawGameOver();
			}

window.requestAnimationFrame(draw);
		}

function drawPlayer() {
			ctx.fillStyle = "#ffc107";
			ctx.beginPath();
			ctx.arc(playerX, playerY, playerSize / 2, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fill();
		}

function drawEnemies() {
			for (let i = 0; i < enemies.length; i++) {
				ctx.fillStyle = "#f44336";
				ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].size, enemies[i].size);
			}
		}

function drawScore() {
			ctx.fillStyle = "#f44336";
			ctx.font = "24px Arial";
			ctx.fillText("Score: " + score, 20, 40);
		}

function drawTime() {
			ctx.fillStyle = "#f44336";
			ctx.font = "24px Arial";
			ctx.fillText("Time: " + Math.ceil(timeLeft), canvas.width - 120, 40);
		}

function drawGameOver() {
			ctx.fillStyle = "#000";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "#fff";
			ctx.font = "48px Arial";
			ctx.fillText("Game Over", canvas.width / 2 - 140, canvas.height / 2 - 50);
			ctx.font = "24px Arial";
			ctx.fillText("Score: " + score, canvas.width / 2 - 60, canvas.height / 2);

let restartButton = document.createElement("button");
			restartButton.innerText = "Restart";
			restartButton.style.fontSize = "24px";
			restartButton.style.padding = "10px";
			restartButton.style.marginTop = "20px";
			restartButton.addEventListener("click", function() {
				location.reload();
			});

game.appendChild(restartButton);
		}

function createEnemy() {
			let size = Math.floor(Math.random() * 50) + 20;
			let speed = Math.floor(Math.random() * 5) + 3;
			let y = Math.floor(Math.random() * (canvas.height - size));
			let enemy = {
				x: canvas.width,
				y: y,
				size: size,
				speed: speed
			};
			enemies.push(enemy);
		}

function isColliding(enemy) {
			let distance = Math.sqrt(Math.pow(playerX - enemy.x - enemy.size / 2, 2) + Math.pow(playerY - enemy.y - enemy.size / 2, 2));
			return distance < playerSize / 2 + enemy.size / 2;
		}

function gameOver() {
			isGameOver = true;
			timeLeft = 0;
		}

draw();
	</script>
</body>
</html>