zombie-game-test

Running

App Files Files Community

openfree commited on Dec 7, 2024

Commit

f5e5fa2

verified ·

1 Parent(s): 13219b7

Create index-backup1.html

Browse files

Files changed (1) hide show

index-backup1.html +371 -0

index-backup1.html ADDED Viewed

	@@ -0,0 +1,371 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Zombie Survival</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #333;
+            font-family: Arial, sans-serif;
+            cursor: crosshair;
+        }
+        #score {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            color: #fff;
+            font-size: 24px;
+            z-index: 100;
+        }
+        #health {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            color: #f00;
+            font-size: 24px;
+            z-index: 100;
+        }
+        #startScreen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        #startButton {
+            padding: 15px 40px;
+            font-size: 24px;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        #startButton:hover {
+            transform: scale(1.1);
+        }
+        #gameTitle {
+            color: #fff;
+            font-size: 48px;
+            margin-bottom: 30px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        }
+        #gameOver {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #f00;
+            font-size: 48px;
+            display: none;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+            z-index: 100;
+        }
+        .bullet {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: #ffd700;
+            border-radius: 50%;
+            z-index: 50;
+            box-shadow: 0 0 10px #ffd700;
+        }
+        #player {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: #0f0;
+            border-radius: 50%;
+            transform-origin: center;
+            z-index: 90;
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+        }
+        #playerGun {
+            position: absolute;
+            width: 20px;
+            height: 8px;
+            background: #666;
+            top: 50%;
+            right: -15px;
+            transform: translateY(-50%);
+        }
+        .zombie {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: #8B0000;
+            border-radius: 50%;
+            z-index: 80;
+        }
+        .explosion {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            animation: explode 0.5s ease-out forwards;
+            z-index: 85;
+        }
+        @keyframes explode {
+            0% {
+                transform: scale(1);
+                background: #ff4500;
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                background: #ff0000;
+                opacity: 0;
+            }
+        }
+        .muzzleFlash {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #ffd700;
+            border-radius: 50%;
+            opacity: 0;
+            animation: flash 0.1s ease-out;
+        }
+        @keyframes flash {
+            0% { opacity: 1; transform: scale(1); }
+            100% { opacity: 0; transform: scale(2); }
+        }
+    </style>
+</head>
+<body>
+    <audio id="bgMusic" src="soundz.wav" loop></audio>
+    <div id="startScreen">
+        <h1 id="gameTitle">ZOMBIE SURVIVAL</h1>
+        <button id="startButton">START GAME</button>
+    </div>
+    <div id="score">Score: 0</div>
+    <div id="health">Health: 100</div>
+    <div id="gameOver">GAME OVER</div>
+    <div id="player">
+        <div id="playerGun"></div>
+    </div>
+    <script>
+        const startScreen = document.getElementById('startScreen');
+        const startButton = document.getElementById('startButton');
+        const player = document.getElementById('player');
+        const scoreElement = document.getElementById('score');
+        const healthElement = document.getElementById('health');
+        const gameOverElement = document.getElementById('gameOver');
+        const bgMusic = document.getElementById('bgMusic');
+        let score = 0;
+        let health = 100;
+        let zombies = [];
+        let bullets = [];
+        let gameRunning = false;
+        let mouseX = 0;
+        let mouseY = 0;
+        let playerX = window.innerWidth / 2;
+        let playerY = window.innerHeight / 2;
+        let zombieSpawnInterval;
+        function startGame() {
+            startScreen.style.display = 'none';
+            gameRunning = true;
+            score = 0;
+            health = 100;
+            scoreElement.textContent = `Score: ${score}`;
+            healthElement.textContent = `Health: ${health}`;
+            gameOverElement.style.display = 'none';
+            // Start background music
+            bgMusic.play();
+            zombies.forEach(zombie => zombie.element.remove());
+            zombies = [];
+            bullets.forEach(bullet => bullet.element.remove());
+            bullets = [];
+            playerX = window.innerWidth / 2;
+            playerY = window.innerHeight / 2;
+            updatePlayer();
+            zombieSpawnInterval = setInterval(createZombie, 1000);
+            requestAnimationFrame(gameLoop);
+        }
+        function updatePlayer() {
+            player.style.left = `${playerX - 20}px`;
+            player.style.top = `${playerY - 20}px`;
+            const angle = Math.atan2(mouseY - playerY, mouseX - playerX);
+            player.style.transform = `rotate(${angle}rad)`;
+        }
+        function createZombie() {
+            if (!gameRunning) return;
+            const zombie = document.createElement('div');
+            zombie.className = 'zombie';
+            const side = Math.floor(Math.random() * 4);
+            let x, y;
+            switch(side) {
+                case 0: x = Math.random() * window.innerWidth; y = -40; break;
+                case 1: x = window.innerWidth + 40; y = Math.random() * window.innerHeight; break;
+                case 2: x = Math.random() * window.innerWidth; y = window.innerHeight + 40; break;
+                case 3: x = -40; y = Math.random() * window.innerHeight; break;
+            }
+            document.body.appendChild(zombie);
+            zombies.push({
+                element: zombie,
+                x: x,
+                y: y,
+                speed: 2 + Math.random()
+            });
+        }
+        function createMuzzleFlash() {
+            const flash = document.createElement('div');
+            flash.className = 'muzzleFlash';
+            const angle = Math.atan2(mouseY - playerY, mouseX - playerX);
+            const distance = 30;
+            const flashX = playerX + Math.cos(angle) * distance;
+            const flashY = playerY + Math.sin(angle) * distance;
+            flash.style.left = `${flashX - 10}px`;
+            flash.style.top = `${flashY - 10}px`;
+            document.body.appendChild(flash);
+            setTimeout(() => flash.remove(), 100);
+        }
+        function shoot(e) {
+            if (!gameRunning || e.button !== 0) return;
+            const bullet = document.createElement('div');
+            bullet.className = 'bullet';
+            const angle = Math.atan2(mouseY - playerY, mouseX - playerX);
+            const velocity = {
+                x: Math.cos(angle) * 15,
+                y: Math.sin(angle) * 15
+            };
+            createMuzzleFlash();
+            document.body.appendChild(bullet);
+            bullets.push({
+                element: bullet,
+                x: playerX,
+                y: playerY,
+                velocity: velocity
+            });
+        }
+        function createExplosion(x, y) {
+            const explosion = document.createElement('div');
+            explosion.className = 'explosion';
+            explosion.style.left = `${x - 20}px`;
+            explosion.style.top = `${y - 20}px`;
+            document.body.appendChild(explosion);
+            setTimeout(() => explosion.remove(), 500);
+        }
+        function gameLoop() {
+            if (!gameRunning) return;
+            bullets.forEach((bullet, bulletIndex) => {
+                bullet.x += bullet.velocity.x;
+                bullet.y += bullet.velocity.y;
+                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(bulletIndex, 1);
+                }
+            });
+            zombies.forEach((zombie, zombieIndex) => {
+                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 distToPlayer = Math.hypot(playerX - zombie.x, playerY - zombie.y);
+                if (distToPlayer < 40) {
+                    health -= 1;
+                    healthElement.textContent = `Health: ${health}`;
+                    if (health <= 0) gameOver();
+                }
+                bullets.forEach((bullet, bulletIndex) => {
+                    const distToBullet = Math.hypot(bullet.x - zombie.x, bullet.y - zombie.y);
+                    if (distToBullet < 30) {
+                        createExplosion(zombie.x, zombie.y);
+                        zombie.element.remove();
+                        bullet.element.remove();
+                        zombies.splice(zombieIndex, 1);
+                        bullets.splice(bulletIndex, 1);
+                        score += 10;
+                        scoreElement.textContent = `Score: ${score}`;
+                    }
+                });
+            });
+            requestAnimationFrame(gameLoop);
+        }
+        function gameOver() {
+            gameRunning = false;
+            gameOverElement.style.display = 'block';
+            clearInterval(zombieSpawnInterval);
+            bgMusic.pause();
+            bgMusic.currentTime = 0;
+            setTimeout(() => {
+                startScreen.style.display = 'flex';
+            }, 2000);
+        }
+        document.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            if (gameRunning) updatePlayer();
+        });
+        document.addEventListener('mousedown', shoot);
+        startButton.addEventListener('click', startGame);
+        // Initial setup
+        updatePlayer();
+    </script>
+</body>
+</html>