body { margin: 0; font-family: Arial, sans-serif; } #gameCanvas { background: url('https://nssvaeolus.nl/wp-content/uploads/2024/08/8-bit-graphics-pixels-scene-with-ocean-waves-scaled.jpg') repeat-x bottom; background-size: cover; display: block; margin: 0 auto; position: relative; overflow: hidden; height: 40vh; } #windsurfer { width: 100px; height: 100px; position: absolute; top: 50%; /* Center vertically */ left: 50px; transform: translateY(-50%); /* Adjust to center the windsurfer */ background-image: url('https://nssvaeolus.nl/wp-content/uploads/2024/08/surfer.png'); background-size: cover; } .wave { width: 60px; height: 60px; position: absolute; top: 50%; /* Center vertically */ transform: translateY(-50%); /* Adjust to center the wave */ background-image: url('https://nssvaeolus.nl/wp-content/uploads/2024/08/wave.png'); background-size: cover; } #menu { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 24px; text-align: center; z-index: 10; } #score { position: absolute; top: 20px; right: 20px; color: white; font-size: 18px; } const windsurfer = document.getElementById('windsurfer'); const gameCanvas = document.getElementById('gameCanvas'); const menu = document.getElementById('menu'); const menuContent = document.getElementById('menuContent'); const scoreDisplay = document.getElementById('score'); let isJumping = false; let jumpHeight = 120; // Adjust the jump height let gameSpeed = 5; let waveInterval = 2500; let score = 0; let gameStarted = false; let waves = []; let gameInterval; let backgroundPosition = 0; let waveTimer; let baseSpeed = gameSpeed; // Store the initial speed to calculate the increase function startGame() { menu.style.display = 'none'; gameStarted = true; score = 0; scoreDisplay.textContent = `Score: ${score}`; gameInterval = setInterval(() => { moveBackground(); moveWaves(); adjustDifficulty(); }, 20); waveTimer = setInterval(createWave, waveInterval); } function adjustDifficulty() { // Increase game speed by 10% every 10 points if (score > 0 && score % 10 === 0) { gameSpeed = baseSpeed * (1 + score / 100); // Increase speed by 10% for every 10 points clearInterval(waveTimer); waveInterval = Math.max(1000, waveInterval - 100); // Decrease wave interval but ensure it stays above 1000ms waveTimer = setInterval(createWave, waveInterval); } } function jump() { if (isJumping) return; isJumping = true; let position = 0; const upInterval = setInterval(() => { if (position >= jumpHeight) { clearInterval(upInterval); const downInterval = setInterval(() => { if (position { const wavePosition = wave.offsetLeft; if (!gameStarted) return; const windsurferRect = windsurfer.getBoundingClientRect(); const waveRect = wave.getBoundingClientRect(); if (wavePosition w !== wave); score++; scoreDisplay.textContent = `Score: ${score}`; } else if ( waveRect.left windsurferRect.left && waveRect.top windsurferRect.top && !isJumping ) { endGame(); } else { wave.style.left = `${wavePosition - gameSpeed}px`; } }); } function moveBackground() { backgroundPosition -= gameSpeed; gameCanvas.style.backgroundPositionX = `${backgroundPosition}px`; } function endGame() { gameStarted = false; clearInterval(gameInterval); clearInterval(waveTimer); menuContent.innerHTML = `

Game Over!
Your Score: ${score}
Press Space or click to Restart

`; menu.style.display = 'flex'; } document.addEventListener('keydown', function(event) { if (event.code === 'Space') { event.preventDefault(); if (!gameStarted) { waves.forEach(wave => wave.remove()); // Remove all remaining waves waves = []; gameSpeed = baseSpeed; // Reset game speed waveInterval = 2500; // Reset wave interval startGame(); } else { jump(); } } }); document.addEventListener('click', function(event) { if (!gameStarted) { waves.forEach(wave => wave.remove()); // Remove all remaining waves waves = []; gameSpeed = baseSpeed; // Reset game speed waveInterval = 2500; // Reset wave interval startGame(); } else { jump(); } ; // Call the jump function on click/tap });