A game in which you are in a fighter plane and avoid missiles locked on from behind.'s game

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

No:552

189

←

Prev Next

→

A game in which you are in a fighter plane and avo..ALL
Developer User1006｜Date and time 23/6/15 16:56:29
Build time 54.04 sec｜Game capacity 4.057KB｜

Script

←

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 type="text/css">
		canvas {
			margin: auto;
			display: block;
			border: 1px solid black;
		}
	</style>
</head>

// 戦闘機の初期位置
		var fighter = {
			x: canvas.width / 2,
			y: canvas.height - 100,
			width: 50,
			height: 50,
			speed: 10
		};

// ミサイルの配列
		var missiles = [];

// キー操作のイベントリスナ
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 37) {
				fighter.x -= fighter.speed;
			} else if (event.keyCode == 39) {
				fighter.x += fighter.speed;
			}
		});

// 開始画面の描画
		function drawStartScreen() {
			ctx.font = "48px sans-serif";
			ctx.fillStyle = "black";
			ctx.textAlign = "center";
			ctx.fillText("ミサイル回避ゲーム", canvas.width / 2, canvas.height / 2 - 50);
			ctx.font = "24px sans-serif";
			ctx.fillText("スペースキーで開始", canvas.width / 2, canvas.height / 2 + 50);
		}

// ゲームオーバー画面の描画
		function drawGameOverScreen() {
			ctx.font = "48px sans-serif";
			ctx.fillStyle = "black";
			ctx.textAlign = "center";
			ctx.fillText("ゲームオーバー", canvas.width / 2, canvas.height / 2 - 50);
			ctx.font = "24px sans-serif";
			ctx.fillText("スペースキーで再挑戦", canvas.width / 2, canvas.height / 2 + 50);
		}

// 戦闘機の描画
		function drawFighter() {
			ctx.fillStyle = "red";
			ctx.fillRect(fighter.x, fighter.y, fighter.width, fighter.height);
		}

// ミサイルの描画
		function drawMissiles() {
			ctx.fillStyle = "black";
			for (var i = 0; i < missiles.length; i++) {
				var missile = missiles[i];
				ctx.fillRect(missile.x, missile.y, missile.width, missile.height);
			}
		}

// ミサイルの生成
		function createMissile() {
			var missile = {
				x: Math.random() * (canvas.width - 50),
				y: -50,
				width: 30,
				height: 50,
				speed: missileSpeed
			};
			missiles.push(missile);
			setTimeout(createMissile, missileInterval);
		}

// ミサイルの移動
		function moveMissiles() {
			for (var i = 0; i < missiles.length; i++) {
				var missile = missiles[i];
				missile.y += missile.speed;
				if (missile.y > canvas.height) {
					missiles.splice(i--, 1);
					score--;
				}
			}
		}

// 当たり判定の検知
		function detectCollision() {
			for (var i = 0; i < missiles.length; i++) {
				var missile = missiles[i];
				if (detectOverlap(fighter, missile)) {
					gameOver = true;
					break;
				}
			}
		}

// 重なりの検知
		function detectOverlap(rect1, rect2) {
			if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x &&
				rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) {
				return true;
			}
			return false;
		}

// スコアの描画
		function drawScore() {
			ctx.font = "24px sans-serif";
			ctx.fillStyle = "black";
			ctx.textAlign = "left";
			ctx.fillText("SCORE: " + score, 10, 30);
		}

// ゲームループ
		function gameLoop() {
			if (!gameStarted) {
				drawStartScreen();
				return;
			}

ctx.clearRect(0, 0, canvas.width, canvas.height);

moveMissiles();
			detectCollision();
			drawFighter();
			drawMissiles();
			drawScore();
			
			if (gameOver) {
				drawGameOverScreen();
				return;
			}

requestAnimationFrame(gameLoop);
		}

// ゲーム開始
		function startGame() {
			gameStarted = true;
			createMissile();
			gameLoop();
		}

// スペースキー押下時の処理
		document.addEventListener("keyup", function(event) {
			if (event.keyCode == 32) {
				if (gameStarted && gameOver) {
					location.reload();
				} else {
					startGame();
				}
			}
		});
	</script>
</body>
</html>