ライオンマシマシゲーム

目の前にいる動物たちを追いかけて、点数を稼ごう！

アローキーで移動。Spaceキーでジャンプ。

スコア: 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 {
			font-family: sans-serif;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>ライオンマシマシゲーム</h1>
	<p>目の前にいる動物たちを追いかけて、点数を稼ごう！</p>
	<p>アローキーで移動。Spaceキーでジャンプ。</p>
	<div id="score">スコア: 0</div>
	<canvas id="gameArea" width="400" height="400"></canvas>

// 初期化
		function init() {
			canvas = document.getElementById('gameArea');
			ctx = canvas.getContext('2d');
			score = 0;

// player
			playerX = canvas.width / 2;
			playerY = canvas.height - 100;
			jump = false;
			speed = 5;

// animal
			animalX = Math.random() * (canvas.width - 100);
			animalY = 0;
			animalSize = 50;

intervalId = setInterval(update, 10);
		}

// 更新処理
		function update() {
			// プレイヤーの移動
			if (jump) {
				playerY -= 7;
			} else {
				playerY += speed;
			}

if (playerY > canvas.height - 100) {
				playerY = canvas.height - 100;
			}

// 動物の移動
			animalY += 5;

if (animalY > canvas.height) {
				animalX = Math.random() * (canvas.width - 100);
				animalY = 0;
			}

// 当たり判定
			if (playerX < animalX + animalSize &&
				playerX + animalSize > animalX &&
				playerY < animalY + animalSize &&
				playerY + animalSize > animalY) {
				score += 10;
				animalX = Math.random() * (canvas.width - 100);
				animalY = 0;
			}

// 描画
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = '#ffcc00';
    		ctx.fillRect(playerX, playerY, animalSize, animalSize);
    		ctx.fillStyle = '#ff6666';
	    	ctx.fillRect(animalX, animalY, animalSize, animalSize);
	    	ctx.font = '20px sans-serif';
	    	ctx.fillStyle = '#000000';
	    	ctx.fillText(`スコア: ${score}`, 10, 30);
		}

// イベント処理
		function handleKeyDown(event) {
			if (event.keyCode === 32) {
				event.preventDefault();
				jump = true;
			} else if (event.keyCode === 37) {
				event.preventDefault();
				playerX -= speed;
			} else if (event.keyCode === 39) {
				event.preventDefault();
				playerX += speed;
			}
		}
		function handleKeyUp(event) {
			if (event.keyCode === 32) {
				event.preventDefault();
				jump = false;
			}
		}

// ゲーム開始
		init();
		document.addEventListener('keydown', handleKeyDown);
		document.addEventListener('keyup', handleKeyUp);
	</script>
</body>
</html>