Car Game Circuit

Laps: 0 | Tijd: 0.00s | Beste lap: --

◀

▲

▼

▶

finishW: 100, finishH: 40 }; let lastCarY = car.y; let wasOverFinish = false; let lapCount = 0; let bestLap = null; // Timer per lap (OMHOOG) let lapStartTime = performance.now(); let lastFrameTime = performance.now(); let rewardIndex = 1; function drawTrack() { ctx.strokeStyle = "white"; ctx.lineWidth = 4; ctx.strokeRect(track.left, track.top, track.right - track.left, track.bottom - track.top); ctx.fillStyle = "yellow"; ctx.fillRect(track.finishX, track.finishY, track.finishW, track.finishH); } function drawCar() { ctx.drawImage(carImg, car.x, car.y, car.w, car.h); } function moveCar() { lastCarY = car.y; if (keys.up) car.y -= car.speed; if (keys.down) car.y += car.speed; if (keys.left) car.x -= car.speed; if (keys.right) car.x += car.speed; if (car.x < track.left) car.x = track.left; if (car.x + car.w > track.right) car.x = track.right - car.w; if (car.y < track.top) car.y = track.top; if (car.y + car.h > track.bottom) car.y = track.bottom - car.h; } function updateLapTimer() { const now = performance.now(); const lapTime = (now - lapStartTime) / 1000; document.getElementById("lapTime").textContent = lapTime.toFixed(2); } function resetCarPosition() { car.x = 330; car.y = 300; } function checkLap() { const carTop = car.y; const carBottom = car.y + car.h; const carCenterX = car.x + car.w / 2; const finishTop = track.finishY; const finishBottom = track.finishY + track.finishH; // Auto raakt de gele zone (maakt niet uit van welke kant) const isOverFinish = carCenterX > track.finishX && carCenterX < track.finishX + track.finishW && carBottom >= finishTop && carTop <= finishBottom; // Alleen tellen als we net IN de zone komen (edge detect) if (!wasOverFinish && isOverFinish) { // geluid lapSound.play(); // tijd van deze lap const now = performance.now(); const lapTime = (now - lapStartTime) / 1000; // lap omhoog lapCount++; document.getElementById("lapCount").textContent = lapCount; // beste lap if (bestLap === null || lapTime < bestLap) { bestLap = lapTime; document.getElementById("bestLap").textContent = lapTime.toFixed(2); } // nieuwe lap starten lapStartTime = performance.now(); // auto terug (als jij dat wilt) resetCarPosition(); // reward tonen showReward(); } wasOverFinish = isOverFinish; } function gameLoop() { const now = performance.now(); const deltaSeconds = (now - lastFrameTime) / 1000; lastFrameTime = now; ctx.clearRect(0, 0, canvas.width, canvas.height); drawTrack(); moveCar(); drawCar(); updateLapTimer(); checkLap(); requestAnimationFrame(gameLoop); } gameLoop(); // Keyboard window.addEventListener("keydown", e => { if (e.key === "ArrowUp") keys.up = true; if (e.key === "ArrowDown") keys.down = true; if (e.key === "ArrowLeft") keys.left = true; if (e.key === "ArrowRight") keys.right = true; }); window.addEventListener("keyup", e => { if (e.key === "ArrowUp") keys.up = false; if (e.key === "ArrowDown") keys.down = false; if (e.key === "ArrowLeft") keys.left = false; if (e.key === "ArrowRight") keys.right = false; }); // Touch document.querySelectorAll(".btn").forEach(btn => { const dir = btn.dataset.dir; btn.addEventListener("touchstart", e => { e.preventDefault(); keys[dir] = true; }); btn.addEventListener("touchend", e => { e.preventDefault(); keys[dir] = false; }); }); // Rewards function showReward() { document.getElementById("rewardImg").src = "reward" + rewardIndex + ".jpg"; document.getElementById("rewardOverlay").style.display = "flex"; rewardIndex++; if (rewardIndex > 5) rewardIndex = 1; } function nextReward() { document.getElementById("rewardOverlay").style.display = "none"; }