Shooting Game to Shoot the Enemy's game

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

No:1534

3260

←

Prev Next

→

Shooting Game to Shoot the Enemy
Developer User3359｜Date and time 23/6/18 18:13:44
Build time 52.932 sec｜Game capacity 4.359KB｜

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 charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f5f5dc;
		}

canvas {
			display: block;
			margin: auto;
			border: 1px solid black;
		}

#score {
			text-align: center;
			font-size: xx-large;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score"></div>

// オブジェクト
		let canvas = document.getElementById("canvas");
		let scoreDisplay = document.getElementById("score");
		let context = canvas.getContext("2d");
		let player = {
			x: CANVAS_WIDTH / 2,
			y: CANVAS_HEIGHT - 50,
			width: 20,
			height: 20,
			color: "blue",
			leftPressed: false,
			rightPressed: false
		};
		let bullets = [];
		let enemies = [];
		let score = 0;

// イベントリスナー
		window.addEventListener("keydown", function(event) {
			switch (event.key) {
				case "ArrowLeft":
					player.leftPressed = true;
					break;
				case "ArrowRight":
					player.rightPressed = true;
					break;
			}
		});

// ゲームのメインループ
		setInterval(function() {
			update();
			draw();
		}, 1000 / FPS);

// 更新処理
		function update() {
			// プレイヤーの移動
			if (player.leftPressed) {
				player.x -= PLAYER_SPEED;
			}

if (player.rightPressed) {
				player.x += PLAYER_SPEED;
			}

// プレイヤーの範囲制限
			if (player.x < 0) {
				player.x = 0;
			}

if (player.x + player.width > CANVAS_WIDTH) {
				player.x = CANVAS_WIDTH - player.width;
			}

// 弾の移動
			for (let i = 0; i < bullets.length; i++) {
				bullets[i].y -= BULLET_SPEED;

// 弾が画面外に出た場合、配列から削除する
				if (bullets[i].y < 0) {
					bullets.splice(i, 1);
					i--;
				}
			}

// 敵の出現
			if (Math.random() < 1 / ENEMY_FREQUENCY) {
				enemies.push({
					x: Math.random() * (CANVAS_WIDTH - 20),
					y: -20,
					width: 20,
					height: 20,
					color: "green"
				});
			}

// 敵の移動・衝突判定
			for (let i = 0; i < enemies.length; i++) {
				enemies[i].y += ENEMY_SPEED;

// 敵が画面外に出た場合、配列から削除する
				if (enemies[i].y > CANVAS_HEIGHT) {
					enemies.splice(i, 1);
					i--;
					continue;
				}

// 弾との衝突判定
				for (let j = 0; j < bullets.length; j++) {
					if (isCollision(bullets[j], enemies[i])) {
						bullets.splice(j, 1);
						j--;
						enemies.splice(i, 1);
						i--;
						score += 10;
						scoreDisplay.textContent = "SCORE: " + score;
					}
				}

// プレイヤーとの衝突判定
				if (isCollision(player, enemies[i])) {
					alert("ゲームオーバー！");
					location.reload();
				}
			}
		}

// 描画処理
		function draw() {
			// キャンバスをクリアする
			context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// プレイヤーを描画する
			drawRect(player);

// 弾を描画する
			for (let i = 0; i < bullets.length; i++) {
				drawRect(bullets[i]);
			}

// 敵を描画する
			for (let i = 0; i < enemies.length; i++) {
				drawRect(enemies[i]);
			}
		}

// 四角形を描画する
		function drawRect(rect) {
			context.fillStyle = rect.color;
			context.fillRect(rect.x, rect.y, rect.width, rect.height);
		}

// 衝突判定
		function isCollision(obj1, obj2) {
			return obj1.x < obj2.x + obj2.width
				&& obj2.x < obj1.x + obj1.width
				&& obj1.y < obj2.y + obj2.height
				&& obj2.y < obj1.y + obj1.height;
		}
	</script>
</body>
</html>