Update index.html
Browse files- index.html +33 -4
index.html
CHANGED
@@ -13,7 +13,7 @@
|
|
13 |
cursor: crosshair;
|
14 |
}
|
15 |
|
16 |
-
#score, #health {
|
17 |
position: fixed;
|
18 |
color: white;
|
19 |
font-size: 20px;
|
@@ -27,6 +27,11 @@
|
|
27 |
top: 10px;
|
28 |
right: 10px;
|
29 |
}
|
|
|
|
|
|
|
|
|
|
|
30 |
|
31 |
#startScreen {
|
32 |
position: fixed;
|
@@ -87,6 +92,7 @@
|
|
87 |
</div>
|
88 |
<div id="score">Score: 0</div>
|
89 |
<div id="health">Health: 100</div>
|
|
|
90 |
<div id="player"></div>
|
91 |
|
92 |
<script>
|
@@ -95,6 +101,7 @@
|
|
95 |
const player = document.getElementById('player');
|
96 |
const scoreDisplay = document.getElementById('score');
|
97 |
const healthDisplay = document.getElementById('health');
|
|
|
98 |
|
99 |
let score = 0;
|
100 |
let health = 100;
|
@@ -104,6 +111,9 @@
|
|
104 |
let mouseX = 0, mouseY = 0;
|
105 |
let playerX = window.innerWidth / 2;
|
106 |
let playerY = window.innerHeight / 2;
|
|
|
|
|
|
|
107 |
|
108 |
// νλ μ΄μ΄ μ΄λ μ
λ°μ΄νΈ
|
109 |
function updatePlayer() {
|
@@ -137,7 +147,7 @@
|
|
137 |
}
|
138 |
|
139 |
document.body.appendChild(zombie);
|
140 |
-
zombies.push({ element: zombie, x, y, speed: 1.5 + Math.random() * 2 });
|
141 |
|
142 |
updateZombies();
|
143 |
}
|
@@ -224,23 +234,42 @@
|
|
224 |
requestAnimationFrame(gameLoop);
|
225 |
}
|
226 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
227 |
// κ²μ μμ
|
228 |
startButton.addEventListener('click', () => {
|
229 |
startScreen.style.display = 'none';
|
230 |
gameRunning = true;
|
231 |
health = 100;
|
232 |
score = 0;
|
|
|
|
|
233 |
healthDisplay.textContent = `Health: ${health}`;
|
234 |
scoreDisplay.textContent = `Score: ${score}`;
|
|
|
235 |
spawnZombie();
|
236 |
setInterval(spawnZombie, 1000);
|
237 |
gameLoop();
|
|
|
238 |
});
|
239 |
|
240 |
// κ²μ μ’
λ£
|
241 |
function endGame() {
|
242 |
gameRunning = false;
|
243 |
-
|
|
|
244 |
location.reload();
|
245 |
}
|
246 |
|
@@ -257,4 +286,4 @@
|
|
257 |
updatePlayer();
|
258 |
</script>
|
259 |
</body>
|
260 |
-
</html>
|
|
|
13 |
cursor: crosshair;
|
14 |
}
|
15 |
|
16 |
+
#score, #health, #timer {
|
17 |
position: fixed;
|
18 |
color: white;
|
19 |
font-size: 20px;
|
|
|
27 |
top: 10px;
|
28 |
right: 10px;
|
29 |
}
|
30 |
+
#timer {
|
31 |
+
top: 10px;
|
32 |
+
left: 50%;
|
33 |
+
transform: translateX(-50%);
|
34 |
+
}
|
35 |
|
36 |
#startScreen {
|
37 |
position: fixed;
|
|
|
92 |
</div>
|
93 |
<div id="score">Score: 0</div>
|
94 |
<div id="health">Health: 100</div>
|
95 |
+
<div id="timer">Time: 0</div>
|
96 |
<div id="player"></div>
|
97 |
|
98 |
<script>
|
|
|
101 |
const player = document.getElementById('player');
|
102 |
const scoreDisplay = document.getElementById('score');
|
103 |
const healthDisplay = document.getElementById('health');
|
104 |
+
const timerDisplay = document.getElementById('timer');
|
105 |
|
106 |
let score = 0;
|
107 |
let health = 100;
|
|
|
111 |
let mouseX = 0, mouseY = 0;
|
112 |
let playerX = window.innerWidth / 2;
|
113 |
let playerY = window.innerHeight / 2;
|
114 |
+
let gameTime = 0;
|
115 |
+
let zombieSpeedMultiplier = 1;
|
116 |
+
let timeInterval;
|
117 |
|
118 |
// νλ μ΄μ΄ μ΄λ μ
λ°μ΄νΈ
|
119 |
function updatePlayer() {
|
|
|
147 |
}
|
148 |
|
149 |
document.body.appendChild(zombie);
|
150 |
+
zombies.push({ element: zombie, x, y, speed: (1.5 + Math.random() * 2) * zombieSpeedMultiplier });
|
151 |
|
152 |
updateZombies();
|
153 |
}
|
|
|
234 |
requestAnimationFrame(gameLoop);
|
235 |
}
|
236 |
|
237 |
+
// κ²μ μκ° μ
λ°μ΄νΈ
|
238 |
+
function updateTimer() {
|
239 |
+
if (!gameRunning) return;
|
240 |
+
gameTime++;
|
241 |
+
timerDisplay.textContent = `Time: ${gameTime}`;
|
242 |
+
if (gameTime % 10 === 0) {
|
243 |
+
zombieSpeedMultiplier *= 2;
|
244 |
+
zombies.forEach(zombie => {
|
245 |
+
zombie.speed = (1.5 + Math.random() * 2) * zombieSpeedMultiplier;
|
246 |
+
});
|
247 |
+
}
|
248 |
+
}
|
249 |
+
|
250 |
+
|
251 |
// κ²μ μμ
|
252 |
startButton.addEventListener('click', () => {
|
253 |
startScreen.style.display = 'none';
|
254 |
gameRunning = true;
|
255 |
health = 100;
|
256 |
score = 0;
|
257 |
+
gameTime = 0;
|
258 |
+
zombieSpeedMultiplier = 1;
|
259 |
healthDisplay.textContent = `Health: ${health}`;
|
260 |
scoreDisplay.textContent = `Score: ${score}`;
|
261 |
+
timerDisplay.textContent = `Time: ${gameTime}`;
|
262 |
spawnZombie();
|
263 |
setInterval(spawnZombie, 1000);
|
264 |
gameLoop();
|
265 |
+
timeInterval = setInterval(updateTimer, 1000);
|
266 |
});
|
267 |
|
268 |
// κ²μ μ’
λ£
|
269 |
function endGame() {
|
270 |
gameRunning = false;
|
271 |
+
clearInterval(timeInterval);
|
272 |
+
alert(`Game Over! Final Score: ${score}, Time: ${gameTime}`);
|
273 |
location.reload();
|
274 |
}
|
275 |
|
|
|
286 |
updatePlayer();
|
287 |
</script>
|
288 |
</body>
|
289 |
+
</html>
|