Reageer Sneller dan Je Vrienden! ⚡

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reactie-Race ⚡</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.game-container {
background: white;
border-radius: 20px;
padding: 30px;
max-width: 520px;
width: 100%;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
text-align: center;
}
h1 { color: #4a3f8a; margin-bottom: 5px; font-size: 1.6em; }
.subtitle { color: #777; margin-bottom: 20px; font-size: 0.95em; }
.round-info {
font-size: 1.1em;
color: #4a3f8a;
margin-bottom: 15px;
font-weight: bold;
}
#reaction-box {
width: 100%;
height: 220px;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.4em;
font-weight: bold;
color: white;
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease, transform 0.1s ease;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
#reaction-box:active { transform: scale(0.97); }
.state-waiting { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.state-warning { background: linear-gradient(135deg, #f39c12, #e67e22); animation: pulse 0.4s infinite alternate; }
.state-ready { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.state-result { background: linear-gradient(135deg, #3498db, #2980b9); }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.7; } }
#message { font-size: 1em; color: #555; margin-bottom: 15px; min-height: 24px; }
.btn-start, .btn-restart {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 14px 36px;
font-size: 1.1em;
border-radius: 50px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(102,126,234,0.4);
}
.btn-start:hover, .btn-restart:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.6); }
.btn-start:active, .btn-restart:active { transform: translateY(0); }
.results { display: none; margin-top: 15px; }
.result-row {
display: flex;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid #eee;
font-size: 0.95em;
}
.result-row:last-child { border-bottom: none; font-weight: bold; color: #4a3f8a; }
.verdict {
margin-top: 15px;
padding: 12px;
border-radius: 12px;
font-size: 1.05em;
}
.badge-emoji { font-size: 2em; display: block; margin-bottom: 5px; }
.score-display {
display: flex;
justify-content: space-around;
margin-top: 10px;
gap: 8px;
}
.score-item {
background: #f0edff;
border-radius: 12px;
padding: 10px;
flex: 1;
font-size: 0.85em;
}
.score-item .num { font-size: 1.4em; font-weight: bold; color: #4a3f8a; display: block; }
</style>
</head>
<body>
<div class="game-container">
<h1>⚡ Reactie-Race</h1>
<p class="subtitle">Wacht op groen en klik dan zo snel mogelijk!</p>
<div id="round-info" class="round-info"></div>
<div id="reaction-box" class="state-waiting">
<span id="box-text">Klaar om te beginnen?</span>
</div>
<p id="message"></p>
<div id="score-area" style="display:none;">
<div class="score-display">
<div class="score-item"><span class="num" id="best-time">-</span>Beste tijd</div>
<div class="score-item"><span class="num" id="avg-time">-</span>Gemiddeld</div>
<div class="score-item"><span class="num" id="rounds-done">0/3</span>Rondes</div>
</div>
</div>
<button id="start-btn" class="btn-start" onclick="startGame()">🎮 Start het spel!</button>
<div id="results" class="results">
<h2 style="color:#4a3f8a; margin-bottom:10px;">🏆 Eindresultaat</h2>
<div id="result-details"></div>
<div id="verdict" class="verdict"></div>
<button class="btn-restart" onclick="resetGame()" style="margin-top:15px;">🔄 Opnieuw spelen</button>
</div>
</div>
<script>
var state = 'idle'; // idle, waiting, warning, ready, result, finished
var currentRound = 0;
var totalRounds = 3;
var reactionTimes = [];
var startTime = 0;
var timerId = null;
var boxEl = document.getElementById('reaction-box');
var boxTextEl = document.getElementById('box-text');
var messageEl = document.getElementById('message');
var roundInfoEl = document.getElementById('round-info');
var startBtnEl = document.getElementById('start-btn');
var resultsEl = document.getElementById('results');
var scoreAreaEl = document.getElementById('score-area');
function setBoxState(cls) {
boxEl.className = cls;
}
function startGame() {
currentRound = 0;
reactionTimes = [];
state = 'idle';
startBtnEl.style.display = 'none';
resultsEl.style.display = 'none';
scoreAreaEl.style.display = 'block';
updateScoreDisplay();
nextRound();
}
function nextRound() {
if (currentRound >= totalRounds) {
showResults();
return;
}
currentRound++;
state = 'waiting';
roundInfoEl.textContent = 'Ronde ' + currentRound + ' van ' + totalRounds;
setBoxState('state-waiting');
boxTextEl.textContent = 'Wachten...';
messageEl.textContent = '';
var delay = 1500 + Math.random() * 3000; // 1.5 to 4.5 seconds
timerId = setTimeout(function() {
if (state === 'waiting') {
// Show warning briefly then ready
state = 'warning';
setBoxState('state-warning');
boxTextEl.textContent = 'Bereid je voor...';
setTimeout(function() {
if (state === 'warning') {
state = 'ready';
startTime = Date.now();
setBoxState('state-ready');
boxTextEl.textContent = 'KLIK NU! 🖱️';
}
}, 300 + Math.random() * 400);
}
}, delay);
// Set click handler for waiting/warning state
boxEl.onclick = handleClick;
}
function handleClick() {
if (state === 'waiting' || state === 'warning') {
clearTimeout(timerId);
var penalty = 500;
reactionTimes.push(penalty);
setBoxState('state-result');
boxTextEl.textContent = '⚠️ Te vroeg! +500 ms straf';
messageEl.innerHTML = '<span style="color:#e74c3c;">Je hebt te vroeg geklikt!</span>';
updateScoreDisplay();
setTimeout(function() { nextRound(); }, 1200);
} else if (state === 'ready') {
var reactionTime = Date.now() - startTime;
reactionTimes.push(reactionTime);
clearTimeout(timerId);
setBoxState('state-result');
var emoji = '';
if (reactionTime < 150) emoji = '🤖';
else if (reactionTime < 250) emoji = '⚡';
else if (reactionTime < 350) emoji = '😊';
else emoji = '🐌';
boxTextEl.textContent = reactionTime + ' ms! ' + emoji;
messageEl.innerHTML = 'Ronde ' + currentRound + ' voltooid. Volgende ronde...';
updateScoreDisplay();
setTimeout(function() { nextRound(); }, 1500);
} else if (state === 'idle') {
// handled by button
}
}
function updateScoreDisplay() {
var done = Math.min(currentRound, totalRounds);
document.getElementById('rounds-done').textContent = done + '/' + totalRounds;
if (reactionTimes.length > 0) {
var valid = reactionTimes.filter(function(t) { return t >= 150; });
if (valid.length > 0) {
var best = Math.min.apply(null, valid);
document.getElementById('best-time').textContent = best + ' ms';
}
var avg = reactionTimes.reduce(function(a,b){return a+b;}, 0) / reactionTimes.length;
document.getElementById('avg-time').textContent = Math.round(avg) + ' ms';
} else {
document.getElementById('best-time').textContent = '-';
document.getElementById('avg-time').textContent = '-';
}
}
function showResults() {
state = 'finished';
roundInfoEl.textContent = '';
setBoxState('state-result');
boxTextEl.textContent = 'Klaar! 🎉';
messageEl.textContent = '';
scoreAreaEl.style.display = 'none';
resultsEl.style.display = 'block';
var validTimes = reactionTimes.filter(function(t) { return t >= 150; });
var bestTime = validTimes.length > 0 ? Math.min.apply(null, validTimes) : '-';
var avgTime = Math.round(reactionTimes.reduce(function(a,b){return a+b;}, 0) / reactionTimes.length);
var html = '';
for (var i = 0; i < totalRounds; i++) {
html += '<div class="result-row"><span>Ronde ' + (i+1) + '</span><span>' + reactionTimes[i] + ' ms</span></div>';
}
html += '<div class="result-row" style="border-top:2px solid #4a3f8a; margin-top:5px; padding-top:10px;"><span>Beste tijd</span><span>' + bestTime + ' ms</span></div>';
html += '<div class="result-row"><span>Gemiddeld</span><span>' + avgTime + ' ms</span></div>';
document.getElementById('result-details').innerHTML = html;
var verdictEl = document.getElementById('verdict');
if (bestTime === '-') {
verdictEl.innerHTML = '<span class="badge-emoji">😅</span>Alle rondes te vroeg! Probeer het nog eens.';
verdictEl.style.background = '#fff3cd';
} else if (bestTime < 150) {
verdictEl.innerHTML = '<span class="badge-emoji">🤖</span>Robot-reflexen! Ben je een computer?';
verdictEl.style.background = '#d4edda';
} else if (bestTime < 250) {
verdictEl.innerHTML = '<span class="badge-emoji">⚡</span>Super snel! Je bent razendsnel!';
verdictEl.style.background = '#d4edda';
} else if (bestTime < 350) {
verdictEl.innerHTML = '<span class="badge-emoji">😊</span>Goeie prestatie! Blijf oefenen voor nog sneller.';
verdictEl.style.background = '#cce5ff';
} else {
verdictEl.innerHTML = '<span class="badge-emoji">🐌</span>Oefening baart kunst! Probeer het opnieuw.';
verdictEl.style.background = '#f8d7da';
}
startBtnEl.style.display = 'none';
}
function resetGame() {
resultsEl.style.display = 'none';
scoreAreaEl.style.display = 'none';
roundInfoEl.textContent = '';
setBoxState('state-waiting');
boxTextEl.textContent = 'Klaar om te beginnen?';
messageEl.textContent = '';
startBtnEl.style.display = 'inline-block';
}
// Prevent double-click selection on box
boxEl.onmousedown = function(e) { e.preventDefault(); };
</script>
</body>
</html>