Basic Snake HTML Game<\/title>\n <meta charset=\"UTF-8\">\n <style>\n html, body {\n height: 100%;\n margin: 0;\n }\n\n body {\n background: black;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n canvas {\n border: 1px solid white;\n }\n <\/style>\n<\/head>\n<body>\n<canvas width=\"400\" height=\"400\" id=\"game\"><\/canvas>\n<script>\nvar canvas = document.getElementById('game');\nvar context = canvas.getContext('2d');\n\nvar grid = 16;\nvar count = 0;\n\nvar snake = {\n x: 160,\n y: 160,\n\n \/\/ snake velocity. moves one grid length every frame in either the x or y direction\n dx: grid,\n dy: 0,\n\n \/\/ keep track of all grids the snake body occupies\n cells: [],\n\n \/\/ length of the snake. grows when eating an apple\n maxCells: 4\n};\nvar apple = {\n x: 320,\n y: 320\n};\n\n\/\/ get random whole numbers in a specific range\n\/\/ @see https:\/\/stackoverflow.com\/a\/1527820\/2124254\nfunction getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min)) + min;\n}\n\n\/\/ game loop\nfunction loop() {\n requestAnimationFrame(loop);\n\n \/\/ slow game loop to 15 fps instead of 60 (60\/15 = 4)\n if (++count < 4) {\n return;\n }\n\n count = 0;\n context.clearRect(0,0,canvas.width,canvas.height);\n\n \/\/ move snake by it's velocity\n snake.x += snake.dx;\n snake.y += snake.dy;\n\n \/\/ wrap snake position horizontally on edge of screen\n if (snake.x < 0) {\n snake.x = canvas.width - grid;\n }\n else if (snake.x >= canvas.width) {\n snake.x = 0;\n }\n\n \/\/ wrap snake position vertically on edge of screen\n if (snake.y < 0) {\n snake.y = canvas.height - grid;\n }\n else if (snake.y >= canvas.height) {\n snake.y = 0;\n }\n\n \/\/ keep track of where snake has been. front of the array is always the head\n snake.cells.unshift({x: snake.x, y: snake.y});\n\n \/\/ remove cells as we move away from them\n if (snake.cells.length > snake.maxCells) {\n snake.cells.pop();\n }\n\n \/\/ draw apple\n context.fillStyle = 'red';\n context.fillRect(apple.x, apple.y, grid-1, grid-1);\n\n \/\/ draw snake one cell at a time\n context.fillStyle = 'green';\n snake.cells.forEach(function(cell, index) {\n\n \/\/ drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is\n context.fillRect(cell.x, cell.y, grid-1, grid-1);\n\n \/\/ snake ate apple\n if (cell.x === apple.x && cell.y === apple.y) {\n snake.maxCells++;\n\n \/\/ canvas is 400x400 which is 25x25 grids\n apple.x = getRandomInt(0, 25) * grid;\n apple.y = getRandomInt(0, 25) * grid;\n }\n\n \/\/ check collision with all cells after this one (modified bubble sort)\n for (var i = index + 1; i < snake.cells.length; i++) {\n\n \/\/ snake occupies same space as a body part. reset game\n if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {\n snake.x = 160;\n snake.y = 160;\n snake.cells = [];\n snake.maxCells = 4;\n snake.dx = grid;\n snake.dy = 0;\n\n apple.x = getRandomInt(0, 25) * grid;\n apple.y = getRandomInt(0, 25) * grid;\n }\n }\n });\n}\n\n\/\/ listen to keyboard events to move the snake\ndocument.addEventListener('keydown', function(e) {\n \/\/ prevent snake from backtracking on itself by checking that it's\n \/\/ not already moving on the same axis (pressing left while moving\n \/\/ left won't do anything, and pressing right while moving left\n \/\/ shouldn't let you collide with your own body)\n\n \/\/ left arrow key\n if (e.which === 37 && snake.dx === 0) {\n snake.dx = -grid;\n snake.dy = 0;\n }\n \/\/ up arrow key\n else if (e.which === 38 && snake.dy === 0) {\n snake.dy = -grid;\n snake.dx = 0;\n }\n \/\/ right arrow key\n else if (e.which === 39 && snake.dx === 0) {\n snake.dx = grid;\n snake.dy = 0;\n }\n \/\/ down arrow key\n else if (e.which === 40 && snake.dy === 0) {\n snake.dy = grid;\n snake.dx = 0;\n }\n});\n\n\/\/ start the game\nrequestAnimationFrame(loop);\n<\/script>\n<\/body>\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-458","page","type-page","status-publish","hentry"],"yoast_head":"\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:\/\/student8514555.be\/?page_id=458\" \/>\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:\/\/student8514555.be\/?page_id=458\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T09:36:55+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:\/\/student8514555.be\/?page_id=458\",\"url\":\"https:\/\/student8514555.be\/?page_id=458\",\"name\":\"Snake -\",\"isPartOf\":{\"@id\":\"https:\/\/student8514555.be\/#website\"},\"datePublished\":\"2023-12-06T09:31:19+00:00\",\"dateModified\":\"2023-12-06T09:36:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/student8514555.be\/?page_id=458#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/student8514555.be\/?page_id=458\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/student8514555.be\/?page_id=458#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/student8514555.be\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snake\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/student8514555.be\/#website\",\"url\":\"https:\/\/student8514555.be\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/student8514555.be\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n","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:\/\/student8514555.be\/?page_id=458","og_locale":"nl_NL","og_type":"article","og_title":"Snake -","og_description":"Basic Snake HTML Game","og_url":"https:\/\/student8514555.be\/?page_id=458","article_modified_time":"2023-12-06T09:36:55+00:00","twitter_card":"summary_large_image","twitter_misc":{"Verwachte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/student8514555.be\/?page_id=458","url":"https:\/\/student8514555.be\/?page_id=458","name":"Snake -","isPartOf":{"@id":"https:\/\/student8514555.be\/#website"},"datePublished":"2023-12-06T09:31:19+00:00","dateModified":"2023-12-06T09:36:55+00:00","breadcrumb":{"@id":"https:\/\/student8514555.be\/?page_id=458#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/student8514555.be\/?page_id=458"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/student8514555.be\/?page_id=458#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/student8514555.be\/"},{"@type":"ListItem","position":2,"name":"Snake"}]},{"@type":"WebSite","@id":"https:\/\/student8514555.be\/#website","url":"https:\/\/student8514555.be\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/student8514555.be\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages\/458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/student8514555.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=458"}],"version-history":[{"count":4,"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages\/458\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages\/458\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n \n Basic Snake HTML Game<\/title>\n <meta charset=\"UTF-8\">\n <style>\n html, body {\n height: 100%;\n margin: 0;\n }\n\n body {\n background: black;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n canvas {\n border: 1px solid white;\n }\n <\/style>\n<\/head>\n<body>\n<canvas width=\"400\" height=\"400\" id=\"game\"><\/canvas>\n<script>\nvar canvas = document.getElementById('game');\nvar context = canvas.getContext('2d');\n\nvar grid = 16;\nvar count = 0;\n\nvar snake = {\n x: 160,\n y: 160,\n\n \/\/ snake velocity. moves one grid length every frame in either the x or y direction\n dx: grid,\n dy: 0,\n\n \/\/ keep track of all grids the snake body occupies\n cells: [],\n\n \/\/ length of the snake. grows when eating an apple\n maxCells: 4\n};\nvar apple = {\n x: 320,\n y: 320\n};\n\n\/\/ get random whole numbers in a specific range\n\/\/ @see https:\/\/stackoverflow.com\/a\/1527820\/2124254\nfunction getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min)) + min;\n}\n\n\/\/ game loop\nfunction loop() {\n requestAnimationFrame(loop);\n\n \/\/ slow game loop to 15 fps instead of 60 (60\/15 = 4)\n if (++count < 4) {\n return;\n }\n\n count = 0;\n context.clearRect(0,0,canvas.width,canvas.height);\n\n \/\/ move snake by it's velocity\n snake.x += snake.dx;\n snake.y += snake.dy;\n\n \/\/ wrap snake position horizontally on edge of screen\n if (snake.x < 0) {\n snake.x = canvas.width - grid;\n }\n else if (snake.x >= canvas.width) {\n snake.x = 0;\n }\n\n \/\/ wrap snake position vertically on edge of screen\n if (snake.y < 0) {\n snake.y = canvas.height - grid;\n }\n else if (snake.y >= canvas.height) {\n snake.y = 0;\n }\n\n \/\/ keep track of where snake has been. front of the array is always the head\n snake.cells.unshift({x: snake.x, y: snake.y});\n\n \/\/ remove cells as we move away from them\n if (snake.cells.length > snake.maxCells) {\n snake.cells.pop();\n }\n\n \/\/ draw apple\n context.fillStyle = 'red';\n context.fillRect(apple.x, apple.y, grid-1, grid-1);\n\n \/\/ draw snake one cell at a time\n context.fillStyle = 'green';\n snake.cells.forEach(function(cell, index) {\n\n \/\/ drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is\n context.fillRect(cell.x, cell.y, grid-1, grid-1);\n\n \/\/ snake ate apple\n if (cell.x === apple.x && cell.y === apple.y) {\n snake.maxCells++;\n\n \/\/ canvas is 400x400 which is 25x25 grids\n apple.x = getRandomInt(0, 25) * grid;\n apple.y = getRandomInt(0, 25) * grid;\n }\n\n \/\/ check collision with all cells after this one (modified bubble sort)\n for (var i = index + 1; i < snake.cells.length; i++) {\n\n \/\/ snake occupies same space as a body part. reset game\n if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {\n snake.x = 160;\n snake.y = 160;\n snake.cells = [];\n snake.maxCells = 4;\n snake.dx = grid;\n snake.dy = 0;\n\n apple.x = getRandomInt(0, 25) * grid;\n apple.y = getRandomInt(0, 25) * grid;\n }\n }\n });\n}\n\n\/\/ listen to keyboard events to move the snake\ndocument.addEventListener('keydown', function(e) {\n \/\/ prevent snake from backtracking on itself by checking that it's\n \/\/ not already moving on the same axis (pressing left while moving\n \/\/ left won't do anything, and pressing right while moving left\n \/\/ shouldn't let you collide with your own body)\n\n \/\/ left arrow key\n if (e.which === 37 && snake.dx === 0) {\n snake.dx = -grid;\n snake.dy = 0;\n }\n \/\/ up arrow key\n else if (e.which === 38 && snake.dy === 0) {\n snake.dy = -grid;\n snake.dx = 0;\n }\n \/\/ right arrow key\n else if (e.which === 39 && snake.dx === 0) {\n snake.dx = grid;\n snake.dy = 0;\n }\n \/\/ down arrow key\n else if (e.which === 40 && snake.dy === 0) {\n snake.dy = grid;\n snake.dx = 0;\n }\n});\n\n\/\/ start the game\nrequestAnimationFrame(loop);\n<\/script>\n<\/body>\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-458","page","type-page","status-publish","hentry"],"yoast_head":"\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:\/\/student8514555.be\/?page_id=458\" \/>\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:\/\/student8514555.be\/?page_id=458\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-06T09:36:55+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:\/\/student8514555.be\/?page_id=458\",\"url\":\"https:\/\/student8514555.be\/?page_id=458\",\"name\":\"Snake -\",\"isPartOf\":{\"@id\":\"https:\/\/student8514555.be\/#website\"},\"datePublished\":\"2023-12-06T09:31:19+00:00\",\"dateModified\":\"2023-12-06T09:36:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/student8514555.be\/?page_id=458#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/student8514555.be\/?page_id=458\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/student8514555.be\/?page_id=458#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/student8514555.be\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snake\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/student8514555.be\/#website\",\"url\":\"https:\/\/student8514555.be\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/student8514555.be\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n","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:\/\/student8514555.be\/?page_id=458","og_locale":"nl_NL","og_type":"article","og_title":"Snake -","og_description":"Basic Snake HTML Game","og_url":"https:\/\/student8514555.be\/?page_id=458","article_modified_time":"2023-12-06T09:36:55+00:00","twitter_card":"summary_large_image","twitter_misc":{"Verwachte leestijd":"1 minuut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/student8514555.be\/?page_id=458","url":"https:\/\/student8514555.be\/?page_id=458","name":"Snake -","isPartOf":{"@id":"https:\/\/student8514555.be\/#website"},"datePublished":"2023-12-06T09:31:19+00:00","dateModified":"2023-12-06T09:36:55+00:00","breadcrumb":{"@id":"https:\/\/student8514555.be\/?page_id=458#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/student8514555.be\/?page_id=458"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/student8514555.be\/?page_id=458#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/student8514555.be\/"},{"@type":"ListItem","position":2,"name":"Snake"}]},{"@type":"WebSite","@id":"https:\/\/student8514555.be\/#website","url":"https:\/\/student8514555.be\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/student8514555.be\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages\/458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/student8514555.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=458"}],"version-history":[{"count":4,"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages\/458\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/student8514555.be\/index.php?rest_route=\/wp\/v2\/pages\/458\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/student8514555.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}