<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kliker Race Mini Game</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Inline Custom Styling */
body {
background-color: #f8f9fa; /* Light background */
}
#clickButton {
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
/* Animatie wanneer de knop geklikt wordt */
#clickButton:active {
transform: scale(0.98);
box-shadow: 0 4px 0 #198754; /* Shadow effect when pressed */
transform: translateY(2px);
}
</style>
</head>
<body>
<div class="container mt-5">
<!-- Game Interface (duplicaat voor de standalone functionaliteit) -->
<div class="card shadow p-4 text-center border-primary">
<h1 class="mb-3 text-primary">💥 Reactieklikker 2024!</h1>
<div class="row align-items-center mb-4">
<div class="col-md-6">
<p class="h5 mb-0 text-muted">Tijd over:</p>
<h1 id="timerDisplay" class="display-2 fw-bold text-primary">10s</h1>
</div>
<div class="col-md-6">
<p class="h5 mb-0 text-muted">Je Score:</p>
<h1 id="scoreDisplay" class="display-2 fw-bold text-success">0</h1>
</div>
</div>
<!-- Game Button Area -->
<div class="mb-4">
<button
id="startButton"
class="btn btn-lg btn-danger w-100 mb-3"
onclick="startGame()"
>
▶️ Start het Spel! (Klik hier)
</button>
<button
id="clickButton"
class="btn btn-lg btn-success w-100 d-none"
onclick="handleGameClick()"
>
KLIK HIER! ✨ (Sneller dan de concurrent!)
</button>
</div>
<!-- Game Status/Result -->
<div class="p-3 bg-light rounded border">
<p id="statusMessage" class="lead text-secondary mb-0"></p>
</div>
</div>
</div>
<!-- JavaScript Logica -->
<script>
// Variabelen setup
let score = 0;
let timeRemaining = 10; // Spelduur in seconden
let gameActive = false;
let timerInterval;
// Element references
const scoreDisplay = document.getElementById('scoreDisplay');
const timerDisplay = document.getElementById('timerDisplay');
const statusMessage = document.getElementById('statusMessage');
const startButton = document.getElementById('startButton');
const clickButton = document.getElementById('clickButton');
// Functie om de klok bij te werken
function updateTimer() {
timeRemaining--;
timerDisplay.textContent = `${timeRemaining}s`;
if (timeRemaining <= 0) {
clearInterval(timerInterval);
endGame();
}
}
// Functie om de spelstatus te resetten en te starten
function startGame() {
// Reset variabelen
score = 0;
timeRemaining = 10;
gameActive = true;
// UI update
scoreDisplay.textContent = score;
timerDisplay.textContent = `${timeRemaining}s`;
statusMessage.textContent = "Klaar... Ga ervoor! Klik zo snel mogelijk!";
startButton.classList.add('d-none'); // Verberg startknop
clickButton.classList.remove('d-none'); // Toon klikknop
// Start de timer (updateTimer wordt elke 1000ms = 1 seconde aangeroepen)
timerInterval = setInterval(updateTimer, 1000);
}
// Functie die wordt uitgevoerd bij een klik op de groene knop
function handleGameClick() {
if (gameActive) {
score++; // Verhoog score
scoreDisplay.textContent = score;
} else if (timeRemaining === 0 && !gameActive) {
// Dit gebeurt als je na het einde nog een laatste keer klikt
statusMessage.textContent = `Spel afgelopen! Je eindscore is ${score}. Probeer het opnieuw!`;
}
}
// Functie die wordt uitgevoerd wanneer de tijd om is
function endGame() {
gameActive = false;
timerDisplay.textContent = "0s";
clickButton.classList.add('d-none'); // Verberg klikknop
startButton.classList.remove('d-none'); // Toon startknop weer
// Finale melding en feedback
let message = `🎉 Tijd op! Je hebt ${score} clicks gehaald!`;
if (score < 5) {
message += " Oefenen is de sleutel!";
} else if (score >= 20) {
message += " 🔥 Absoluut supersnel, goed zo!";
}
statusMessage.textContent = message;
}
</script>
</body>
</html>