diff --git a/index.html b/index.html
index 31dd3b7..219ef64 100644
--- a/index.html
+++ b/index.html
@@ -179,14 +179,38 @@
// Start game
function startGame() {
gameState = STATES.LOADING;
+ loadingProgress = 0;
document.getElementById('welcome').classList.add('hidden');
document.getElementById('loading').classList.remove('hidden');
- // Start met een korte vertraging om de engine tijd te geven
- setTimeout(() => {
- document.getElementById('loading').classList.add('hidden');
- document.getElementById('gameCanvas').classList.remove('hidden');
- gameState = STATES.PLAYING;
- }, 1000); // 1 seconde loading screen
+ startLoadingProgress();
+ }
+
+ function startLoadingProgress() {
+ const progressElement = document.getElementById('progress');
+ const updateProgress = () => {
+ if (loadingProgress < 100 && gameState === STATES.LOADING) {
+ // Verhoog met een random getal tussen 1 en 5
+ loadingProgress += Math.floor(Math.random() * 5) + 1;
+ if (loadingProgress > 100) loadingProgress = 100;
+
+ // Update de tekst
+ progressElement.textContent = `${loadingProgress}%`;
+
+ if (loadingProgress >= 100) {
+ // Als we klaar zijn, wacht even en ga naar het game scherm
+ setTimeout(() => {
+ document.getElementById('loading').classList.add('hidden');
+ document.getElementById('gameCanvas').classList.remove('hidden');
+ gameState = STATES.PLAYING;
+ }, 500);
+ } else {
+ // Random vertraging tussen updates (tussen 50 en 200ms)
+ const delay = Math.floor(Math.random() * 150) + 50;
+ setTimeout(updateProgress, delay);
+ }
+ }
+ };
+ updateProgress();
}
function pauseGame() {