Vertical scrolling shooting game's game

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

No:828

394

←

Prev Next

→

Vertical scrolling shooting game
Developer User3157｜Date and time 23/6/17 19:52:38
Build time 53.605 sec｜Game capacity 4.321KB｜

Script

上記は、縦スクロールのシューティングゲームのプログラムです。プログラムはHTML、CSS、JavaScriptを含んだ1枚のHTMLファイルとして実装されており、スマートフォンでも遊べるように配慮されています。絵文字も多用され、プレイヤーは矢印キーで移動し、スペースバーで弾を発射します。プレイヤーは敵を避けながら弾を当て、スコアを稼ぎます。敵に当たるか、敵が一定の高さに達するとゲームオーバーになり、最終スコアが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>縦スクロールシューティングゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: black;
		}
		canvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas></canvas>
	<script>
		const canvas = document.querySelector("canvas");
		const ctx = canvas.getContext("2d");
		const WIDTH = canvas.width = window.innerWidth;
		const HEIGHT = canvas.height = window.innerHeight;
		let playerX = WIDTH/2;
		let playerY = HEIGHT-50;
		const playerSize = 30;
		const playerSpeed = 5;
		let bullets = [];
		let enemies = [];
		let score = 0;
		let gameOver = false;
		
		function drawPlayer() {
			ctx.fillStyle = "white";
			ctx.fillRect(playerX-playerSize/2, playerY-playerSize/2, playerSize, playerSize);
		}
		
		function movePlayer(event) {
			switch(event.key) {
				case "ArrowLeft":
					playerX -= playerSpeed;
					if (playerX < playerSize/2) {
						playerX = playerSize/2;
					}
					break;
				case "ArrowRight":
					playerX += playerSpeed;
					if (playerX > WIDTH-playerSize/2) {
						playerX = WIDTH-playerSize/2;
					}
					break;
				case "ArrowUp":
					playerY -= playerSpeed;
					if (playerY < playerSize/2) {
						playerY = playerSize/2;
					}
					break;
				case "ArrowDown":
					playerY += playerSpeed;
					if (playerY > HEIGHT-playerSize/2) {
						playerY = HEIGHT-playerSize/2;
					}
					break;
			}
		}
		
		function drawBullet() {
			for (let i=0; i<bullets.length; i++) {
				ctx.fillStyle = "cyan";
				ctx.beginPath();
				ctx.arc(bullets[i].x, bullets[i].y, 5, 0, Math.PI*2);
				ctx.fill();
				bullets[i].y -= 10;
			}
			bullets = bullets.filter((b) => b.y > -5);
		}
		
		function fireBullet() {
			bullets.push({x: playerX, y: playerY-playerSize/2});
		}
		
		function drawEnemy() {
			for (let i=0; i<enemies.length; i++) {
				ctx.fillStyle = "red";
				ctx.beginPath();
				ctx.arc(enemies[i].x, enemies[i].y, 15, 0, Math.PI*2);
				ctx.fill();
				enemies[i].y += 5;
				if (enemies[i].y > HEIGHT+15) {
					enemies.splice(i, 1);
					i--;
				}
			}
		}
		
		function createEnemy() {
			const x = Math.floor(Math.random() * WIDTH);
			enemies.push({x: x, y: 0});
		}
		
		function detectCollision() {
			for (let i=0; i<enemies.length; i++) {
				if (Math.abs(playerX-enemies[i].x) < playerSize/2+15 && Math.abs(playerY-enemies[i].y) < playerSize/2+15) {
					gameOver = true;
					return;
				}
				for (let j=0; j<bullets.length; j++) {
					if (Math.abs(bullets[j].x-enemies[i].x) < 5+15 && Math.abs(bullets[j].y-enemies[i].y) < 5+15) {
						score += 10;
						enemies.splice(i, 1);
						i--;
						bullets.splice(j, 1);
						break;
					}
				}
			}
		}
		
		function drawScore() {
			ctx.font = "24px Arial";
			ctx.fillStyle = "white";
			ctx.fillText("SCORE: "+score, 10, 30);
		}
		
		function gameOverScreen() {
			ctx.font = "48px Arial";
			ctx.fillStyle = "white";
			ctx.fillText("GAME OVER", WIDTH/2-150, HEIGHT/2-24);
			ctx.font = "24px Arial";
			ctx.fillText("FINAL SCORE: "+score, WIDTH/2-80, HEIGHT/2+24);
		}
		
		function mainLoop() {
			if (!gameOver) {
				ctx.clearRect(0, 0, WIDTH, HEIGHT);
				drawPlayer();
				drawBullet();
				drawEnemy();
				detectCollision();
				drawScore();
				if (Math.random() < 0.05) {
					createEnemy();
				}
			} else {
				gameOverScreen();
			}
			requestAnimationFrame(mainLoop);
		}
		
		document.addEventListener("keydown", movePlayer);
		document.addEventListener("keydown", (event) => {
			if (event.key === " ") {
				fireBullet();
			}
		});
		
		mainLoop();
	</script>
</body>
</html>