Shoot game with Zombies's game

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

No:3399

2435

←

Prev Next

→

Shoot game with Zombies
Developer User3692｜Date and time 23/6/24 23:56:17
Build time 65.785 sec｜Game capacity 5.678KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Zombie Shooting</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			background-color: #000;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script>
		// キャンバスの幅と高さを設定
		const canvas = document.getElementById('gameCanvas');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// ゲームの状態
		let gameState = {
			score: 0,
			isGameOver: false
		};

// Zombie オブジェクトの定義
		class Zombie {
			constructor(x, y, speed) {
				this.x = x;
				this.y = y;
				this.width = 50;
				this.height = 50;
				this.speed = speed;
				this.isDead = false;
			}

draw() {
				// ゾンビの画像を描画
				const zombieImage = document.createElement('img');
				zombieImage.src = '🧟';
				canvas.getContext('2d').drawImage(zombieImage, this.x, this.y, this.width, this.height);
			}

update() {
				// ゾンビを左に移動する
				this.x -= this.speed;

// ゾンビが画面の左端に到達したら消す
				if (this.x + this.width < 0) {
					this.isDead = true;
				}
			}
		}

// Bullet オブジェクトの定義
		class Bullet {
			constructor(x, y, speed) {
				this.x = x;
				this.y = y;
				this.radius = 10;
				this.speed = speed;
			}

draw() {
				// 弾の画像を描画
				canvas.getContext('2d').beginPath();
				canvas.getContext('2d').arc(this.x, this.y, this.radius, 0, Math.PI * 2);
				canvas.getContext('2d').fillStyle = '#fff';
				canvas.getContext('2d').fill();
			}

update() {
				// 弾を右に移動する
				this.x += this.speed;

// 弾が画面の右端に到達したら消す
				if (this.x - this.radius > canvas.width) {
					gameState.isGameOver = true;
				}
			}

hitTest(zombie) {
				// 弾とゾンビの当たり判定
				const distance = Math.sqrt((this.x - (zombie.x + zombie.width / 2)) ** 2 + (this.y - (zombie.y + zombie.height / 2)) ** 2);
				return distance < this.radius + zombie.width / 2;
			}
		}

// Player オブジェクトの定義
		class Player {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.width = 50;
				this.height = 50;
				this.speed = 10;
			}

draw() {
				// プレイヤーの画像を描画
				const playerImage = document.createElement('img');
				playerImage.src = '🧑';
				canvas.getContext('2d').drawImage(playerImage, this.x, this.y, this.width, this.height);
			}

moveUp() {
				this.y -= this.speed;
			}

moveDown() {
				this.y += this.speed;
			}

moveLeft() {
				this.x -= this.speed;
			}

moveRight() {
				this.x += this.speed;
			}
		}

// ゾンビのリスト
		const zombies = [];

// 弾のリスト
		const bullets = [];

// プレイヤーのインスタンスを作成
		const player = new Player(50, canvas.height / 2 - 25);

// ゲームのメインループ
		function gameLoop() {
			// ゲームオーバーかどうかをチェック
			if (gameState.isGameOver) {
				alert('Game Over! Score: ' + gameState.score);
				location.reload();
			}

// キャンバスをクリア
			canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

// ゾンビを生成
			if (Math.random() < 0.05) {
				const speed = Math.floor(Math.random() * 5) + 5;
				const x = canvas.width;
				const y = Math.floor(Math.random() * (canvas.height - 50));
				const zombie = new Zombie(x, y, speed);
				zombies.push(zombie);
			}

// ゾンビを描画、更新
			zombies.forEach((zombie) => {
				if (!zombie.isDead) {
					zombie.draw();
					zombie.update();
				}
			});

// 弾を描画、更新、当たり判定をチェック
			bullets.forEach((bullet) => {
				bullet.draw();
				bullet.update();

zombies.forEach((zombie) => {
					if (!zombie.isDead && bullet.hitTest(zombie)) {
						bullet.isDead = true;
						zombie.isDead = true;
						gameState.score++;
					}
				});
			});

// 弾が消えたものをリストから削除する
			for (let i = bullets.length - 1; i >= 0; i--) {
				if (bullets[i].isDead) {
					bullets.splice(i, 1);
				}
			}

// プレイヤーを描画
			player.draw();

// スマホでの操作を実装
			canvas.addEventListener('touchstart', handleTouchStart, false);
			canvas.addEventListener('touchmove', handleTouchMove, false);

let xDown = null;
			let yDown = null;

function handleTouchStart(event) {
				xDown = event.touches[0].clientX;
				yDown = event.touches[0].clientY;
			}

function handleTouchMove(event) {
				if (!xDown || !yDown) {
					return;
				}

const xUp = event.touches[0].clientX;
				const yUp = event.touches[0].clientY;
				const xDiff = xDown - xUp;
				const yDiff = yDown - yUp;

if (Math.abs(xDiff) > 0) {
					if (xDiff > 0) {
						player.moveLeft();
					} else {
						player.moveRight();
					}
				} else if (Math.abs(yDiff) > 0) {
					if (yDiff > 0) {
						player.moveUp();
					} else {
						player.moveDown();
					}
				}

xDown = null;
				yDown = null;
			}

// スコアを表示
			canvas.getContext('2d').fillStyle = '#fff';
			canvas.getContext('2d').font = '32px Arial';
			canvas.getContext('2d').fillText('Score: ' + gameState.score, 50, 50);

// 次のフレームを描画
			requestAnimationFrame(gameLoop);
		}

// 弾を発射する
		canvas.addEventListener('click', () => {
			const speed = 15;
			const x = player.x + player.width;
			const y = player.y + player.height / 2;
			const bullet = new Bullet(x, y, speed);
			bullets.push(bullet);
		});

// ゲームをスタートする
		gameLoop();
	</script>
</body>
</html>