Lion Gan to Mashimashi Game

このゲームでは、あなたはライオンを操作し、できるだけ多くの肉を食べることが目的です。肉以外を食べるとスコアが減ります。また、敵から攻撃を受けると体力が減ります。体力が0になるとゲームオーバーです。

操作方法

画面タップでジャンプ、長押しで攻撃

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Lion Gan to Mashimashi Game</title>
	<meta charset="UTF-8">
</head>
<body>

<h1>Lion Gan to Mashimashi Game</h1>

<p>このゲームでは、あなたはライオンを操作し、できるだけ多くの肉を食べることが目的です。肉以外を食べるとスコアが減ります。また、敵から攻撃を受けると体力が減ります。体力が0になるとゲームオーバーです。</p>

<div>
		<h2>操作方法</h2>
		<p>画面タップでジャンプ、長押しで攻撃</p>
	</div>

// コンテキストの取得
		var ctx = canvas.getContext("2d");

// 背景画像を描画
		var bg = new Image();
		bg.src = "background.jpg";
		bg.onload = function() {
			ctx.drawImage(bg, 0, 0);
		}

// ライオン画像を描画
		var lion = new Image();
		lion.src = "lion.png";
		lion.onload = function() {
			ctx.drawImage(lion, 100, 300, 100, 100);
		}

// 肉を入れる配列
		var meats = [];

// 敵を入れる配列
		var enemies = [];

// スコアと体力
		var score = 0;
		var hp = 100;

// 肉を生成する関数
		function createMeat() {
			var meat = {
				x: Math.floor(Math.random() * 400),
				y: 0,
				size: 50
			};
			meats.push(meat);
		}

// 敵を生成する関数
		function createEnemy() {
			var enemy = {
				x: Math.floor(Math.random() * 400),
				y: 0,
				size: 50,
				attack: Math.floor(Math.random() * 10)
			};
			enemies.push(enemy);
		}

// 肉を描画する関数
		function drawMeats() {
			for (var i = 0; i < meats.length; i++) {
				ctx.fillStyle = "red";
				ctx.fillRect(meats[i].x, meats[i].y, meats[i].size, meats[i].size);
			}
		}

// 敵を描画する関数
		function drawEnemies() {
			for (var i = 0; i < enemies.length; i++) {
				ctx.fillStyle = "black";
				ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].size, enemies[i].size);
			}
		}

// スコアと体力を表示する関数
		function showScoreAndHp() {
			ctx.fillStyle = "blue";
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, 10, 20);
			ctx.fillText("HP: " + hp, 10, 40);
		}

// 肉を更新する関数
		function updateMeats() {
			for (var i = 0; i < meats.length; i++) {
				meats[i].y += 5;
				if (meats[i].y > 400) {
					meats.splice(i, 1);
				}
			}
		}

// 敵を更新する関数
		function updateEnemies() {
			for (var i = 0; i < enemies.length; i++) {
				enemies[i].y += 5;
				if (enemies[i].y > 400) {
					enemies.splice(i, 1);
				}
				if (enemies[i].x < 200 && enemies[i].x + enemies[i].size > 100 &&
					enemies[i].y < 400 && enemies[i].y + enemies[i].size > 300) {
					hp -= enemies[i].attack;
					enemies.splice(i, 1);
				}
			}
		}

// 時間経過で肉と敵を生成
		setInterval(function() {
			createMeat();
			createEnemy();
		}, 1000);

// ゲームループ
		setInterval(function() {
			ctx.drawImage(bg, 0, 0);
			ctx.drawImage(lion, 100, 300, 100, 100);
			drawMeats();
			drawEnemies();
			showScoreAndHp();
			updateMeats();
			updateEnemies();
			if (hp <= 0) {
				alert("Game Over");
				location.reload();
			}
		}, 50);

// ジャンプと攻撃の処理
		var jumping = false;
		canvas.addEventListener("touchstart", function(event) {
			if (!jumping) {
				jumping = true;
				var jumpInterval = setInterval(function() {
					ctx.drawImage(bg, 0, 0);
					ctx.drawImage(lion, 100, 300, 100, 100);
					drawMeats();
					drawEnemies();
					showScoreAndHp();
					updateMeats();
					updateEnemies();
					lion.y -= 10;
					if (lion.y < 200) {
						clearInterval(jumpInterval);
						setTimeout(function() {
							jumping = false;
							lion.y = 300;
						}, 500);
					}
				}, 30);
			}
			else {
				var attackInterval = setInterval(function() {
					ctx.drawImage(bg, 0, 0);
					ctx.drawImage(lion, 100, 300, 100, 100);
					drawMeats();
					drawEnemies();
					showScoreAndHp();
					updateMeats();
					updateEnemies();
				}, 30);
				setTimeout(function() {
					clearInterval(attackInterval);
				}, 300);
			}
		});

</script>

</body>
</html>