A game to shoot zombies with a gun in first person's game

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

No:2099

4394

←

Prev Next

→

A game to shoot zombies with a gun in first person
Developer User3496｜Date and time 23/6/20 5:03:35
Build time 70.852 sec｜Game capacity 5.033KB｜

Script

For cell phones:

Swipe left/right: Move left/right

Tap: Shot

For PCs:

Left and right arrow keys: Move left and right

Space key: Shot

←

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>Zombie Shooter Game</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div>
		<p>スマホの場合：</p>
		<p>左右のスワイプ：左右に移動</p>
		<p>タップ：ショット</p>
		<p>PCの場合：</p>
		<p>左右の矢印キー：左右に移動</p>
		<p>スペースキー：ショット</p>
	</div>
	<div>
		<canvas id="canvas" width="500" height="500"></canvas>
	</div>
	
	<script>
		// キャンバスの取得
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		
		// ゲームの状態の初期化
		let score = 0;
		let gameover = false;
		let zombies = [];
		let bullets = [];
		let player = {
			x: canvas.width / 2,
			y: canvas.height - 100,
			radius: 20,
			color: "yellow"
		};
		let touchStartX = null;
		
		// ゾンビの生成
		function createZombie() {
			zombies.push({
				x: Math.random() * canvas.width,
				y: -50,
				radius: 25,
				color: "green",
				speed: Math.random() * 5 + 2
			});
		}
		
		// 弾丸の生成
		function createBullet() {
			bullets.push({
				x: player.x,
				y: player.y,
				radius: 5,
				color: "red",
				speed: 10
			});
		}
		
		// キャンバスをクリアーする関数
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
		
		// プレイヤーを描画する関数
		function drawPlayer() {
			ctx.beginPath();
			ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
			ctx.fillStyle = player.color;
			ctx.fill();
			ctx.closePath();
		}
		
		// ゾンビを描画する関数
		function drawZombies() {
			zombies.forEach(function(zombie) {
				ctx.beginPath();
				ctx.arc(zombie.x, zombie.y, zombie.radius, 0, Math.PI * 2);
				ctx.fillStyle = zombie.color;
				ctx.fill();
				ctx.closePath();
			});
		}
		
		// 弾丸を描画する関数
		function drawBullets() {
			bullets.forEach(function(bullet) {
				ctx.beginPath();
				ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
				ctx.fillStyle = bullet.color;
				ctx.fill();
				ctx.closePath();
			});
		}
		
		// スコアを描画する関数
		function drawScore() {
			ctx.fillStyle = "black";
			ctx.font = "20px Arial";
			ctx.fillText("Score: " + score, canvas.width - 100, 30);
		}
		
		// ゲームオーバー時の処理を行う関数
		function gameOver() {
			clearInterval(gameLoop);
			gameover = true;
			ctx.fillStyle = "red";
			ctx.font = "50px Arial";
			ctx.textAlign = "center";
			ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
		}
		
		// キーが押された時の処理
		document.addEventListener("keydown", function(event) {
			if (event.keyCode === 37) { // 左矢印キー
				player.x -= 10;
			} else if (event.keyCode === 39) { // 右矢印キー
				player.x += 10;
			} else if (event.keyCode === 32) { // スペースキー
				createBullet();
			}
		});
		
		// タッチが開始された時の処理
		document.addEventListener("touchstart", function(event) {
			touchStartX = event.touches[0].clientX;
		});
		
		// タッチが終了した時の処理
		document.addEventListener("touchend", function(event) {
			let touchEndX = event.changedTouches[0].clientX;
			if (touchEndX - touchStartX > 50) { // 右にスワイプ
				player.x += 10;
			} else if (touchEndX - touchStartX < -50) { // 左にスワイプ
				player.x -= 10;
			} else { // タップ
				createBullet();
			}
		});
		
		// ゲームループ
		let gameLoop = setInterval(function() {
			// ゲームオーバー時にはループを終了する
			if (gameover) {
				return;
			}
			
			// キャンバスをクリアーする
			clearCanvas();
			
			// プレイヤーを描画する
			drawPlayer();
			
			// ゾンビを生成する
			if (Math.random() < 0.02) {
				createZombie();
			}
			
			// ゾンビを移動する
			zombies.forEach(function(zombie, index) {
				zombie.y += zombie.speed;
				if (zombie.y > canvas.height + zombie.radius) {
					zombies.splice(index, 1);
				}
			});
			
			// 弾丸を移動する
			bullets.forEach(function(bullet, i) {
				bullet.y -= bullet.speed;
				if (bullet.y < -bullet.radius) {
					bullets.splice(i, 1);
				}
				
				// ゾンビとの当たり判定
				zombies.forEach(function(zombie, j) {
					let distance = Math.sqrt(
						Math.pow(bullet.x - zombie.x, 2) + Math.pow(bullet.y - zombie.y, 2)
					);
					if (distance < bullet.radius + zombie.radius) {
						bullets.splice(i, 1);
						zombies.splice(j, 1);
						score ++;
					}
				});
			});
			
			// ゾンビを描画する
			drawZombies();
			
			// 弾丸を描画する
			drawBullets();
			
			// スコアを描画する
			drawScore();
			
			// ゲームオーバー判定
			zombies.forEach(function(zombie) {
				let distance = Math.sqrt(
					Math.pow(player.x - zombie.x, 2) + Math.pow(player.y - zombie.y, 2)
				);
				if (distance < player.radius + zombie.radius) {
					gameOver();
				}
			});
		}, 30);
	</script>
</body>
</html>