Space shooting alien game's game

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

No:23138

←

Prev Next

→

Space shooting alien game
Developer User10675｜Date and time 23/10/28 3:19:13
Build time 117.614 sec｜Game capacity 4.553KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Space Shooting Alien Game</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="500" height="400"></canvas>

// Player ship object
		function Ship() {
			this.x = canvas.width / 2;
			this.y = canvas.height - 50;
			this.width = 30;
			this.height = 30;
			this.speed = 5;

this.moveLeft = function() {
				if (this.x > 0) {
					this.x -= this.speed;
				}
			};

this.moveRight = function() {
				if (this.x < canvas.width - this.width) {
					this.x += this.speed;
				}
			};

this.shoot = function() {
				bullets.push(new Bullet(this.x + (this.width / 2), this.y));
			};

this.draw = function() {
				canvasContext.fillStyle = "white";
				canvasContext.fillRect(this.x, this.y, this.width, this.height);
			};
		}

// Alien object
		function Alien(x, y) {
			this.x = x;
			this.y  = y;
			this.width = 30;
			this.height = 30;
			this.speed = 2;

this.update = function() {
				this.y += this.speed;
			};

this.draw = function() {
				canvasContext.fillStyle = "green";
				canvasContext.fillRect(this.x, this.y, this.width, this.height);
			};
		}

// Bullet object
		function Bullet(x, y) {
			this.x = x;
			this.y = y;
			this.width = 3;
			this.height = 10;
			this.speed = 5;

this.update = function() {
				this.y -= this.speed;
			};

this.draw = function() {
				canvasContext.fillStyle = "red";
				canvasContext.fillRect(this.x, this.y, this.width, this.height);
			};
		}

// Initialize game
		function init() {
			canvas = document.getElementById("gameCanvas");
			canvasContext = canvas.getContext("2d");

// Create player ship
			playerShip = new Ship();

// Create initial aliens
			createAliens();

// Listen for keyboard events
			document.addEventListener("keydown", handleKeyPress);

// Start game loop
			gameStarted = true;
			gameLoop();
		}

// Create initial aliens
		function createAliens() {
			for (var i = 0; i < 5; i++) {
				aliens.push(new Alien(i * 60 + 50, 50));
				aliens.push(new Alien(i * 60 + 50, 100));
			}
		}

// Handle keyboard input
		function handleKeyPress(event) {
			if (event.keyCode === 37) { // Left arrow key
				playerShip.moveLeft();
			} else if (event.keyCode === 39) { // Right arrow key
				playerShip.moveRight();
			} else if (event.keyCode === 32) { // Spacebar
				playerShip.shoot();
			}
		}

// Update game objects
		function update() {
			// Update player ship
			playerShip.update();

// Update aliens
			for (var i = 0; i < aliens.length; i++) {
				aliens[i].update();
			}

// Update bullets
			for (var i = 0; i < bullets.length; i++) {
				bullets[i].update();
			}

// Check for collisions
			checkCollisions();
		}

// Draw game objects
		function draw() {
			// Clear canvas
			canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw player ship
			playerShip.draw();

// Draw aliens
			for (var i = 0; i < aliens.length; i++) {
				aliens[i].draw();
			}

// Draw bullets
			for (var i = 0; i < bullets.length; i++) {
				bullets[i].draw();
			}

// Draw score
			canvasContext.fillStyle = "white";
			canvasContext.font = "20px Arial";
			canvasContext.fillText("Score: " + score, 10, 30);
		}

// Check for collisions
		function checkCollisions() {
			// Check bullet-alien collisions
			for (var i = 0; i < bullets.length; i++) {
				for (var j = 0; j < aliens.length; j++) {
					if (detectCollision(bullets[i], aliens[j])) {
						// Remove bullet and alien from arrays
						bullets.splice(i, 1);
						aliens.splice(j, 1);

// Update score
						score += 10;
					}
				}
			}

// Check player-alien collisions
			for (var i = 0; i < aliens.length; i++) {
				if (detectCollision(playerShip, aliens[i])) {
					endGame();
				}
			}
		}

// Detect collision between two objects
		function detectCollision(obj1, obj2) {
			return obj1.x < obj2.x + obj2.width &&
				   obj1.x + obj1.width > obj2.x &&
				   obj1.y < obj2.y + obj2.height &&
				   obj1.y + obj1.height > obj2.y;
		}

// Game loop
		function gameLoop() {
			if (!gameStarted) {
				return;
			}

update();
			draw();

requestAnimationFrame(gameLoop);
		}

// End game
		function endGame() {
			gameStarted = false;
			alert("Game Over! Your score: " + score);
		}

// Start game
		init();
	</script>
</body>
</html>