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

No:888

380

←

Prev Next

→

Shooting game starring Zero Fighter
Developer User3180｜Date and time 23/6/17 21:58:42
Build time 77.094 sec｜Game capacity 4.675KB｜

Script

ゼロ戦シューティングゲーム

左右キーで移動、上キーで弾を発射。

←

Prev　Next

→ 　

Back　

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

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.0">
	<style>
		body {
			background-color: #005666;
			margin: 0;
			padding: 0;
			font-size: 2em;
			color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		
		canvas {
			border: 5px solid white;
			background-color: black;
		}
	</style>
	<script>
		window.onload = function() {
			const canvas = document.createElement("canvas");
			canvas.width = window.innerWidth * 0.8;
			canvas.height = window.innerHeight * 0.8;
			document.body.appendChild(canvas);
			
			const ctx = canvas.getContext("2d");
			
			// Create Zero Fighter
			const zeroImg = document.createElement("img");
			zeroImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/airplane_2708.png";
			const zero = {
				x: canvas.width / 2 - 25,
				y: canvas.height - 50,
				width: 50,
				height: 50,
				speed: 10,
				draw: function() {
					ctx.drawImage(zeroImg, zero.x, zero.y, zero.width, zero.height);
				}
			};
			
			// Create bullets
			const bulletImg = document.createElement("img");
			bulletImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/airplane_2708.png";
			const bullets = [];
			function createBullet() {
				bullets.push({
					x: zero.x + zero.width / 2 - 5,
					y: zero.y - 20,
					width: 10,
					height: 20,
					speed: 10,
					draw: function() {
						ctx.drawImage(bulletImg, bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height)
					}
				});
			}
			
			// Create enemy planes
			const enemyImg = document.createElement("img");
			enemyImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/airplane_2708.png";
			const enemies = [];
			function createEnemy() {
				enemies.push({
					x: Math.floor(Math.random() * (canvas.width - 50)),
					y: -50,
					width: 50,
					height: 50,
					speed: Math.floor(Math.random() * 5) + 5,
					draw: function() {
						ctx.drawImage(enemyImg, enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height)
					}
				});
			}
			
			// Check for collisions
			function checkCollision(a, b) {
				return (
					((a.y + a.height) > b.y) && 
					(a.y < (b.y + b.height)) && 
					((a.x + a.width) > b.x) && 
					(a.x < (b.x + b.width))
				);
			}
			
			let gameOver = false;
			let score = 0;
			let level = 1;
			setInterval(function() {
				if (!gameOver) {
					// Clear canvas
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					
					// Draw zero fighter
					zero.draw();
					
					// Move bullets
					for (let i = 0; i < bullets.length; i++) {
						bullets[i].y -= bullets[i].speed;
						bullets[i].draw();
						if (bullets[i].y < -20) {
							bullets.splice(i, 1);
							i--;
						}
					}
					
					// Move and draw enemy planes
					for (let i = 0; i < enemies.length; i++) {
						enemies[i].y += enemies[i].speed;
						enemies[i].draw();
						if (enemies[i].y > canvas.height) {
							enemies.splice(i, 1);
							i--;
						}
						
						// Check for collision with bullets
						for (let j = 0; j < bullets.length; j++) {
							if (checkCollision(enemies[i], bullets[j])) {
								bullets.splice(j, 1);
								j--;
								enemies.splice(i, 1);
								i--;
								score++;
								if (score % 5 === 0) {
									level++;
								}
							}
						}
						
						// Check for collision with Zero Fighter
						if (checkCollision(enemies[i], zero)) {
							gameOver = true;
							alert("Game Over. Your Score: " + score);
							location.reload();
						}
					}
					
					// Create new enemies
					if (level === 1) {
						if (Math.random() > 0.98) {
							createEnemy();
						}
					} else if (level === 2) {
						if (Math.random() > 0.96) {
							createEnemy();
						}
					} else if (level === 3) {
						if (Math.random() > 0.94) {
							createEnemy();
						}
					} else {
						if (Math.random() > 0.92) {
							createEnemy();
						}
					}
				}
			}, 30);
			
			// Add event listener for arrow keys
			document.addEventListener("keydown", function(event) {
				if (event.key === "ArrowLeft" && zero.x > 0) {
					zero.x -= zero.speed;
				} else if (event.key === "ArrowRight" && zero.x < canvas.width - zero.width) {
					zero.x += zero.speed;
				} else if (event.key === "ArrowUp" && bullets.length < 3) {
					createBullet();
				}
			});
		};
	</script>
</head>
<body>
	<h1>ゼロ戦シューティングゲーム</h1>
	<p>左右キーで移動、上キーで弾を発射。</p>
</body>
</html>