Car Dodge Game<\/title>\n <style>\n body {\n margin: 0;\n overflow: hidden;\n background-color: #000;\n font-family: sans-serif;\n color: white;\n }\n #controls {\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 2;\n }\n button {\n font-size: 1em;\n padding: 10px 20px;\n margin-right: 10px;\n cursor: pointer;\n background-color: #0af;\n border: none;\n border-radius: 5px;\n color: white;\n }\n #score {\n font-size: 1.2em;\n margin-top: 10px;\n }\n canvas {\n display: block;\n margin: 0 auto;\n background-color: #333;\n border: 3px solid #fff;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"controls\">\n <button id=\"startBtn\">Start<\/button>\n <button id=\"stopBtn\">Stop<\/button>\n <div id=\"score\">Score: 0<\/div>\n <\/div>\n <canvas id=\"gameCanvas\" width=\"400\" height=\"600\"><\/canvas>\n\n <script>\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const scoreDisplay = document.getElementById('score');\n\n let score = 0;\n let gameRunning = false;\n let gameLoopId;\n let cars = [];\n\n const player = {\n x: 180,\n y: 500,\n width: 40,\n height: 70,\n speed: 5\n };\n\n const bgImg = new Image();\n bgImg.src = 'road.png';\n let bgY = 0;\n\n const playerImg = new Image();\n playerImg.src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/player-car.png';\n\n const enemyImages = [\n new Image(),\n new Image(),\n new Image()\n ];\n enemyImages[0].src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/enemy-car1.png';\n enemyImages[1].src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/enemy-car2.png';\n enemyImages[2].src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/enemy-car3.png';\n\n function drawBackground() {\n bgY += 2;\n if (bgY >= canvas.height) bgY = 0;\n ctx.drawImage(bgImg, 0, bgY - canvas.height, canvas.width, canvas.height);\n ctx.drawImage(bgImg, 0, bgY, canvas.width, canvas.height);\n }\n\n function drawPlayer() {\n ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);\n }\n\n function drawCars() {\n cars.forEach(car => {\n ctx.drawImage(car.image, car.x, car.y, car.width, car.height);\n });\n }\n\n function isColliding(a, b) {\n const aHitbox = {\n x: a.x + a.width * 0.2,\n y: a.y + a.height * 0.2,\n width: a.width * 0.6,\n height: a.height * 0.6\n };\n const bHitbox = {\n x: b.x + b.width * 0.2,\n y: b.y + b.height * 0.2,\n width: b.width * 0.6,\n height: b.height * 0.6\n };\n\n return (\n aHitbox.x < bHitbox.x + bHitbox.width &&\n aHitbox.x + aHitbox.width > bHitbox.x &&\n aHitbox.y < bHitbox.y + bHitbox.height &&\n aHitbox.y + aHitbox.height > bHitbox.y\n );\n }\n\n function updateCars() {\n cars.forEach(car => {\n car.y += car.speed;\n if (car.y > canvas.height) {\n car.y = -car.height;\n car.x = Math.random() * (canvas.width - car.width);\n score++;\n scoreDisplay.textContent = `Score: ${score}`;\n }\n if (isColliding(player, car)) {\n stopGame();\n ctx.fillStyle = 'white';\n ctx.font = '28px sans-serif';\n ctx.fillText(' Crash! Game Over ', 60, 300);\n }\n });\n }\n\n function spawnCar() {\n const img = enemyImages[Math.floor(Math.random() * enemyImages.length)];\n const width = 40;\n const height = img.height * (width \/ img.width);\n cars.push({\n x: Math.random() * (canvas.width - width),\n y: -height,\n width,\n height,\n speed: 2 + Math.random() * 3,\n image: img\n });\n }\n\n function gameLoop() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawBackground();\n drawPlayer();\n drawCars();\n updateCars();\n if (gameRunning) {\n gameLoopId = requestAnimationFrame(gameLoop);\n }\n }\n\n function startGame() {\n if (!gameRunning) {\n gameRunning = true;\n score = 0;\n cars = [];\n for (let i = 0; i < 5; i++) spawnCar();\n scoreDisplay.textContent = `Score: ${score}`;\n gameLoop();\n }\n }\n\n function stopGame() {\n gameRunning = false;\n cancelAnimationFrame(gameLoopId);\n }\n\n document.addEventListener('keydown', e => {\n if (!gameRunning) return;\n if (e.key === 'ArrowLeft' || e.key === 'a') {\n player.x -= player.speed;\n if (player.x < 0) player.x = 0;\n }\n if (e.key === 'ArrowRight' || e.key === 'd') {\n player.x += player.speed;\n if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;\n }\n });\n\n startBtn.addEventListener('click', startGame);\n stopBtn.addEventListener('click', stopGame);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Car Dodge Game Start Stop Score: 0<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1],"tags":[],"class_list":["post-2977","post","type-post","status-publish","format-standard","hentry","category-programming","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts\/2977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/comments?post=2977"}],"version-history":[{"count":4,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts\/2977\/revisions"}],"predecessor-version":[{"id":2987,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts\/2977\/revisions\/2987"}],"wp:attachment":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/media?parent=2977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/categories?post=2977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/tags?post=2977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2977,"date":"2025-09-06T16:51:40","date_gmt":"2025-09-06T16:51:40","guid":{"rendered":"https:\/\/garyhengeveld.com\/wordpress\/?p=2977"},"modified":"2025-09-06T19:14:15","modified_gmt":"2025-09-06T19:14:15","slug":"traffic","status":"publish","type":"post","link":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/","title":{"rendered":"traffic"},"content":{"rendered":"\n\n\n\n \n Car Dodge Game<\/title>\n <style>\n body {\n margin: 0;\n overflow: hidden;\n background-color: #000;\n font-family: sans-serif;\n color: white;\n }\n #controls {\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 2;\n }\n button {\n font-size: 1em;\n padding: 10px 20px;\n margin-right: 10px;\n cursor: pointer;\n background-color: #0af;\n border: none;\n border-radius: 5px;\n color: white;\n }\n #score {\n font-size: 1.2em;\n margin-top: 10px;\n }\n canvas {\n display: block;\n margin: 0 auto;\n background-color: #333;\n border: 3px solid #fff;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"controls\">\n <button id=\"startBtn\">Start<\/button>\n <button id=\"stopBtn\">Stop<\/button>\n <div id=\"score\">Score: 0<\/div>\n <\/div>\n <canvas id=\"gameCanvas\" width=\"400\" height=\"600\"><\/canvas>\n\n <script>\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const scoreDisplay = document.getElementById('score');\n\n let score = 0;\n let gameRunning = false;\n let gameLoopId;\n let cars = [];\n\n const player = {\n x: 180,\n y: 500,\n width: 40,\n height: 70,\n speed: 5\n };\n\n const bgImg = new Image();\n bgImg.src = 'road.png';\n let bgY = 0;\n\n const playerImg = new Image();\n playerImg.src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/player-car.png';\n\n const enemyImages = [\n new Image(),\n new Image(),\n new Image()\n ];\n enemyImages[0].src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/enemy-car1.png';\n enemyImages[1].src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/enemy-car2.png';\n enemyImages[2].src = 'https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2025\/09\/enemy-car3.png';\n\n function drawBackground() {\n bgY += 2;\n if (bgY >= canvas.height) bgY = 0;\n ctx.drawImage(bgImg, 0, bgY - canvas.height, canvas.width, canvas.height);\n ctx.drawImage(bgImg, 0, bgY, canvas.width, canvas.height);\n }\n\n function drawPlayer() {\n ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);\n }\n\n function drawCars() {\n cars.forEach(car => {\n ctx.drawImage(car.image, car.x, car.y, car.width, car.height);\n });\n }\n\n function isColliding(a, b) {\n const aHitbox = {\n x: a.x + a.width * 0.2,\n y: a.y + a.height * 0.2,\n width: a.width * 0.6,\n height: a.height * 0.6\n };\n const bHitbox = {\n x: b.x + b.width * 0.2,\n y: b.y + b.height * 0.2,\n width: b.width * 0.6,\n height: b.height * 0.6\n };\n\n return (\n aHitbox.x < bHitbox.x + bHitbox.width &&\n aHitbox.x + aHitbox.width > bHitbox.x &&\n aHitbox.y < bHitbox.y + bHitbox.height &&\n aHitbox.y + aHitbox.height > bHitbox.y\n );\n }\n\n function updateCars() {\n cars.forEach(car => {\n car.y += car.speed;\n if (car.y > canvas.height) {\n car.y = -car.height;\n car.x = Math.random() * (canvas.width - car.width);\n score++;\n scoreDisplay.textContent = `Score: ${score}`;\n }\n if (isColliding(player, car)) {\n stopGame();\n ctx.fillStyle = 'white';\n ctx.font = '28px sans-serif';\n ctx.fillText(' Crash! Game Over ', 60, 300);\n }\n });\n }\n\n function spawnCar() {\n const img = enemyImages[Math.floor(Math.random() * enemyImages.length)];\n const width = 40;\n const height = img.height * (width \/ img.width);\n cars.push({\n x: Math.random() * (canvas.width - width),\n y: -height,\n width,\n height,\n speed: 2 + Math.random() * 3,\n image: img\n });\n }\n\n function gameLoop() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawBackground();\n drawPlayer();\n drawCars();\n updateCars();\n if (gameRunning) {\n gameLoopId = requestAnimationFrame(gameLoop);\n }\n }\n\n function startGame() {\n if (!gameRunning) {\n gameRunning = true;\n score = 0;\n cars = [];\n for (let i = 0; i < 5; i++) spawnCar();\n scoreDisplay.textContent = `Score: ${score}`;\n gameLoop();\n }\n }\n\n function stopGame() {\n gameRunning = false;\n cancelAnimationFrame(gameLoopId);\n }\n\n document.addEventListener('keydown', e => {\n if (!gameRunning) return;\n if (e.key === 'ArrowLeft' || e.key === 'a') {\n player.x -= player.speed;\n if (player.x < 0) player.x = 0;\n }\n if (e.key === 'ArrowRight' || e.key === 'd') {\n player.x += player.speed;\n if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;\n }\n });\n\n startBtn.addEventListener('click', startGame);\n stopBtn.addEventListener('click', stopGame);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Car Dodge Game Start Stop Score: 0<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1],"tags":[],"class_list":["post-2977","post","type-post","status-publish","format-standard","hentry","category-programming","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts\/2977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/comments?post=2977"}],"version-history":[{"count":4,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts\/2977\/revisions"}],"predecessor-version":[{"id":2987,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/posts\/2977\/revisions\/2987"}],"wp:attachment":[{"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/media?parent=2977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/categories?post=2977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/garyhengeveld.com\/wordpress\/wp-json\/wp\/v2\/tags?post=2977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}