Bommenwerper Game<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n <style>\n :root {\n --sky-color: #87CEEB;\n --ground-color: #3cb371;\n }\n body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background-color: #000;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: white;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n }\n #game-container {\n position: relative;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom, var(--sky-color) 0%, var(--sky-color) 70%, var(--ground-color) 70%, var(--ground-color) 100%);\n overflow: hidden;\n }\n \n .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 100;\n }\n .hidden { display: none !important; }\n \n .panel {\n background: rgba(40, 40, 40, 0.9);\n padding: 2rem;\n border-radius: 1rem;\n border: 2px solid #555;\n box-shadow: 0 10px 25px rgba(0,0,0,0.5);\n text-align: center;\n max-width: 90%;\n width: 400px;\n }\n\n h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #fbbf24; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }\n h2 { font-size: 1.8rem; margin-bottom: 1rem; color: #f3f4f6; }\n \n .btn {\n background: #3b82f6;\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n font-size: 1.1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n margin: 0.5rem;\n font-weight: bold;\n }\n .btn:hover { background: #2563eb; transform: scale(1.05); }\n .btn:active { transform: scale(0.95); }\n .btn-green { background: #10b981; }\n .btn-green:hover { background: #059669; }\n\n input[type=\"text\"] {\n width: 100%;\n padding: 0.75rem;\n margin-bottom: 1rem;\n border-radius: 0.5rem;\n border: 2px solid #9ca3af;\n background: #ffffff;\n color: #111827;\n font-size: 1.2rem;\n font-weight: bold;\n box-sizing: border-box;\n text-align: center;\n }\n\n input[type=\"text\"]::placeholder {\n color: #6b7280;\n font-weight: normal;\n }\n\n #hud {\n position: absolute;\n top: 1rem;\n right: 1rem;\n left: 1rem;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n z-index: 10;\n }\n\n .hud-panel {\n background: rgba(0, 0, 0, 0.6);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n border: 1px solid rgba(255,255,255,0.2);\n font-size: 1.2rem;\n font-weight: bold;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n #timer-display { color: #fca5a5; font-size: 1.5rem; }\n .player-score { display: flex; justify-content: space-between; width: 150px; }\n .current-player-highlight { color: #fbbf24; }\n\n .entity { position: absolute; transform: translate(-50%, -50%); }\n \n #plane {\n font-size: 3rem;\n color: #d1d5db;\n z-index: 50;\n transition: transform 0.1s;\n filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.3));\n }\n\n .bomb {\n font-size: 1.5rem;\n color: #374151;\n z-index: 40;\n filter: drop-shadow(0px 5px 2px rgba(0,0,0,0.5));\n }\n\n .target {\n font-size: 2.5rem;\n z-index: 30;\n filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));\n }\n .target-tank { color: #4b5563; }\n .target-apc { color: #6b7280; }\n .target-building { color: #9ca3af; font-size: 3rem; }\n\n .explosion {\n position: absolute;\n transform: translate(-50%, -50%);\n color: #ef4444;\n font-size: 3rem;\n z-index: 45;\n animation: explode 0.5s ease-out forwards;\n }\n\n @keyframes explode {\n 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; color: #fde047; }\n 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; color: #ef4444; }\n 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; color: #7f1d1d; }\n }\n\n \/* Background animation *\/\n #clouds {\n position: absolute;\n top: 0;\n left: 0;\n width: 200%;\n height: 70%;\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"200\" height=\"100\"><path d=\"M50 50 Q 60 40 70 50 Q 80 40 90 50 Q 100 60 90 70 Q 80 80 70 70 Q 60 80 50 70 Q 40 60 50 50 Z\" fill=\"rgba(255,255,255,0.4)\"\/><\/svg>');\n z-index: 1;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"game-container\">\n <div id=\"clouds\"><\/div>\n <div id=\"plane\" class=\"entity\"><i class=\"fa-solid fa-plane\"><\/i><\/div>\n \n <div id=\"hud\" class=\"hidden\">\n <div class=\"hud-panel\">\n <div>Tijd over: <span id=\"timer-display\">60<\/span>s<\/div>\n <div id=\"current-player-display\" class=\"text-blue-300\">Speler 1 is aan de beurt<\/div>\n <\/div>\n <div class=\"hud-panel\" id=\"score-board\">\n \n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-start\" class=\"overlay\">\n <div class=\"panel\">\n <h1>Bommenwerper<\/h1>\n <h2>Selecteer aantal spelers<\/h2>\n <div class=\"flex flex-wrap justify-center\">\n <button class=\"btn\" onclick=\"selectPlayers(1)\">1 Speler<\/button>\n <button class=\"btn\" onclick=\"selectPlayers(2)\">2 Spelers<\/button>\n <button class=\"btn\" onclick=\"selectPlayers(3)\">3 Spelers<\/button>\n <button class=\"btn\" onclick=\"selectPlayers(4)\">4 Spelers<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-names\" class=\"overlay hidden\">\n <div class=\"panel\">\n <h2>Voer spelernamen in<\/h2>\n <div id=\"name-inputs-container\" class=\"flex flex-col gap-2 mb-4\">\n \n <\/div>\n <button class=\"btn btn-green w-full\" onclick=\"startGameSequence()\">Start Spel<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-transition\" class=\"overlay hidden\">\n <div class=\"panel\">\n <h1 id=\"transition-title\">Ronde Afgelopen<\/h1>\n <h2 id=\"transition-subtitle\">Klaarmaken voor de volgende speler...<\/h2>\n <button class=\"btn btn-green mt-4\" id=\"btn-next-round\" onclick=\"startRound()\">Start Beurt<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-gameover\" class=\"overlay hidden\">\n <div class=\"panel\">\n <h1>Spel Afgelopen!<\/h1>\n <div id=\"final-results\" class=\"mb-6 text-xl text-left pl-4\">\n \n <\/div>\n <button class=\"btn btn-green w-full\" onclick=\"location.reload()\">Opnieuw Spelen<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Game State\n const gameState = {\n numPlayers: 1,\n players: [], \/\/ Array of { name, score }\n currentPlayerIndex: 0,\n isPlaying: false,\n timeRemaining: 60,\n groundLevel: 0, \/\/ Set dynamically based on window height\n scrollSpeed: 3 \/\/ Speed at which the ground appears to move\n };\n\n \/\/ Constants\n const ROUND_DURATION = 60; \/\/ seconds\n const PLANE_SPEED = 5;\n const MAX_BOMBS = 3;\n const BOMB_GRAVITY = 0.2;\n const TARGET_TYPES = [\n { class: 'fa-truck-field-un', type: 'target-apc', points: 10, width: 40, height: 30 },\n { class: 'fa-truck-monster', type: 'target-tank', points: 20, width: 50, height: 30 },\n { class: 'fa-building', type: 'target-building', points: 5, width: 40, height: 60 }\n ];\n\n \/\/ DOM Elements\n const container = document.getElementById('game-container');\n const planeEl = document.getElementById('plane');\n const cloudsEl = document.getElementById('clouds');\n \n \/\/ UI Elements\n const screens = {\n start: document.getElementById('menu-start'),\n names: document.getElementById('menu-names'),\n transition: document.getElementById('menu-transition'),\n gameover: document.getElementById('menu-gameover'),\n hud: document.getElementById('hud')\n };\n \n \/\/ Entities Arrays\n let bombs = [];\n let targets = [];\n\n \/\/ Plane State\n const plane = {\n x: window.innerWidth \/ 2,\n y: window.innerHeight * 0.3,\n vx: 0,\n vy: 0,\n width: 60,\n height: 40\n };\n\n \/\/ Input State\n const keys = {\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n Space: false\n };\n\n let gameLoopId;\n let timerId;\n let targetSpawnId;\n let cloudOffset = 0;\n\n function init() {\n gameState.groundLevel = window.innerHeight * 0.7; \/\/ Ground starts at 70% height\n updatePlanePosition();\n }\n\n window.addEventListener('resize', () => {\n gameState.groundLevel = window.innerHeight * 0.7;\n \/\/ Keep plane on screen\n plane.x = Math.max(plane.width\/2, Math.min(window.innerWidth - plane.width\/2, plane.x));\n plane.y = Math.max(plane.height\/2, Math.min(gameState.groundLevel - plane.height, plane.y));\n });\n\n function showScreen(screenName) {\n Object.values(screens).forEach(s => s.classList.add('hidden'));\n if (screenName) screens[screenName].classList.remove('hidden');\n }\n\n function selectPlayers(num) {\n gameState.numPlayers = num;\n \n const container = document.getElementById('name-inputs-container');\n container.innerHTML = '';\n \n for (let i = 0; i < num; i++) {\n const input = document.createElement('input');\n input.type = 'text';\n input.placeholder = `Naam Speler ${i + 1}`;\n input.id = `player-name-${i}`;\n \/\/ Pre-fill for convenience if 1 player\n if (num === 1) input.value = \"Speler 1\";\n container.appendChild(input);\n }\n \n showScreen('names');\n }\n\n function startGameSequence() {\n gameState.players = [];\n for (let i = 0; i < gameState.numPlayers; i++) {\n const nameInput = document.getElementById(`player-name-${i}`).value;\n gameState.players.push({\n name: nameInput.trim() || `Speler ${i + 1}`,\n score: 0\n });\n }\n \n gameState.currentPlayerIndex = 0;\n updateScoreBoard();\n prepareRoundTransition();\n }\n\n function prepareRoundTransition() {\n const player = gameState.players[gameState.currentPlayerIndex];\n document.getElementById('transition-title').innerText = gameState.currentPlayerIndex === 0 && gameState.players[0].score === 0 ? \"Spel Start!\" : \"Ronde Afgelopen\";\n document.getElementById('transition-subtitle').innerText = `Maak je klaar, ${player.name}!`;\n \n \/\/ Clear board\n bombs.forEach(b => b.element.remove());\n targets.forEach(t => t.element.remove());\n bombs = [];\n targets = [];\n \n \/\/ Reset plane\n plane.x = window.innerWidth \/ 2;\n plane.y = window.innerHeight * 0.3;\n plane.vx = 0;\n plane.vy = 0;\n updatePlanePosition();\n \n showScreen('transition');\n }\n\n function startRound() {\n showScreen('hud');\n document.getElementById('current-player-display').innerText = `Beurt: ${gameState.players[gameState.currentPlayerIndex].name}`;\n \n gameState.timeRemaining = ROUND_DURATION;\n document.getElementById('timer-display').innerText = gameState.timeRemaining;\n \n gameState.isPlaying = true;\n \n \/\/ Clear old intervals\/loops\n clearInterval(timerId);\n clearInterval(targetSpawnId);\n cancelAnimationFrame(gameLoopId);\n \n \/\/ Start timers\n timerId = setInterval(() => {\n gameState.timeRemaining--;\n document.getElementById('timer-display').innerText = gameState.timeRemaining;\n \n if (gameState.timeRemaining <= 0) {\n endRound();\n }\n }, 1000);\n \n targetSpawnId = setInterval(spawnTarget, 1500); \/\/ Spawn target every 1.5s\n \n updateScoreBoard(); \/\/ highlight current player\n \n keys.Space = false; \/\/ Reset space to prevent auto-firing\n gameLoopId = requestAnimationFrame(gameLoop);\n }\n\n function endRound() {\n gameState.isPlaying = false;\n clearInterval(timerId);\n clearInterval(targetSpawnId);\n cancelAnimationFrame(gameLoopId);\n \n gameState.currentPlayerIndex++;\n \n if (gameState.currentPlayerIndex >= gameState.numPlayers) {\n showGameOver();\n } else {\n prepareRoundTransition();\n }\n }\n\n window.addEventListener('keydown', (e) => {\n if (!gameState.isPlaying) return;\n \n if (keys.hasOwnProperty(e.code)) {\n keys[e.code] = true;\n e.preventDefault(); \/\/ Prevent scrolling\n }\n \n if (e.code === 'Space' && !e.repeat) {\n dropBomb();\n }\n });\n\n window.addEventListener('keyup', (e) => {\n if (keys.hasOwnProperty(e.code)) {\n keys[e.code] = false;\n }\n });\n\n function dropBomb() {\n if (bombs.length >= MAX_BOMBS) return; \/\/ Limit bombs on screen\n\n const bombEl = document.createElement('i');\n bombEl.className = 'fa-solid fa-bomb entity bomb';\n container.appendChild(bombEl);\n\n bombs.push({\n element: bombEl,\n x: plane.x,\n y: plane.y + plane.height \/ 2,\n vx: plane.vx * 0.8, \/\/ Inherit some of plane's horizontal speed\n vy: 2, \/\/ Initial downward thrust\n width: 20,\n height: 20\n });\n }\n\n function spawnTarget() {\n if (!gameState.isPlaying) return;\n\n const typeInfo = TARGET_TYPES[Math.floor(Math.random() * TARGET_TYPES.length)];\n const targetEl = document.createElement('i');\n targetEl.className = `fa-solid ${typeInfo.class} entity target ${typeInfo.type}`;\n container.appendChild(targetEl);\n\n \/\/ Target appears at right edge\n const startX = window.innerWidth + 50;\n \/\/ Position on ground\n const startY = gameState.groundLevel + 10; \/\/ slightly embedded\n\n targets.push({\n element: targetEl,\n type: typeInfo,\n x: startX,\n y: startY,\n width: typeInfo.width,\n height: typeInfo.height,\n vx: -gameState.scrollSpeed - (Math.random() * 2) \/\/ Move left (ground speed + variable)\n });\n }\n\n function createExplosion(x, y) {\n const expEl = document.createElement('i');\n expEl.className = 'fa-solid fa-burst explosion';\n expEl.style.left = `${x}px`;\n expEl.style.top = `${y}px`;\n container.appendChild(expEl);\n \n \/\/ Remove after animation\n setTimeout(() => expEl.remove(), 500);\n }\n\n function gameLoop() {\n if (!gameState.isPlaying) return;\n\n updatePlane();\n updateBombs();\n updateTargets();\n updateBackground();\n checkCollisions();\n\n gameLoopId = requestAnimationFrame(gameLoop);\n }\n\n function updatePlane() {\n \/\/ Acceleration\n if (keys.ArrowLeft) plane.vx -= 0.5;\n if (keys.ArrowRight) plane.vx += 0.5;\n if (keys.ArrowUp) plane.vy -= 0.5;\n if (keys.ArrowDown) plane.vy += 0.5;\n\n \/\/ Friction \/ Drag\n plane.vx *= 0.9;\n plane.vy *= 0.9;\n\n \/\/ Limit speed\n plane.vx = Math.max(-PLANE_SPEED * 1.5, Math.min(PLANE_SPEED * 1.5, plane.vx));\n plane.vy = Math.max(-PLANE_SPEED, Math.min(PLANE_SPEED, plane.vy));\n\n \/\/ Update position\n plane.x += plane.vx;\n plane.y += plane.vy;\n\n \/\/ Boundaries\n const halfW = plane.width \/ 2;\n const halfH = plane.height \/ 2;\n \n if (plane.x < halfW) { plane.x = halfW; plane.vx = 0; }\n if (plane.x > window.innerWidth - halfW) { plane.x = window.innerWidth - halfW; plane.vx = 0; }\n if (plane.y < halfH) { plane.y = halfH; plane.vy = 0; }\n \/\/ Don't hit the ground\n if (plane.y > gameState.groundLevel - halfH) { plane.y = gameState.groundLevel - halfH; plane.vy = 0; }\n\n updatePlanePosition();\n }\n\n function updatePlanePosition() {\n planeEl.style.left = `${plane.x}px`;\n planeEl.style.top = `${plane.y}px`;\n \/\/ Tilt plane based on movement\n const tilt = plane.vx * 2;\n planeEl.style.transform = `translate(-50%, -50%) rotate(${tilt}deg)`;\n }\n\n function updateBombs() {\n for (let i = bombs.length - 1; i >= 0; i--) {\n let b = bombs[i];\n \n \/\/ Apply gravity\n b.vy += BOMB_GRAVITY;\n \n \/\/ Apply wind resistance\n b.vx -= gameState.scrollSpeed * 0.05; \/\/ Ground moving makes bomb seem to slow down horizontally\n \n b.x += b.vx;\n b.y += b.vy;\n \n b.element.style.left = `${b.x}px`;\n b.element.style.top = `${b.y}px`;\n \n \/\/ Rotate bomb based on velocity\n const angle = Math.atan2(b.vy, b.vx) * (180 \/ Math.PI) + 90;\n b.element.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;\n\n \/\/ Check if hit ground\n if (b.y > gameState.groundLevel + 20) {\n createExplosion(b.x, gameState.groundLevel);\n b.element.remove();\n bombs.splice(i, 1);\n }\n }\n }\n\n function updateTargets() {\n for (let i = targets.length - 1; i >= 0; i--) {\n let t = targets[i];\n \n t.x += t.vx; \/\/ Move left\n t.element.style.left = `${t.x}px`;\n t.element.style.top = `${t.y}px`;\n\n \/\/ Remove if off screen left\n if (t.x < -100) {\n t.element.remove();\n targets.splice(i, 1);\n }\n }\n }\n\n function updateBackground() {\n cloudOffset -= gameState.scrollSpeed * 0.5; \/\/ Parallax effect\n if (cloudOffset <= -window.innerWidth) cloudOffset = 0;\n cloudsEl.style.transform = `translateX(${cloudOffset}px)`;\n }\n\n function checkCollisions() {\n for (let i = bombs.length - 1; i >= 0; i--) {\n let b = bombs[i];\n let hit = false;\n\n for (let j = targets.length - 1; j >= 0; j--) {\n let t = targets[j];\n\n \/\/ Simple AABB (Axis-Aligned Bounding Box) collision, roughly adjusted for center transform\n if (b.x < t.x + t.width\/2 &&\n b.x + b.width\/2 > t.x - t.width\/2 &&\n b.y < t.y + t.height\/2 &&\n b.y + b.height\/2 > t.y - t.height\/2) {\n \n \/\/ Collision detected!\n createExplosion(t.x, t.y);\n \n \/\/ Add score\n gameState.players[gameState.currentPlayerIndex].score += 1; \/\/ Count targets, not points based on prompt: \"Tel het aantal doelen dat geraakt is\"\n updateScoreBoard();\n \n \/\/ Remove target\n t.element.remove();\n targets.splice(j, 1);\n hit = true;\n break; \/\/ Bomb can only hit one target\n }\n }\n\n if (hit) {\n \/\/ Remove bomb\n b.element.remove();\n bombs.splice(i, 1);\n }\n }\n }\n\n function updateScoreBoard() {\n const board = document.getElementById('score-board');\n board.innerHTML = '';\n \n gameState.players.forEach((p, index) => {\n const div = document.createElement('div');\n div.className = `player-score ${index === gameState.currentPlayerIndex && gameState.isPlaying ? 'current-player-highlight' : ''}`;\n \n const nameSpan = document.createElement('span');\n \/\/ Truncate name if too long\n nameSpan.innerText = p.name.length > 8 ? p.name.substring(0,8)+'...' : p.name;\n \n const scoreSpan = document.createElement('span');\n scoreSpan.innerText = p.score;\n \n div.appendChild(nameSpan);\n div.appendChild(scoreSpan);\n board.appendChild(div);\n });\n }\n\n function showGameOver() {\n showScreen('gameover');\n const resultsContainer = document.getElementById('final-results');\n resultsContainer.innerHTML = '';\n\n \/\/ Sort players by score descending\n const sortedPlayers = [...gameState.players].sort((a, b) => b.score - a.score);\n \n let html = '<ol class=\"list-decimal list-inside space-y-2\">';\n sortedPlayers.forEach(p => {\n html += `<li><strong>${p.name}<\/strong>: ${p.score} doelen geraakt<\/li>`;\n });\n html += '<\/ol>';\n \n if (gameState.numPlayers > 1) {\n \/\/ Check for draw\n if (sortedPlayers.length > 1 && sortedPlayers[0].score === sortedPlayers[1].score) {\n html = `<div class=\"text-yellow-400 font-bold mb-4 text-center\">Gelijkspel!<\/div>` + html;\n } else {\n html = `<div class=\"text-green-400 font-bold mb-4 text-center\">${sortedPlayers[0].name} Wint!<\/div>` + html;\n }\n }\n\n resultsContainer.innerHTML = html;\n }\n\n \/\/ Start\n init();\n\n<\/script>\n<\/body>\n<\/html><\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-948","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages\/948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=948"}],"version-history":[{"count":14,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages\/948\/revisions"}],"predecessor-version":[{"id":967,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages\/948\/revisions\/967"}],"wp:attachment":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":948,"date":"2026-05-14T10:51:10","date_gmt":"2026-05-14T08:51:10","guid":{"rendered":"https:\/\/pieterbatenburg.com\/?page_id=948"},"modified":"2026-05-14T16:33:36","modified_gmt":"2026-05-14T14:33:36","slug":"bommenwerper","status":"publish","type":"page","link":"https:\/\/pieterbatenburg.com\/?page_id=948","title":{"rendered":"Bommenwerper"},"content":{"rendered":"\n\n\n\n\n \n \n Bommenwerper Game<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n <style>\n :root {\n --sky-color: #87CEEB;\n --ground-color: #3cb371;\n }\n body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background-color: #000;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: white;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n }\n #game-container {\n position: relative;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom, var(--sky-color) 0%, var(--sky-color) 70%, var(--ground-color) 70%, var(--ground-color) 100%);\n overflow: hidden;\n }\n \n .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 100;\n }\n .hidden { display: none !important; }\n \n .panel {\n background: rgba(40, 40, 40, 0.9);\n padding: 2rem;\n border-radius: 1rem;\n border: 2px solid #555;\n box-shadow: 0 10px 25px rgba(0,0,0,0.5);\n text-align: center;\n max-width: 90%;\n width: 400px;\n }\n\n h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #fbbf24; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }\n h2 { font-size: 1.8rem; margin-bottom: 1rem; color: #f3f4f6; }\n \n .btn {\n background: #3b82f6;\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n font-size: 1.1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: background 0.2s, transform 0.1s;\n margin: 0.5rem;\n font-weight: bold;\n }\n .btn:hover { background: #2563eb; transform: scale(1.05); }\n .btn:active { transform: scale(0.95); }\n .btn-green { background: #10b981; }\n .btn-green:hover { background: #059669; }\n\n input[type=\"text\"] {\n width: 100%;\n padding: 0.75rem;\n margin-bottom: 1rem;\n border-radius: 0.5rem;\n border: 2px solid #9ca3af;\n background: #ffffff;\n color: #111827;\n font-size: 1.2rem;\n font-weight: bold;\n box-sizing: border-box;\n text-align: center;\n }\n\n input[type=\"text\"]::placeholder {\n color: #6b7280;\n font-weight: normal;\n }\n\n #hud {\n position: absolute;\n top: 1rem;\n right: 1rem;\n left: 1rem;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n z-index: 10;\n }\n\n .hud-panel {\n background: rgba(0, 0, 0, 0.6);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n border: 1px solid rgba(255,255,255,0.2);\n font-size: 1.2rem;\n font-weight: bold;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n #timer-display { color: #fca5a5; font-size: 1.5rem; }\n .player-score { display: flex; justify-content: space-between; width: 150px; }\n .current-player-highlight { color: #fbbf24; }\n\n .entity { position: absolute; transform: translate(-50%, -50%); }\n \n #plane {\n font-size: 3rem;\n color: #d1d5db;\n z-index: 50;\n transition: transform 0.1s;\n filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.3));\n }\n\n .bomb {\n font-size: 1.5rem;\n color: #374151;\n z-index: 40;\n filter: drop-shadow(0px 5px 2px rgba(0,0,0,0.5));\n }\n\n .target {\n font-size: 2.5rem;\n z-index: 30;\n filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));\n }\n .target-tank { color: #4b5563; }\n .target-apc { color: #6b7280; }\n .target-building { color: #9ca3af; font-size: 3rem; }\n\n .explosion {\n position: absolute;\n transform: translate(-50%, -50%);\n color: #ef4444;\n font-size: 3rem;\n z-index: 45;\n animation: explode 0.5s ease-out forwards;\n }\n\n @keyframes explode {\n 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; color: #fde047; }\n 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; color: #ef4444; }\n 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; color: #7f1d1d; }\n }\n\n \/* Background animation *\/\n #clouds {\n position: absolute;\n top: 0;\n left: 0;\n width: 200%;\n height: 70%;\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"200\" height=\"100\"><path d=\"M50 50 Q 60 40 70 50 Q 80 40 90 50 Q 100 60 90 70 Q 80 80 70 70 Q 60 80 50 70 Q 40 60 50 50 Z\" fill=\"rgba(255,255,255,0.4)\"\/><\/svg>');\n z-index: 1;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"game-container\">\n <div id=\"clouds\"><\/div>\n <div id=\"plane\" class=\"entity\"><i class=\"fa-solid fa-plane\"><\/i><\/div>\n \n <div id=\"hud\" class=\"hidden\">\n <div class=\"hud-panel\">\n <div>Tijd over: <span id=\"timer-display\">60<\/span>s<\/div>\n <div id=\"current-player-display\" class=\"text-blue-300\">Speler 1 is aan de beurt<\/div>\n <\/div>\n <div class=\"hud-panel\" id=\"score-board\">\n \n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-start\" class=\"overlay\">\n <div class=\"panel\">\n <h1>Bommenwerper<\/h1>\n <h2>Selecteer aantal spelers<\/h2>\n <div class=\"flex flex-wrap justify-center\">\n <button class=\"btn\" onclick=\"selectPlayers(1)\">1 Speler<\/button>\n <button class=\"btn\" onclick=\"selectPlayers(2)\">2 Spelers<\/button>\n <button class=\"btn\" onclick=\"selectPlayers(3)\">3 Spelers<\/button>\n <button class=\"btn\" onclick=\"selectPlayers(4)\">4 Spelers<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-names\" class=\"overlay hidden\">\n <div class=\"panel\">\n <h2>Voer spelernamen in<\/h2>\n <div id=\"name-inputs-container\" class=\"flex flex-col gap-2 mb-4\">\n \n <\/div>\n <button class=\"btn btn-green w-full\" onclick=\"startGameSequence()\">Start Spel<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-transition\" class=\"overlay hidden\">\n <div class=\"panel\">\n <h1 id=\"transition-title\">Ronde Afgelopen<\/h1>\n <h2 id=\"transition-subtitle\">Klaarmaken voor de volgende speler...<\/h2>\n <button class=\"btn btn-green mt-4\" id=\"btn-next-round\" onclick=\"startRound()\">Start Beurt<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"menu-gameover\" class=\"overlay hidden\">\n <div class=\"panel\">\n <h1>Spel Afgelopen!<\/h1>\n <div id=\"final-results\" class=\"mb-6 text-xl text-left pl-4\">\n \n <\/div>\n <button class=\"btn btn-green w-full\" onclick=\"location.reload()\">Opnieuw Spelen<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Game State\n const gameState = {\n numPlayers: 1,\n players: [], \/\/ Array of { name, score }\n currentPlayerIndex: 0,\n isPlaying: false,\n timeRemaining: 60,\n groundLevel: 0, \/\/ Set dynamically based on window height\n scrollSpeed: 3 \/\/ Speed at which the ground appears to move\n };\n\n \/\/ Constants\n const ROUND_DURATION = 60; \/\/ seconds\n const PLANE_SPEED = 5;\n const MAX_BOMBS = 3;\n const BOMB_GRAVITY = 0.2;\n const TARGET_TYPES = [\n { class: 'fa-truck-field-un', type: 'target-apc', points: 10, width: 40, height: 30 },\n { class: 'fa-truck-monster', type: 'target-tank', points: 20, width: 50, height: 30 },\n { class: 'fa-building', type: 'target-building', points: 5, width: 40, height: 60 }\n ];\n\n \/\/ DOM Elements\n const container = document.getElementById('game-container');\n const planeEl = document.getElementById('plane');\n const cloudsEl = document.getElementById('clouds');\n \n \/\/ UI Elements\n const screens = {\n start: document.getElementById('menu-start'),\n names: document.getElementById('menu-names'),\n transition: document.getElementById('menu-transition'),\n gameover: document.getElementById('menu-gameover'),\n hud: document.getElementById('hud')\n };\n \n \/\/ Entities Arrays\n let bombs = [];\n let targets = [];\n\n \/\/ Plane State\n const plane = {\n x: window.innerWidth \/ 2,\n y: window.innerHeight * 0.3,\n vx: 0,\n vy: 0,\n width: 60,\n height: 40\n };\n\n \/\/ Input State\n const keys = {\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n Space: false\n };\n\n let gameLoopId;\n let timerId;\n let targetSpawnId;\n let cloudOffset = 0;\n\n function init() {\n gameState.groundLevel = window.innerHeight * 0.7; \/\/ Ground starts at 70% height\n updatePlanePosition();\n }\n\n window.addEventListener('resize', () => {\n gameState.groundLevel = window.innerHeight * 0.7;\n \/\/ Keep plane on screen\n plane.x = Math.max(plane.width\/2, Math.min(window.innerWidth - plane.width\/2, plane.x));\n plane.y = Math.max(plane.height\/2, Math.min(gameState.groundLevel - plane.height, plane.y));\n });\n\n function showScreen(screenName) {\n Object.values(screens).forEach(s => s.classList.add('hidden'));\n if (screenName) screens[screenName].classList.remove('hidden');\n }\n\n function selectPlayers(num) {\n gameState.numPlayers = num;\n \n const container = document.getElementById('name-inputs-container');\n container.innerHTML = '';\n \n for (let i = 0; i < num; i++) {\n const input = document.createElement('input');\n input.type = 'text';\n input.placeholder = `Naam Speler ${i + 1}`;\n input.id = `player-name-${i}`;\n \/\/ Pre-fill for convenience if 1 player\n if (num === 1) input.value = \"Speler 1\";\n container.appendChild(input);\n }\n \n showScreen('names');\n }\n\n function startGameSequence() {\n gameState.players = [];\n for (let i = 0; i < gameState.numPlayers; i++) {\n const nameInput = document.getElementById(`player-name-${i}`).value;\n gameState.players.push({\n name: nameInput.trim() || `Speler ${i + 1}`,\n score: 0\n });\n }\n \n gameState.currentPlayerIndex = 0;\n updateScoreBoard();\n prepareRoundTransition();\n }\n\n function prepareRoundTransition() {\n const player = gameState.players[gameState.currentPlayerIndex];\n document.getElementById('transition-title').innerText = gameState.currentPlayerIndex === 0 && gameState.players[0].score === 0 ? \"Spel Start!\" : \"Ronde Afgelopen\";\n document.getElementById('transition-subtitle').innerText = `Maak je klaar, ${player.name}!`;\n \n \/\/ Clear board\n bombs.forEach(b => b.element.remove());\n targets.forEach(t => t.element.remove());\n bombs = [];\n targets = [];\n \n \/\/ Reset plane\n plane.x = window.innerWidth \/ 2;\n plane.y = window.innerHeight * 0.3;\n plane.vx = 0;\n plane.vy = 0;\n updatePlanePosition();\n \n showScreen('transition');\n }\n\n function startRound() {\n showScreen('hud');\n document.getElementById('current-player-display').innerText = `Beurt: ${gameState.players[gameState.currentPlayerIndex].name}`;\n \n gameState.timeRemaining = ROUND_DURATION;\n document.getElementById('timer-display').innerText = gameState.timeRemaining;\n \n gameState.isPlaying = true;\n \n \/\/ Clear old intervals\/loops\n clearInterval(timerId);\n clearInterval(targetSpawnId);\n cancelAnimationFrame(gameLoopId);\n \n \/\/ Start timers\n timerId = setInterval(() => {\n gameState.timeRemaining--;\n document.getElementById('timer-display').innerText = gameState.timeRemaining;\n \n if (gameState.timeRemaining <= 0) {\n endRound();\n }\n }, 1000);\n \n targetSpawnId = setInterval(spawnTarget, 1500); \/\/ Spawn target every 1.5s\n \n updateScoreBoard(); \/\/ highlight current player\n \n keys.Space = false; \/\/ Reset space to prevent auto-firing\n gameLoopId = requestAnimationFrame(gameLoop);\n }\n\n function endRound() {\n gameState.isPlaying = false;\n clearInterval(timerId);\n clearInterval(targetSpawnId);\n cancelAnimationFrame(gameLoopId);\n \n gameState.currentPlayerIndex++;\n \n if (gameState.currentPlayerIndex >= gameState.numPlayers) {\n showGameOver();\n } else {\n prepareRoundTransition();\n }\n }\n\n window.addEventListener('keydown', (e) => {\n if (!gameState.isPlaying) return;\n \n if (keys.hasOwnProperty(e.code)) {\n keys[e.code] = true;\n e.preventDefault(); \/\/ Prevent scrolling\n }\n \n if (e.code === 'Space' && !e.repeat) {\n dropBomb();\n }\n });\n\n window.addEventListener('keyup', (e) => {\n if (keys.hasOwnProperty(e.code)) {\n keys[e.code] = false;\n }\n });\n\n function dropBomb() {\n if (bombs.length >= MAX_BOMBS) return; \/\/ Limit bombs on screen\n\n const bombEl = document.createElement('i');\n bombEl.className = 'fa-solid fa-bomb entity bomb';\n container.appendChild(bombEl);\n\n bombs.push({\n element: bombEl,\n x: plane.x,\n y: plane.y + plane.height \/ 2,\n vx: plane.vx * 0.8, \/\/ Inherit some of plane's horizontal speed\n vy: 2, \/\/ Initial downward thrust\n width: 20,\n height: 20\n });\n }\n\n function spawnTarget() {\n if (!gameState.isPlaying) return;\n\n const typeInfo = TARGET_TYPES[Math.floor(Math.random() * TARGET_TYPES.length)];\n const targetEl = document.createElement('i');\n targetEl.className = `fa-solid ${typeInfo.class} entity target ${typeInfo.type}`;\n container.appendChild(targetEl);\n\n \/\/ Target appears at right edge\n const startX = window.innerWidth + 50;\n \/\/ Position on ground\n const startY = gameState.groundLevel + 10; \/\/ slightly embedded\n\n targets.push({\n element: targetEl,\n type: typeInfo,\n x: startX,\n y: startY,\n width: typeInfo.width,\n height: typeInfo.height,\n vx: -gameState.scrollSpeed - (Math.random() * 2) \/\/ Move left (ground speed + variable)\n });\n }\n\n function createExplosion(x, y) {\n const expEl = document.createElement('i');\n expEl.className = 'fa-solid fa-burst explosion';\n expEl.style.left = `${x}px`;\n expEl.style.top = `${y}px`;\n container.appendChild(expEl);\n \n \/\/ Remove after animation\n setTimeout(() => expEl.remove(), 500);\n }\n\n function gameLoop() {\n if (!gameState.isPlaying) return;\n\n updatePlane();\n updateBombs();\n updateTargets();\n updateBackground();\n checkCollisions();\n\n gameLoopId = requestAnimationFrame(gameLoop);\n }\n\n function updatePlane() {\n \/\/ Acceleration\n if (keys.ArrowLeft) plane.vx -= 0.5;\n if (keys.ArrowRight) plane.vx += 0.5;\n if (keys.ArrowUp) plane.vy -= 0.5;\n if (keys.ArrowDown) plane.vy += 0.5;\n\n \/\/ Friction \/ Drag\n plane.vx *= 0.9;\n plane.vy *= 0.9;\n\n \/\/ Limit speed\n plane.vx = Math.max(-PLANE_SPEED * 1.5, Math.min(PLANE_SPEED * 1.5, plane.vx));\n plane.vy = Math.max(-PLANE_SPEED, Math.min(PLANE_SPEED, plane.vy));\n\n \/\/ Update position\n plane.x += plane.vx;\n plane.y += plane.vy;\n\n \/\/ Boundaries\n const halfW = plane.width \/ 2;\n const halfH = plane.height \/ 2;\n \n if (plane.x < halfW) { plane.x = halfW; plane.vx = 0; }\n if (plane.x > window.innerWidth - halfW) { plane.x = window.innerWidth - halfW; plane.vx = 0; }\n if (plane.y < halfH) { plane.y = halfH; plane.vy = 0; }\n \/\/ Don't hit the ground\n if (plane.y > gameState.groundLevel - halfH) { plane.y = gameState.groundLevel - halfH; plane.vy = 0; }\n\n updatePlanePosition();\n }\n\n function updatePlanePosition() {\n planeEl.style.left = `${plane.x}px`;\n planeEl.style.top = `${plane.y}px`;\n \/\/ Tilt plane based on movement\n const tilt = plane.vx * 2;\n planeEl.style.transform = `translate(-50%, -50%) rotate(${tilt}deg)`;\n }\n\n function updateBombs() {\n for (let i = bombs.length - 1; i >= 0; i--) {\n let b = bombs[i];\n \n \/\/ Apply gravity\n b.vy += BOMB_GRAVITY;\n \n \/\/ Apply wind resistance\n b.vx -= gameState.scrollSpeed * 0.05; \/\/ Ground moving makes bomb seem to slow down horizontally\n \n b.x += b.vx;\n b.y += b.vy;\n \n b.element.style.left = `${b.x}px`;\n b.element.style.top = `${b.y}px`;\n \n \/\/ Rotate bomb based on velocity\n const angle = Math.atan2(b.vy, b.vx) * (180 \/ Math.PI) + 90;\n b.element.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;\n\n \/\/ Check if hit ground\n if (b.y > gameState.groundLevel + 20) {\n createExplosion(b.x, gameState.groundLevel);\n b.element.remove();\n bombs.splice(i, 1);\n }\n }\n }\n\n function updateTargets() {\n for (let i = targets.length - 1; i >= 0; i--) {\n let t = targets[i];\n \n t.x += t.vx; \/\/ Move left\n t.element.style.left = `${t.x}px`;\n t.element.style.top = `${t.y}px`;\n\n \/\/ Remove if off screen left\n if (t.x < -100) {\n t.element.remove();\n targets.splice(i, 1);\n }\n }\n }\n\n function updateBackground() {\n cloudOffset -= gameState.scrollSpeed * 0.5; \/\/ Parallax effect\n if (cloudOffset <= -window.innerWidth) cloudOffset = 0;\n cloudsEl.style.transform = `translateX(${cloudOffset}px)`;\n }\n\n function checkCollisions() {\n for (let i = bombs.length - 1; i >= 0; i--) {\n let b = bombs[i];\n let hit = false;\n\n for (let j = targets.length - 1; j >= 0; j--) {\n let t = targets[j];\n\n \/\/ Simple AABB (Axis-Aligned Bounding Box) collision, roughly adjusted for center transform\n if (b.x < t.x + t.width\/2 &&\n b.x + b.width\/2 > t.x - t.width\/2 &&\n b.y < t.y + t.height\/2 &&\n b.y + b.height\/2 > t.y - t.height\/2) {\n \n \/\/ Collision detected!\n createExplosion(t.x, t.y);\n \n \/\/ Add score\n gameState.players[gameState.currentPlayerIndex].score += 1; \/\/ Count targets, not points based on prompt: \"Tel het aantal doelen dat geraakt is\"\n updateScoreBoard();\n \n \/\/ Remove target\n t.element.remove();\n targets.splice(j, 1);\n hit = true;\n break; \/\/ Bomb can only hit one target\n }\n }\n\n if (hit) {\n \/\/ Remove bomb\n b.element.remove();\n bombs.splice(i, 1);\n }\n }\n }\n\n function updateScoreBoard() {\n const board = document.getElementById('score-board');\n board.innerHTML = '';\n \n gameState.players.forEach((p, index) => {\n const div = document.createElement('div');\n div.className = `player-score ${index === gameState.currentPlayerIndex && gameState.isPlaying ? 'current-player-highlight' : ''}`;\n \n const nameSpan = document.createElement('span');\n \/\/ Truncate name if too long\n nameSpan.innerText = p.name.length > 8 ? p.name.substring(0,8)+'...' : p.name;\n \n const scoreSpan = document.createElement('span');\n scoreSpan.innerText = p.score;\n \n div.appendChild(nameSpan);\n div.appendChild(scoreSpan);\n board.appendChild(div);\n });\n }\n\n function showGameOver() {\n showScreen('gameover');\n const resultsContainer = document.getElementById('final-results');\n resultsContainer.innerHTML = '';\n\n \/\/ Sort players by score descending\n const sortedPlayers = [...gameState.players].sort((a, b) => b.score - a.score);\n \n let html = '<ol class=\"list-decimal list-inside space-y-2\">';\n sortedPlayers.forEach(p => {\n html += `<li><strong>${p.name}<\/strong>: ${p.score} doelen geraakt<\/li>`;\n });\n html += '<\/ol>';\n \n if (gameState.numPlayers > 1) {\n \/\/ Check for draw\n if (sortedPlayers.length > 1 && sortedPlayers[0].score === sortedPlayers[1].score) {\n html = `<div class=\"text-yellow-400 font-bold mb-4 text-center\">Gelijkspel!<\/div>` + html;\n } else {\n html = `<div class=\"text-green-400 font-bold mb-4 text-center\">${sortedPlayers[0].name} Wint!<\/div>` + html;\n }\n }\n\n resultsContainer.innerHTML = html;\n }\n\n \/\/ Start\n init();\n\n<\/script>\n<\/body>\n<\/html><\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-948","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages\/948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=948"}],"version-history":[{"count":14,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages\/948\/revisions"}],"predecessor-version":[{"id":967,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/pages\/948\/revisions\/967"}],"wp:attachment":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}