Spaces:

yoon2566
/

game2

Running

File size: 8,997 Bytes

c3b1015

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

        #score, #health, #timer {
            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%);
        }

        #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;
        }

        .zombie {
            position: absolute;
            width: 40px;
            height: 40px;
            background: crimson;
            border-radius: 50%;
        }

        .bullet {
            position: absolute;
            width: 8px;
            height: 8px;
            background: yellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="startScreen">
        <h1>Zombie Survival</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="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');

        let score = 0;
        let health = 100;
        let gameRunning = false;
        let bullets = [];
        let zombies = [];
        let mouseX = 0, mouseY = 0;
        let playerX = window.innerWidth / 2;
        let playerY = window.innerHeight / 2;
        let gameTime = 0;
        let zombieSpeedMultiplier = 1;
        let timeInterval;

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

        // 좀비 생성
        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: (1.5 + Math.random() * 2) * 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 - 20}px`;
                zombie.element.style.top = `${zombie.y - 20}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);
            const speed = 10;

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

            document.body.appendChild(bullet);
        }

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

                bullet.element.style.left = `${bullet.x - 4}px`;
                bullet.element.style.top = `${bullet.y - 4}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}`;
                    }
                });
            });
        }

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

            updateBullets();
            updateZombies();
            requestAnimationFrame(gameLoop);
        }

        // 게임 시간 업데이트
        function updateTimer() {
            if (!gameRunning) return;
            gameTime++;
            timerDisplay.textContent = `Time: ${gameTime}`;
            if (gameTime % 10 === 0) {
                zombieSpeedMultiplier *= 2;
                zombies.forEach(zombie => {
                    zombie.speed = (1.5 + Math.random() * 2) * 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}`;
            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('click', shootBullet);

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