Hugging Face's logo

Spaces:
AMINKI
/
game1
Running

App Files Community
game1 / index.html
AMINKI's picture
AMINKI
Update index.html
6a10d1c verified
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>