Spaces:
Running
Running
| <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> | |
| <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'); | |
| 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'; | |
| 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); | |
| 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><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script> |