Update index.html
Browse files- index.html +53 -0
index.html
CHANGED
|
@@ -87,6 +87,21 @@
|
|
| 87 |
text-align: center;
|
| 88 |
display: none;
|
| 89 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 90 |
</style>
|
| 91 |
</head>
|
| 92 |
<body>
|
|
@@ -95,6 +110,7 @@
|
|
| 95 |
<div class="player"></div>
|
| 96 |
<div class="invaders"></div>
|
| 97 |
<div class="game-over-message">Game Over, <span id="username-display"></span>! Your score is: <span id="score-display"></span></div>
|
|
|
|
| 98 |
<div class="start-menu">
|
| 99 |
<h2>Enter Your Name</h2>
|
| 100 |
<input type="text" id="username" placeholder="Your name">
|
|
@@ -116,6 +132,7 @@
|
|
| 116 |
const gameOverMessage = document.querySelector('.game-over-message');
|
| 117 |
const usernameDisplay = document.getElementById('username-display');
|
| 118 |
const scoreDisplay = document.getElementById('score-display');
|
|
|
|
| 119 |
|
| 120 |
const playerSpeed = 10;
|
| 121 |
let playerPosition = 280;
|
|
@@ -238,12 +255,48 @@
|
|
| 238 |
const invaderBottom = parseInt(invader.style.top.replace('px', '')) + invader.offsetHeight;
|
| 239 |
if (invaderBottom >= game.offsetHeight) {
|
| 240 |
gameOverMessage.style.display = 'block';
|
|
|
|
| 241 |
usernameDisplay.textContent = username;
|
| 242 |
scoreDisplay.textContent = score;
|
| 243 |
clearInterval(invaderInterval);
|
| 244 |
}
|
| 245 |
});
|
| 246 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 247 |
});
|
| 248 |
</script>
|
| 249 |
</body>
|
|
|
|
| 87 |
text-align: center;
|
| 88 |
display: none;
|
| 89 |
}
|
| 90 |
+
|
| 91 |
+
.restart-button {
|
| 92 |
+
position: absolute;
|
| 93 |
+
top: 60%;
|
| 94 |
+
left: 50%;
|
| 95 |
+
transform: translate(-50%, -50%);
|
| 96 |
+
font-size: 24px;
|
| 97 |
+
text-align: center;
|
| 98 |
+
display: none;
|
| 99 |
+
padding: 10px 20px;
|
| 100 |
+
background-color: #333;
|
| 101 |
+
color: white;
|
| 102 |
+
border: none;
|
| 103 |
+
cursor: pointer;
|
| 104 |
+
}
|
| 105 |
</style>
|
| 106 |
</head>
|
| 107 |
<body>
|
|
|
|
| 110 |
<div class="player"></div>
|
| 111 |
<div class="invaders"></div>
|
| 112 |
<div class="game-over-message">Game Over, <span id="username-display"></span>! Your score is: <span id="score-display"></span></div>
|
| 113 |
+
<button class="restart-button">Restart</button>
|
| 114 |
<div class="start-menu">
|
| 115 |
<h2>Enter Your Name</h2>
|
| 116 |
<input type="text" id="username" placeholder="Your name">
|
|
|
|
| 132 |
const gameOverMessage = document.querySelector('.game-over-message');
|
| 133 |
const usernameDisplay = document.getElementById('username-display');
|
| 134 |
const scoreDisplay = document.getElementById('score-display');
|
| 135 |
+
const restartButton = document.querySelector('.restart-button');
|
| 136 |
|
| 137 |
const playerSpeed = 10;
|
| 138 |
let playerPosition = 280;
|
|
|
|
| 255 |
const invaderBottom = parseInt(invader.style.top.replace('px', '')) + invader.offsetHeight;
|
| 256 |
if (invaderBottom >= game.offsetHeight) {
|
| 257 |
gameOverMessage.style.display = 'block';
|
| 258 |
+
restartButton.style.display = 'block';
|
| 259 |
usernameDisplay.textContent = username;
|
| 260 |
scoreDisplay.textContent = score;
|
| 261 |
clearInterval(invaderInterval);
|
| 262 |
}
|
| 263 |
});
|
| 264 |
}
|
| 265 |
+
|
| 266 |
+
// Add event listener to restart button
|
| 267 |
+
restartButton.addEventListener('click', () => {
|
| 268 |
+
restartGame();
|
| 269 |
+
});
|
| 270 |
+
|
| 271 |
+
// Function to restart the game
|
| 272 |
+
function restartGame() {
|
| 273 |
+
// Reset game variables
|
| 274 |
+
playerPosition = 280;
|
| 275 |
+
score = 0;
|
| 276 |
+
invaderSpeed = 2;
|
| 277 |
+
username = '';
|
| 278 |
+
|
| 279 |
+
// Hide game over message and restart button
|
| 280 |
+
gameOverMessage.style.display = 'none';
|
| 281 |
+
restartButton.style.display = 'none';
|
| 282 |
+
|
| 283 |
+
// Reset player position
|
| 284 |
+
player.style.left = playerPosition + 'px';
|
| 285 |
+
|
| 286 |
+
// Reset scoreboard
|
| 287 |
+
scoreboard.textContent = `Score: ${score}`;
|
| 288 |
+
|
| 289 |
+
// Remove all invaders and bullets
|
| 290 |
+
document.querySelectorAll('.invader').forEach(invader => {
|
| 291 |
+
invader.remove();
|
| 292 |
+
});
|
| 293 |
+
document.querySelectorAll('.bullet').forEach(bullet => {
|
| 294 |
+
bullet.remove();
|
| 295 |
+
});
|
| 296 |
+
|
| 297 |
+
// Show start menu
|
| 298 |
+
startMenu.style.display = 'block';
|
| 299 |
+
}
|
| 300 |
});
|
| 301 |
</script>
|
| 302 |
</body>
|