{"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<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title> 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 &#038;&#038;\n        aHitbox.x + aHitbox.width > bHitbox.x &&\n        aHitbox.y < bHitbox.y + bHitbox.height &#038;&#038;\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><\/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":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","footnotes":""},"categories":[21,1],"tags":[],"class_list":["post-2977","post","type-post","status-publish","format-standard","hentry","category-programming","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\r\n<title>traffic - GaryHengeveld<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/garyhengeveld.com\/wordpress\/traffic\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"traffic - GaryHengeveld\" \/>\r\n<meta property=\"og:description\" content=\"Car Dodge Game Start Stop Score: 0\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/garyhengeveld.com\/wordpress\/traffic\/\" \/>\r\n<meta property=\"og:site_name\" content=\"GaryHengeveld\" \/>\r\n<meta property=\"article:published_time\" content=\"2025-09-06T16:51:40+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2025-09-06T19:14:15+00:00\" \/>\r\n<meta name=\"author\" content=\"ghd796\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ghd796\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/\"},\"author\":{\"name\":\"ghd796\",\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/a56bd109b9611da934105651f63c1988\"},\"headline\":\"traffic\",\"datePublished\":\"2025-09-06T16:51:40+00:00\",\"dateModified\":\"2025-09-06T19:14:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/a56bd109b9611da934105651f63c1988\"},\"articleSection\":[\"Programming\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/\",\"url\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/\",\"name\":\"traffic - GaryHengeveld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/#website\"},\"datePublished\":\"2025-09-06T16:51:40+00:00\",\"dateModified\":\"2025-09-06T19:14:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/traffic\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"traffic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/\",\"name\":\"GaryHengeveld\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/a56bd109b9611da934105651f63c1988\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/a56bd109b9611da934105651f63c1988\",\"name\":\"ghd796\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/GLOGO.png\",\"url\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/GLOGO.png\",\"contentUrl\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/GLOGO.png\",\"width\":150,\"height\":150,\"caption\":\"ghd796\"},\"logo\":{\"@id\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/GLOGO.png\"},\"url\":\"https:\\\/\\\/garyhengeveld.com\\\/wordpress\\\/author\\\/ghd796\\\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"traffic - GaryHengeveld","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/","og_locale":"en_US","og_type":"article","og_title":"traffic - GaryHengeveld","og_description":"Car Dodge Game Start Stop Score: 0","og_url":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/","og_site_name":"GaryHengeveld","article_published_time":"2025-09-06T16:51:40+00:00","article_modified_time":"2025-09-06T19:14:15+00:00","author":"ghd796","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ghd796"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/#article","isPartOf":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/"},"author":{"name":"ghd796","@id":"https:\/\/garyhengeveld.com\/wordpress\/#\/schema\/person\/a56bd109b9611da934105651f63c1988"},"headline":"traffic","datePublished":"2025-09-06T16:51:40+00:00","dateModified":"2025-09-06T19:14:15+00:00","mainEntityOfPage":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/"},"wordCount":7,"publisher":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/#\/schema\/person\/a56bd109b9611da934105651f63c1988"},"articleSection":["Programming"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/","url":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/","name":"traffic - GaryHengeveld","isPartOf":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/#website"},"datePublished":"2025-09-06T16:51:40+00:00","dateModified":"2025-09-06T19:14:15+00:00","breadcrumb":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/garyhengeveld.com\/wordpress\/traffic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/garyhengeveld.com\/wordpress\/traffic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/garyhengeveld.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"traffic"}]},{"@type":"WebSite","@id":"https:\/\/garyhengeveld.com\/wordpress\/#website","url":"https:\/\/garyhengeveld.com\/wordpress\/","name":"GaryHengeveld","description":"","publisher":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/#\/schema\/person\/a56bd109b9611da934105651f63c1988"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/garyhengeveld.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/garyhengeveld.com\/wordpress\/#\/schema\/person\/a56bd109b9611da934105651f63c1988","name":"ghd796","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2026\/03\/GLOGO.png","url":"https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2026\/03\/GLOGO.png","contentUrl":"https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2026\/03\/GLOGO.png","width":150,"height":150,"caption":"ghd796"},"logo":{"@id":"https:\/\/garyhengeveld.com\/wordpress\/wp-content\/uploads\/2026\/03\/GLOGO.png"},"url":"https:\/\/garyhengeveld.com\/wordpress\/author\/ghd796\/"}]}},"_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}]}}