Spaces:

yoon2566
/

game2

Running

App Files Files Community

yoon2566 commited on Jan 23, 2025

Commit

c3b1015

verified ·

1 Parent(s): 798841e

Update index.html

Browse files

Files changed (1) hide show

index.html +289 -19

index.html CHANGED Viewed

@@ -1,19 +1,289 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>