Vertical scrolling shooting game's game

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

No:827

297

←

Prev Next

→

Vertical scrolling shooting game
Developer User3156｜Date and time 23/6/17 19:51:51
Build time 66.291 sec｜Game capacity 3.987KB｜

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>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		canvas {
			background-color: black;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="game"></canvas>

let player = {
			x: gameCanvas.width / 2,
			y: gameCanvas.height - 50,
			size: 30,
			speed: 5
		}

let enemies = [];
		let enemySize = 20;
		let enemySpeed = 3;
		let enemyInterval = 1000;

let bullets = [];
		let bulletSize = 5;
		let bulletSpeed = 10;

let score = 0;
		let gameOver = false;

function startGame() {
			if (gameOver) {
				location.reload();
			}

draw();
			update();
			setInterval(spawnEnemy, enemyInterval);
		}

function draw() {
			ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

// Draw player
			ctx.fillStyle = "yellow";
			ctx.fillRect(player.x - (player.size / 2), player.y - (player.size / 2), player.size, player.size);

// Draw enemies
			ctx.fillStyle = "red";
			for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];
				ctx.fillRect(enemy.x - (enemySize / 2), enemy.y - (enemySize / 2), enemySize, enemySize);
			}

// Draw bullets
			ctx.fillStyle = "white";
			for (let i = 0; i < bullets.length; i++) {
				let bullet = bullets[i];
				ctx.fillRect(bullet.x - (bulletSize / 2), bullet.y - (bulletSize / 2), bulletSize, bulletSize);
			}

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

// Draw game over message
			if (gameOver) {
				ctx.fillStyle = "white";
				ctx.font = "48px Arial";
				ctx.fillText("Game Over", gameCanvas.width / 2 - 150, gameCanvas.height / 2);
			}
		}

// Update bullets
			for (let i = 0; i < bullets.length; i++) {
				bullets[i].y -= bulletSpeed;

if (bullets[i].y < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}

// Update enemies
			for (let i = 0; i < enemies.length; i++) {
				enemies[i].y += enemySpeed;

if (enemies[i].y > gameCanvas.height) {
					enemies.splice(i, 1);
					i--;
				}
			}

// Check for collisions
			for (let i = 0; i < enemies.length; i++) {
				for (let j = 0; j < bullets.length; j++) {
					let dx = enemies[i].x - bullets[j].x;
					let dy = enemies[i].y - bullets[j].y;
					let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < (enemySize / 2) + (bulletSize / 2)) {
						enemies.splice(i, 1);
						i--;
						bullets.splice(j, 1);
						j--;
						score++;
					}
				}

let dx = player.x - enemies[i].x;
				let dy = player.y - enemies[i].y;
				let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < (player.size / 2) + (enemySize / 2)) {
					gameOver = true;
				}
			}

if (!gameOver) {
				requestAnimationFrame(update);
			}
		}

function spawnEnemy() {
			let x = Math.floor(Math.random() * gameCanvas.width);
			let y = 0 - enemySize;

enemies.push({
				x: x,
				y: y
			});
		}

function shoot() {
			bullets.push({
				x: player.x,
				y: player.y - (player.size / 2)
			});
		}

startGame();
	</script>
</body>
</html>