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

No:3122

1900

←

Prev Next

→

Patriot Missile Intercept Simulation
Developer User3660｜Date and time 23/6/23 22:10:24
Build time 46.815 sec｜Game capacity 3.949KB｜

Script

パトリオット・ミサイルシミュレーション

迎撃するミサイルをタップして発射しよう！
シューティングスターの出現に注意しよう！

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>パトリオット・ミサイルシミュレーション</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>パトリオット・ミサイルシミュレーション</h1>
	<p>迎撃するミサイルをタップして発射しよう！<br>シューティングスターの出現に注意しよう！</p>
	<canvas id="canvas" width="300" height="500"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

// ゲームの設定
		var settings = {
			missileSpeed: 5,
			shootingStarProbability: 0.05,
			shootingStarSpeed: 3,
			shootingStarSize: 10,
			shootingStarColor: "#f1c40f",
			fontSize: 30,
			fontColor: "#2c3e50",
			gameOverText: "Game Over",
			scoreText: "Score: "
		};

// ゲームの状態
		var state = {
			score: 0,
			missiles: [],
			shootingStars: []
		};

// ミサイルを生成する
		function createMissile() {
			var missile = {
				x: Math.random() * canvas.width,
				y: 0,
				color: "#e74c3c",
				radius: 10,
				alive: true
			};
			state.missiles.push(missile);
		}

// シューティングスターを生成する
		function createShootingStar() {
			var shootingStar = {
				x: Math.random() * canvas.width,
				y: 0,
				color: settings.shootingStarColor,
				size: settings.shootingStarSize,
				speed: settings.shootingStarSpeed,
				alive: true
			};
			state.shootingStars.push(shootingStar);
		}

// ミサイルを移動する
		function moveMissiles() {
			state.missiles.forEach(function(missile) {
				missile.y += settings.missileSpeed;
			});
		}

// シューティングスターを移動する
		function moveShootingStars() {
			state.shootingStars.forEach(function(shootingStar) {
				shootingStar.y += shootingStar.speed;
			});
		}

// ミサイルを描画する
		function drawMissiles() {
			state.missiles.forEach(function(missile) {
				ctx.beginPath();
				ctx.arc(missile.x, missile.y, missile.radius, 0, Math.PI * 2);
				ctx.fillStyle = missile.color;
				ctx.fill();
				ctx.closePath();
			});
		}

// シューティングスターを描画する
		function drawShootingStars() {
			state.shootingStars.forEach(function(shootingStar) {
				ctx.fillStyle = shootingStar.color;
				ctx.fillRect(shootingStar.x, shootingStar.y, shootingStar.size, shootingStar.size);
			});
		}

// ハイスコアを描画する
		function drawScore() {
			ctx.font = settings.fontSize + "px Arial";
			ctx.fillStyle = settings.fontColor;
			ctx.fillText(settings.scoreText + state.score, 10, 30);
		}

// ゲームオーバーを描画する
		function drawGameOver() {
			ctx.font = settings.fontSize + "px Arial";
			ctx.fillStyle = settings.fontColor;
			ctx.fillText(settings.gameOverText, canvas.width / 2 - 70, canvas.height / 2);
		}

// ミサイルをクリックした際の処理
		canvas.addEventListener("click", function(e) {
			var mouseX = e.clientX - canvas.offsetLeft;
			var mouseY = e.clientY - canvas.offsetTop;
			state.missiles.forEach(function(missile) {
				var distance = Math.sqrt(Math.pow(missile.x - mouseX, 2) + Math.pow(missile.y - mouseY, 2));
				if (distance <= missile.radius) {
					missile.alive = false;
					state.score++;
				}
			});
		});

// メインループ
		function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			moveMissiles();
			drawMissiles();

if (Math.random() < settings.shootingStarProbability) {
				createShootingStar();
			}
			moveShootingStars();
			drawShootingStars();

drawScore();

var aliveMissiles = state.missiles.filter(function(missile) {
				return missile.alive;
			});
			if (aliveMissiles.length === 0) {
				drawGameOver();
				clearInterval(interval);
			}
		}
		var interval = setInterval(loop, 1000/60);

// 初期化
		createMissile();
	</script>
</body>
</html>