Hugging Face's logo

Spaces:
kolaslab
/
zombie-game
Running

App Files Community
2
kolaslab commited on
Commit
027d025
·
verified ·
1 Parent(s): 83e177d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +40 -5
index.html CHANGED
@@ -7,9 +7,23 @@
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
- background: #333;
 
11
  font-family: Arial, sans-serif;
12
  cursor: crosshair;
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
14
 
15
  #score {
@@ -113,9 +127,10 @@
113
  position: absolute;
114
  width: 40px;
115
  height: 40px;
116
- background: #8B0000;
117
- border-radius: 50%;
118
  z-index: 80;
 
119
  }
120
 
121
  .explosion {
@@ -157,6 +172,9 @@
157
  </style>
158
  </head>
159
  <body>
 
 
 
160
  <div id="startScreen">
161
  <h1 id="gameTitle">ZOMBIE SURVIVAL</h1>
162
  <button id="startButton">START GAME</button>
@@ -176,6 +194,8 @@
176
  const scoreElement = document.getElementById('score');
177
  const healthElement = document.getElementById('health');
178
  const gameOverElement = document.getElementById('gameOver');
 
 
179
 
180
  let score = 0;
181
  let health = 100;
@@ -187,6 +207,16 @@
187
  let playerX = window.innerWidth / 2;
188
  let playerY = window.innerHeight / 2;
189
  let zombieSpawnInterval;
 
 
 
 
 
 
 
 
 
 
190
 
191
  function startGame() {
192
  startScreen.style.display = 'none';
@@ -197,6 +227,8 @@
197
  healthElement.textContent = `Health: ${health}`;
198
  gameOverElement.style.display = 'none';
199
 
 
 
200
  zombies.forEach(zombie => zombie.element.remove());
201
  zombies = [];
202
  bullets.forEach(bullet => bullet.element.remove());
@@ -271,6 +303,7 @@
271
  };
272
 
273
  createMuzzleFlash();
 
274
 
275
  document.body.appendChild(bullet);
276
  bullets.push({
@@ -313,6 +346,7 @@
313
  zombie.y += Math.sin(angle) * zombie.speed;
314
  zombie.element.style.left = `${zombie.x - 20}px`;
315
  zombie.element.style.top = `${zombie.y - 20}px`;
 
316
 
317
  const distToPlayer = Math.hypot(playerX - zombie.x, playerY - zombie.y);
318
  if (distToPlayer < 40) {
@@ -342,6 +376,8 @@
342
  gameRunning = false;
343
  gameOverElement.style.display = 'block';
344
  clearInterval(zombieSpawnInterval);
 
 
345
  setTimeout(() => {
346
  startScreen.style.display = 'flex';
347
  }, 2000);
@@ -356,8 +392,7 @@
356
  document.addEventListener('mousedown', shoot);
357
  startButton.addEventListener('click', startGame);
358
 
359
- // Initial setup
360
  updatePlayer();
361
  </script>
362
  </body>
363
- </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>
 
7
  body {
8
  margin: 0;
9
  overflow: hidden;
10
+ background: url('back1.webp') repeat;
11
+ background-size: auto;
12
  font-family: Arial, sans-serif;
13
  cursor: crosshair;
14
+ image-rendering: pixelated;
15
+ }
16
+
17
+ body::before {
18
+ content: '';
19
+ position: fixed;
20
+ top: 0;
21
+ left: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ background: rgba(0, 0, 0, 0.3);
25
+ pointer-events: none;
26
+ z-index: 1;
27
  }
28
 
29
  #score {
 
127
  position: absolute;
128
  width: 40px;
129
  height: 40px;
130
+ background: url('zom1.webp') no-repeat center center;
131
+ background-size: cover;
132
  z-index: 80;
133
+ transform-origin: center;
134
  }
135
 
136
  .explosion {
 
172
  </style>
173
  </head>
174
  <body>
175
+ <audio id="bgMusic" src="soundz.wav" loop></audio>
176
+ <audio id="gunSound" src="soundgun.wav"></audio>
177
+
178
  <div id="startScreen">
179
  <h1 id="gameTitle">ZOMBIE SURVIVAL</h1>
180
  <button id="startButton">START GAME</button>
 
194
  const scoreElement = document.getElementById('score');
195
  const healthElement = document.getElementById('health');
196
  const gameOverElement = document.getElementById('gameOver');
197
+ const bgMusic = document.getElementById('bgMusic');
198
+ const gunSound = document.getElementById('gunSound');
199
 
200
  let score = 0;
201
  let health = 100;
 
207
  let playerX = window.innerWidth / 2;
208
  let playerY = window.innerHeight / 2;
209
  let zombieSpawnInterval;
210
+ let lastShotTime = 0;
211
+ const shotCooldown = 100;
212
+ function playGunSound() {
213
+ const currentTime = Date.now();
214
+ if (currentTime - lastShotTime >= shotCooldown) {
215
+ gunSound.currentTime = 0;
216
+ gunSound.play();
217
+ lastShotTime = currentTime;
218
+ }
219
+ }
220
 
221
  function startGame() {
222
  startScreen.style.display = 'none';
 
227
  healthElement.textContent = `Health: ${health}`;
228
  gameOverElement.style.display = 'none';
229
 
230
+ bgMusic.play();
231
+
232
  zombies.forEach(zombie => zombie.element.remove());
233
  zombies = [];
234
  bullets.forEach(bullet => bullet.element.remove());
 
303
  };
304
 
305
  createMuzzleFlash();
306
+ playGunSound();
307
 
308
  document.body.appendChild(bullet);
309
  bullets.push({
 
346
  zombie.y += Math.sin(angle) * zombie.speed;
347
  zombie.element.style.left = `${zombie.x - 20}px`;
348
  zombie.element.style.top = `${zombie.y - 20}px`;
349
+ zombie.element.style.transform = `rotate(${angle}rad)`; // 좀비 회전
350
 
351
  const distToPlayer = Math.hypot(playerX - zombie.x, playerY - zombie.y);
352
  if (distToPlayer < 40) {
 
376
  gameRunning = false;
377
  gameOverElement.style.display = 'block';
378
  clearInterval(zombieSpawnInterval);
379
+ bgMusic.pause();
380
+ bgMusic.currentTime = 0;
381
  setTimeout(() => {
382
  startScreen.style.display = 'flex';
383
  }, 2000);
 
392
  document.addEventListener('mousedown', shoot);
393
  startButton.addEventListener('click', startGame);
394
 
 
395
  updatePlayer();
396
  </script>
397
  </body>
398
+ </html>