{"id":171,"date":"2023-12-07T13:29:42","date_gmt":"2023-12-07T13:29:42","guid":{"rendered":"https:\/\/gillesviaene.be\/?page_id=171"},"modified":"2023-12-07T13:32:58","modified_gmt":"2023-12-07T13:32:58","slug":"snake","status":"publish","type":"page","link":"https:\/\/gillesviaene.be\/?page_id=171","title":{"rendered":"Snake"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"171\" class=\"elementor elementor-171\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-024c382 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"024c382\" 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-5e833b5\" data-id=\"5e833b5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f5eb77c elementor-widget elementor-widget-html\" data-id=\"f5eb77c\" 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>\r\n\r\n\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<\/div>\n\t\t<\/section>\n\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-171","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - 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:\/\/gillesviaene.be\/?page_id=171\" \/>\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:\/\/gillesviaene.be\/?page_id=171\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-07T13:32:58+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:\/\/gillesviaene.be\/?page_id=171\",\"url\":\"https:\/\/gillesviaene.be\/?page_id=171\",\"name\":\"Snake -\",\"isPartOf\":{\"@id\":\"https:\/\/gillesviaene.be\/#website\"},\"datePublished\":\"2023-12-07T13:29:42+00:00\",\"dateModified\":\"2023-12-07T13:32:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/gillesviaene.be\/?page_id=171#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gillesviaene.be\/?page_id=171\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gillesviaene.be\/?page_id=171#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/gillesviaene.be\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snake\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gillesviaene.be\/#website\",\"url\":\"https:\/\/gillesviaene.be\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gillesviaene.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:\/\/gillesviaene.be\/?page_id=171","og_locale":"nl_NL","og_type":"article","og_title":"Snake -","og_description":"Basic Snake HTML Game","og_url":"https:\/\/gillesviaene.be\/?page_id=171","article_modified_time":"2023-12-07T13:32:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Verwachte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gillesviaene.be\/?page_id=171","url":"https:\/\/gillesviaene.be\/?page_id=171","name":"Snake -","isPartOf":{"@id":"https:\/\/gillesviaene.be\/#website"},"datePublished":"2023-12-07T13:29:42+00:00","dateModified":"2023-12-07T13:32:58+00:00","breadcrumb":{"@id":"https:\/\/gillesviaene.be\/?page_id=171#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gillesviaene.be\/?page_id=171"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gillesviaene.be\/?page_id=171#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gillesviaene.be\/"},{"@type":"ListItem","position":2,"name":"Snake"}]},{"@type":"WebSite","@id":"https:\/\/gillesviaene.be\/#website","url":"https:\/\/gillesviaene.be\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gillesviaene.be\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/gillesviaene.be\/index.php?rest_route=\/wp\/v2\/pages\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gillesviaene.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gillesviaene.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gillesviaene.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gillesviaene.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=171"}],"version-history":[{"count":4,"href":"https:\/\/gillesviaene.be\/index.php?rest_route=\/wp\/v2\/pages\/171\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/gillesviaene.be\/index.php?rest_route=\/wp\/v2\/pages\/171\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/gillesviaene.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}