Spaces:

AMINKI
/

game1

Running

App Files Files Community

game1 / index.html

AMINKI

Update index.html

6a10d1c verified over 1 year ago

Raw

History Blame Contribute Delete

12.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Zombie Survival 3D</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: #333;
	font-family: Arial, sans-serif;
	cursor: crosshair;
	perspective: 1000px;
	}

	#score, #health, #timer, #weapon {
	position: fixed;
	color: white;
	font-size: 20px;
	z-index: 100;
	}
	#score {
	top: 10px;
	left: 10px;
	}
	#health {
	top: 10px;
	right: 10px;
	}
	#timer {
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	}
	#weapon {
	top: 40px;
	left: 10px;
	}

	#startScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 1000;
	}

	#startButton {
	padding: 10px 20px;
	font-size: 18px;
	background: green;
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	margin-top: 20px;
	}

	#player {
	position: absolute;
	width: 40px;
	height: 40px;
	background: lime;
	border-radius: 50%;
	transform-origin: center;
	transform: translate3d(-50%, -50%, 0);
	}

	.zombie {
	position: absolute;
	width: 40px;
	height: 40px;
	background: crimson;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	}

	.bullet {
	position: absolute;
	width: 8px;
	height: 8px;
	background: yellow;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	}

	.item {
	position: absolute;
	width: 20px;
	height: 20px;
	background: cyan;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	}
	</style>
	</head>
	<body>
	<div id="startScreen">
	<h1>Zombie Survival 3D</h1>
	<button id="startButton">Start Game</button>
	</div>
	<div id="score">Score: 0</div>
	<div id="health">Health: 100</div>
	<div id="timer">Time: 0</div>
	<div id="weapon">Weapon: Machine Gun</div>
	<div id="player"></div>

	<script>
	const startScreen = document.getElementById('startScreen');
	const startButton = document.getElementById('startButton');
	const player = document.getElementById('player');
	const scoreDisplay = document.getElementById('score');
	const healthDisplay = document.getElementById('health');
	const timerDisplay = document.getElementById('timer');
	const weaponDisplay = document.getElementById('weapon');

	let score = 0;
	let health = 100;
	let gameRunning = false;
	let bullets = [];
	let zombies = [];
	let items = [];
	let mouseX = 0, mouseY = 0;
	let playerX = window.innerWidth / 2;
	let playerY = window.innerHeight / 2;
	let gameTime = 0;
	let zombieSpeedMultiplier = 1;
	let timeInterval;
	let isShooting = false;
	let lastShotTime = 0;
	const bulletSpeed = 20; // 총알 속도
	const bulletsPerSecond = 50; // 초당 50발 (2초에 100발)

	// 총소리 사운드
	const shootSound = new Audio('45.wav'); // 45.wav 파일 사용
	shootSound.volume = 0.5; // 볼륨 조절

	// 플레이어 이동 업데이트
	function updatePlayer() {
	player.style.left = `${playerX}px`;
	player.style.top = `${playerY}px`;
	}

	// 플레이어 이동 처리
	document.addEventListener('keydown', (e) => {
	const speed = 5; // 플레이어 이동 속도
	if (e.key === 'w') playerY -= speed;
	if (e.key === 's') playerY += speed;
	if (e.key === 'a') playerX -= speed;
	if (e.key === 'd') playerX += speed;
	updatePlayer();
	});

	// 좀비 생성
	function spawnZombie() {
	if (!gameRunning) return;

	const zombie = document.createElement('div');
	zombie.className = 'zombie';
	const size = 40;

	const side = Math.floor(Math.random() * 4); // 0: 위, 1: 오른쪽, 2: 아래, 3: 왼쪽
	let x, y;

	if (side === 0) { // 위쪽에서 생성
	x = Math.random() * window.innerWidth;
	y = -size;
	} else if (side === 1) { // 오른쪽에서 생성
	x = window.innerWidth + size;
	y = Math.random() * window.innerHeight;
	} else if (side === 2) { // 아래쪽에서 생성
	x = Math.random() * window.innerWidth;
	y = window.innerHeight + size;
	} else { // 왼쪽에서 생성
	x = -size;
	y = Math.random() * window.innerHeight;
	}

	document.body.appendChild(zombie);
	zombies.push({ element: zombie, x, y, speed: (0.5 + Math.random() * 1) * zombieSpeedMultiplier });

	updateZombies();
	}

	// 좀비 이동 및 충돌 처리
	function updateZombies() {
	zombies.forEach((zombie, index) => {
	const angle = Math.atan2(playerY - zombie.y, playerX - zombie.x);
	zombie.x += Math.cos(angle) * zombie.speed;
	zombie.y += Math.sin(angle) * zombie.speed;
	zombie.element.style.left = `${zombie.x}px`;
	zombie.element.style.top = `${zombie.y}px`;

	const distanceToPlayer = Math.hypot(zombie.x - playerX, zombie.y - playerY);
	if (distanceToPlayer < 40) {
	health -= 10;
	healthDisplay.textContent = `Health: ${health}`;
	zombie.element.remove();
	zombies.splice(index, 1);

	if (health <= 0) {
	endGame();
	}
	}
	});
	}

	// 총알 생성
	function shootBullet() {
	if (!gameRunning) return;

	const bullet = document.createElement('div');
	bullet.className = 'bullet';
	const angle = Math.atan2(mouseY - playerY, mouseX - playerX);

	bullets.push({
	element: bullet,
	x: playerX,
	y: playerY,
	vx: Math.cos(angle) * bulletSpeed,
	vy: Math.sin(angle) * bulletSpeed
	});

	document.body.appendChild(bullet);

	// 총소리 재생
	shootSound.currentTime = 0; // 사운드를 처음부터 재생
	shootSound.play();
	}

	// 총알 업데이트
	function updateBullets() {
	bullets.forEach((bullet, index) => {
	bullet.x += bullet.vx;
	bullet.y += bullet.vy;

	bullet.element.style.left = `${bullet.x}px`;
	bullet.element.style.top = `${bullet.y}px`;

	// 화면 밖으로 나간 총알 제거
	if (bullet.x < 0 \|\| bullet.x > window.innerWidth \|\| bullet.y < 0 \|\| bullet.y > window.innerHeight) {
	bullet.element.remove();
	bullets.splice(index, 1);
	}

	// 좀비와 충돌 체크
	zombies.forEach((zombie, zombieIndex) => {
	const distance = Math.hypot(bullet.x - zombie.x, bullet.y - zombie.y);
	if (distance < 20) {
	bullet.element.remove();
	zombie.element.remove();
	bullets.splice(index, 1);
	zombies.splice(zombieIndex, 1);
	score += 10;
	scoreDisplay.textContent = `Score: ${score}`;

	// 아이템 드롭
	if (Math.random() < 0.2) { // 20% 확률로 아이템 드롭
	spawnItem(zombie.x, zombie.y);
	}
	}
	});
	});
	}

	// 아이템 생성
	function spawnItem(x, y) {
	const item = document.createElement('div');
	item.className = 'item';
	document.body.appendChild(item);
	items.push({ element: item, x, y });
	}

	// 아이템 업데이트
	function updateItems() {
	items.forEach((item, index) => {
	const distanceToPlayer = Math.hypot(item.x - playerX, item.y - playerY);
	if (distanceToPlayer < 30) {
	item.element.remove();
	items.splice(index, 1);
	health = Math.min(health + 20, 100);
	healthDisplay.textContent = `Health: ${health}`;
	}
	});
	}

	// 게임 루프
	function gameLoop() {
	if (!gameRunning) return;

	updateBullets();
	updateZombies();
	updateItems();

	// 마우스를 누르고 있으면 총알 발사
	if (isShooting) {
	const currentTime = Date.now();
	if (currentTime - lastShotTime >= 1000 / bulletsPerSecond) {
	shootBullet();
	lastShotTime = currentTime;
	}
	}

	requestAnimationFrame(gameLoop);
	}

	// 게임 시간 업데이트
	function updateTimer() {
	if (!gameRunning) return;
	gameTime++;
	timerDisplay.textContent = `Time: ${gameTime}`;
	if (gameTime % 10 === 0) {
	zombieSpeedMultiplier *= 1.1;
	zombies.forEach(zombie => {
	zombie.speed = (0.5 + Math.random() * 1) * zombieSpeedMultiplier;
	});
	}
	}

	// 게임 시작
	startButton.addEventListener('click', () => {
	startScreen.style.display = 'none';
	gameRunning = true;
	health = 100;
	score = 0;
	gameTime = 0;
	zombieSpeedMultiplier = 1;
	healthDisplay.textContent = `Health: ${health}`;
	scoreDisplay.textContent = `Score: ${score}`;
	timerDisplay.textContent = `Time: ${gameTime}`;
	weaponDisplay.textContent = `Weapon: Machine Gun`;
	spawnZombie();
	setInterval(spawnZombie, 1000);
	gameLoop();
	timeInterval = setInterval(updateTimer, 1000);
	});

	// 게임 종료
	function endGame() {
	gameRunning = false;
	clearInterval(timeInterval);
	alert(`Game Over! Final Score: ${score}, Time: ${gameTime}`);
	location.reload();
	}

	// 마우스 이동
	document.addEventListener('mousemove', (e) => {
	mouseX = e.clientX;
	mouseY = e.clientY;
	});

	// 마우스 누르기 (총알 발사 시작)
	document.addEventListener('mousedown', () => {
	isShooting = true;
	});

	// 마우스 떼기 (총알 발사 중지)
	document.addEventListener('mouseup', () => {
	isShooting = false;
	});

	// 초기 플레이어 위치
	updatePlayer();
	</script>
	</body>
	</html>