Update index.html
Browse files- index.html +16 -0
index.html
CHANGED
|
@@ -105,6 +105,9 @@
|
|
| 105 |
</style>
|
| 106 |
</head>
|
| 107 |
<body>
|
|
|
|
|
|
|
|
|
|
| 108 |
<div class="game">
|
| 109 |
<div class="scoreboard">Score: 0</div>
|
| 110 |
<div class="player"></div>
|
|
@@ -120,6 +123,7 @@
|
|
| 120 |
<button data-speed="3">Fast</button>
|
| 121 |
</div>
|
| 122 |
</div>
|
|
|
|
| 123 |
<script>
|
| 124 |
document.addEventListener('DOMContentLoaded', () => {
|
| 125 |
const game = document.querySelector('.game');
|
|
@@ -133,6 +137,7 @@
|
|
| 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;
|
|
@@ -155,6 +160,7 @@
|
|
| 155 |
});
|
| 156 |
|
| 157 |
function startGame() {
|
|
|
|
| 158 |
if (invaderSpeed === 1) {
|
| 159 |
invaderSpeed = 8; // Medium level
|
| 160 |
} else if (invaderSpeed === 3) {
|
|
@@ -164,6 +170,9 @@
|
|
| 164 |
document.addEventListener('keydown', movePlayer);
|
| 165 |
invaderInterval = setInterval(moveInvaders, 500);
|
| 166 |
setInterval(createInvaders, 5000); // Create new invaders every 5 seconds
|
|
|
|
|
|
|
|
|
|
| 167 |
}
|
| 168 |
|
| 169 |
function createInvaders() {
|
|
@@ -259,6 +268,9 @@
|
|
| 259 |
usernameDisplay.textContent = username;
|
| 260 |
scoreDisplay.textContent = score;
|
| 261 |
clearInterval(invaderInterval);
|
|
|
|
|
|
|
|
|
|
| 262 |
}
|
| 263 |
});
|
| 264 |
}
|
|
@@ -296,6 +308,10 @@
|
|
| 296 |
|
| 297 |
// Show start menu
|
| 298 |
startMenu.style.display = 'block';
|
|
|
|
|
|
|
|
|
|
|
|
|
| 299 |
}
|
| 300 |
});
|
| 301 |
</script>
|
|
|
|
| 105 |
</style>
|
| 106 |
</head>
|
| 107 |
<body>
|
| 108 |
+
<!-- Added audio element for background music -->
|
| 109 |
+
<audio id="backgroundMusic" src="Jupiter.mp3" loop></audio>
|
| 110 |
+
|
| 111 |
<div class="game">
|
| 112 |
<div class="scoreboard">Score: 0</div>
|
| 113 |
<div class="player"></div>
|
|
|
|
| 123 |
<button data-speed="3">Fast</button>
|
| 124 |
</div>
|
| 125 |
</div>
|
| 126 |
+
|
| 127 |
<script>
|
| 128 |
document.addEventListener('DOMContentLoaded', () => {
|
| 129 |
const game = document.querySelector('.game');
|
|
|
|
| 137 |
const usernameDisplay = document.getElementById('username-display');
|
| 138 |
const scoreDisplay = document.getElementById('score-display');
|
| 139 |
const restartButton = document.querySelector('.restart-button');
|
| 140 |
+
const backgroundMusic = document.getElementById('backgroundMusic');
|
| 141 |
|
| 142 |
const playerSpeed = 10;
|
| 143 |
let playerPosition = 280;
|
|
|
|
| 160 |
});
|
| 161 |
|
| 162 |
function startGame() {
|
| 163 |
+
// Adjust invader speed based on difficulty level
|
| 164 |
if (invaderSpeed === 1) {
|
| 165 |
invaderSpeed = 8; // Medium level
|
| 166 |
} else if (invaderSpeed === 3) {
|
|
|
|
| 170 |
document.addEventListener('keydown', movePlayer);
|
| 171 |
invaderInterval = setInterval(moveInvaders, 500);
|
| 172 |
setInterval(createInvaders, 5000); // Create new invaders every 5 seconds
|
| 173 |
+
|
| 174 |
+
// Play background music
|
| 175 |
+
backgroundMusic.play();
|
| 176 |
}
|
| 177 |
|
| 178 |
function createInvaders() {
|
|
|
|
| 268 |
usernameDisplay.textContent = username;
|
| 269 |
scoreDisplay.textContent = score;
|
| 270 |
clearInterval(invaderInterval);
|
| 271 |
+
|
| 272 |
+
// Stop background music on game over
|
| 273 |
+
backgroundMusic.pause();
|
| 274 |
}
|
| 275 |
});
|
| 276 |
}
|
|
|
|
| 308 |
|
| 309 |
// Show start menu
|
| 310 |
startMenu.style.display = 'block';
|
| 311 |
+
|
| 312 |
+
// Restart background music
|
| 313 |
+
backgroundMusic.currentTime = 0;
|
| 314 |
+
backgroundMusic.play();
|
| 315 |
}
|
| 316 |
});
|
| 317 |
</script>
|