{"id":128,"date":"2023-12-06T09:20:34","date_gmt":"2023-12-06T09:20:34","guid":{"rendered":"https:\/\/warrevanhee.be\/?page_id=128"},"modified":"2023-12-06T09:30:56","modified_gmt":"2023-12-06T09:30:56","slug":"snake","status":"publish","type":"page","link":"https:\/\/warrevanhee.be\/?page_id=128","title":{"rendered":"Snake"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"128\" class=\"elementor elementor-128\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e5b40cb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e5b40cb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a6a7eb7\" data-id=\"a6a7eb7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dc4bdce elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"dc4bdce\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 20-09-2023 *\/\n.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#0c0d0e;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:\"\";border-bottom:0;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%);--flex-grow:var(--container-widget-flex-grow)}<\/style>\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ccc0f3f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ccc0f3f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e83d4eb\" data-id=\"e83d4eb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-00661c1 elementor-widget elementor-widget-html\" data-id=\"00661c1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <body> \r\n  <title>Basic Snake HTML Game<\/title>\r\n  <meta charset=\"UTF-8\">\r\n  <style>\r\n  html, body {\r\n    height: 100%;\r\n    margin: 0;\r\n  }\r\n\r\n  body {\r\n    background: black;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  canvas {\r\n    border: 1px solid white;\r\n  }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<canvas width=\"400\" height=\"400\" id=\"game\"><\/canvas>\r\n<script>\r\nvar canvas = document.getElementById('game');\r\nvar context = canvas.getContext('2d');\r\n\r\nvar grid = 16;\r\nvar count = 0;\r\n\r\nvar snake = {\r\n  x: 160,\r\n  y: 160,\r\n\r\n  \/\/ snake velocity. moves one grid length every frame in either the x or y direction\r\n  dx: grid,\r\n  dy: 0,\r\n\r\n  \/\/ keep track of all grids the snake body occupies\r\n  cells: [],\r\n\r\n  \/\/ length of the snake. grows when eating an apple\r\n  maxCells: 4\r\n};\r\nvar apple = {\r\n  x: 320,\r\n  y: 320\r\n};\r\n\r\n\/\/ get random whole numbers in a specific range\r\n\/\/ @see https:\/\/stackoverflow.com\/a\/1527820\/2124254\r\nfunction getRandomInt(min, max) {\r\n  return Math.floor(Math.random() * (max - min)) + min;\r\n}\r\n\r\n\/\/ game loop\r\nfunction loop() {\r\n  requestAnimationFrame(loop);\r\n\r\n  \/\/ slow game loop to 15 fps instead of 60 (60\/15 = 4)\r\n  if (++count < 4) {\r\n    return;\r\n  }\r\n\r\n  count = 0;\r\n  context.clearRect(0,0,canvas.width,canvas.height);\r\n\r\n  \/\/ move snake by it's velocity\r\n  snake.x += snake.dx;\r\n  snake.y += snake.dy;\r\n\r\n  \/\/ wrap snake position horizontally on edge of screen\r\n  if (snake.x < 0) {\r\n    snake.x = canvas.width - grid;\r\n  }\r\n  else if (snake.x >= canvas.width) {\r\n    snake.x = 0;\r\n  }\r\n\r\n  \/\/ wrap snake position vertically on edge of screen\r\n  if (snake.y < 0) {\r\n    snake.y = canvas.height - grid;\r\n  }\r\n  else if (snake.y >= canvas.height) {\r\n    snake.y = 0;\r\n  }\r\n\r\n  \/\/ keep track of where snake has been. front of the array is always the head\r\n  snake.cells.unshift({x: snake.x, y: snake.y});\r\n\r\n  \/\/ remove cells as we move away from them\r\n  if (snake.cells.length > snake.maxCells) {\r\n    snake.cells.pop();\r\n  }\r\n\r\n  \/\/ draw apple\r\n  context.fillStyle = 'red';\r\n  context.fillRect(apple.x, apple.y, grid-1, grid-1);\r\n\r\n  \/\/ draw snake one cell at a time\r\n  context.fillStyle = 'green';\r\n  snake.cells.forEach(function(cell, index) {\r\n\r\n    \/\/ drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is\r\n    context.fillRect(cell.x, cell.y, grid-1, grid-1);\r\n\r\n    \/\/ snake ate apple\r\n    if (cell.x === apple.x && cell.y === apple.y) {\r\n      snake.maxCells++;\r\n\r\n      \/\/ canvas is 400x400 which is 25x25 grids\r\n      apple.x = getRandomInt(0, 25) * grid;\r\n      apple.y = getRandomInt(0, 25) * grid;\r\n    }\r\n\r\n    \/\/ check collision with all cells after this one (modified bubble sort)\r\n    for (var i = index + 1; i < snake.cells.length; i++) {\r\n\r\n      \/\/ snake occupies same space as a body part. reset game\r\n      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {\r\n        snake.x = 160;\r\n        snake.y = 160;\r\n        snake.cells = [];\r\n        snake.maxCells = 4;\r\n        snake.dx = grid;\r\n        snake.dy = 0;\r\n\r\n        apple.x = getRandomInt(0, 25) * grid;\r\n        apple.y = getRandomInt(0, 25) * grid;\r\n      }\r\n    }\r\n  });\r\n}\r\n\r\n\/\/ listen to keyboard events to move the snake\r\ndocument.addEventListener('keydown', function(e) {\r\n  \/\/ prevent snake from backtracking on itself by checking that it's\r\n  \/\/ not already moving on the same axis (pressing left while moving\r\n  \/\/ left won't do anything, and pressing right while moving left\r\n  \/\/ shouldn't let you collide with your own body)\r\n\r\n  \/\/ left arrow key\r\n  if (e.which === 37 && snake.dx === 0) {\r\n    snake.dx = -grid;\r\n    snake.dy = 0;\r\n  }\r\n  \/\/ up arrow key\r\n  else if (e.which === 38 && snake.dy === 0) {\r\n    snake.dy = -grid;\r\n    snake.dx = 0;\r\n  }\r\n  \/\/ right arrow key\r\n  else if (e.which === 39 && snake.dx === 0) {\r\n    snake.dx = grid;\r\n    snake.dy = 0;\r\n  }\r\n  \/\/ down arrow key\r\n  else if (e.which === 40 && snake.dy === 0) {\r\n    snake.dy = grid;\r\n    snake.dx = 0;\r\n  }\r\n});\r\n\r\n\/\/ start the game\r\nrequestAnimationFrame(loop);\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Basic Snake HTML Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","footnotes":""},"class_list":["post-128","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Snake -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/warrevanhee.be\/?page_id=128\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Snake -\" \/>\n<meta property=\"og:description\" content=\"Basic Snake HTML Game\" \/>\n<meta property=\"og:url\" content=\"https:\/\/warrevanhee.be\/?page_id=128\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T09:30:56+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verwachte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/warrevanhee.be\/?page_id=128\",\"url\":\"https:\/\/warrevanhee.be\/?page_id=128\",\"name\":\"Snake -\",\"isPartOf\":{\"@id\":\"https:\/\/warrevanhee.be\/#website\"},\"datePublished\":\"2023-12-06T09:20:34+00:00\",\"dateModified\":\"2023-12-06T09:30:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/warrevanhee.be\/?page_id=128#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/warrevanhee.be\/?page_id=128\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/warrevanhee.be\/?page_id=128#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/warrevanhee.be\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snake\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/warrevanhee.be\/#website\",\"url\":\"https:\/\/warrevanhee.be\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/warrevanhee.be\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Snake -","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:\/\/warrevanhee.be\/?page_id=128","og_locale":"nl_NL","og_type":"article","og_title":"Snake -","og_description":"Basic Snake HTML Game","og_url":"https:\/\/warrevanhee.be\/?page_id=128","article_modified_time":"2023-12-06T09:30:56+00:00","twitter_card":"summary_large_image","twitter_misc":{"Verwachte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/warrevanhee.be\/?page_id=128","url":"https:\/\/warrevanhee.be\/?page_id=128","name":"Snake -","isPartOf":{"@id":"https:\/\/warrevanhee.be\/#website"},"datePublished":"2023-12-06T09:20:34+00:00","dateModified":"2023-12-06T09:30:56+00:00","breadcrumb":{"@id":"https:\/\/warrevanhee.be\/?page_id=128#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/warrevanhee.be\/?page_id=128"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/warrevanhee.be\/?page_id=128#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/warrevanhee.be\/"},{"@type":"ListItem","position":2,"name":"Snake"}]},{"@type":"WebSite","@id":"https:\/\/warrevanhee.be\/#website","url":"https:\/\/warrevanhee.be\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/warrevanhee.be\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/warrevanhee.be\/index.php?rest_route=\/wp\/v2\/pages\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/warrevanhee.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/warrevanhee.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/warrevanhee.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/warrevanhee.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=128"}],"version-history":[{"count":7,"href":"https:\/\/warrevanhee.be\/index.php?rest_route=\/wp\/v2\/pages\/128\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/warrevanhee.be\/index.php?rest_route=\/wp\/v2\/pages\/128\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/warrevanhee.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}