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

開発者ひさしの怠慢にブチ切れて、ライオンを操作してどうぶつスクールを制覇しよう！

操作方法：左右の矢印キーで移動、上矢印キーでジャンプ、スペースキーでガツンと攻撃！

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

を作ろう！

<!DOCTYPE html>
<html>
<head>
	<title>ライオンガツンマシマシゲーム</title>
</head>
<body>
	<h1>ライオンガツンマシマシゲーム</h1>

<div>
		<p>開発者ひさしの怠慢にブチ切れて、ライオンを操作してどうぶつスクールを制覇しよう！</p>

<p>操作方法：左右の矢印キーで移動、上矢印キーでジャンプ、スペースキーでガツンと攻撃！</p>

<button onclick="startGame()">ゲームスタート！</button>
	</div>

var lion = {
			x: 50,
			y: 350,
			width: 50,
			height: 50,
			speedX: 0,
			speedY: 0,
			jumping: false,
			grounded: false
		};

var enemies = [
			{ x: 200, y: 350, width: 50, height: 50 },
			{ x: 300, y: 350, width: 50, height: 50 },
			{ x: 450, y: 350, width: 50, height: 50 }
		];

function startGame() {
			gameArea.style.display = "block";
			gameArea.scrollIntoView();

window.addEventListener("keyup", function(e) {
				switch(e.key) {
					case "ArrowLeft":
						lion.speedX = 0;
						break;
					case "ArrowRight":
						lion.speedX = 0;
						break;
				}
			});

draw();
		}

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

ctx.fillStyle = "orange";
			ctx.fillRect(lion.x, lion.y, lion.width, lion.height);

ctx.fillStyle = "green";
			enemies.forEach(function(enemy) {
				ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
			});

lion.x += lion.speedX;
			lion.y += lion.speedY;
			lion.speedY += 1;

if (lion.y + lion.height > canvas.height - 50) {
				lion.y = canvas.height - 50 - lion.height;
				lion.jumping = false;
				lion.grounded = true;
				lion.speedY = 0;
			}

enemies.forEach(function(enemy) {
				if (lion.x + lion.width > enemy.x && lion.x < enemy.x + enemy.width && lion.y + lion.height > enemy.y) {
					alert("ゲームオーバー！やり直してください。");
					location.reload();
				}
			});

requestAnimationFrame(draw);
		}

function attack() {
			ctx.fillStyle = "red";
			ctx.fillRect(lion.x + lion.width, lion.y, lion.width/2, lion.height);
		}
	</script>

</body>
</html>