Basic Snake HTML Game<\/title>\n<meta charset=\"UTF-8\">\n<style>\nhtml, body {\nheight: 100%;\nmargin: 0;\n }\nbody {\nbackground: black;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n }\ncanvas {\nborder: 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\/\/ the canvas width & height, snake x & y, and the apple x & y, all need to be a multiples of the grid size in order for collision detection to work\n\/\/ (e.g. 16 * 25 = 400)\nvar grid = 16;\nvar count = 0;\nvar snake = {\nx: 160,\ny: 160,\n\/\/ snake velocity. moves one grid length every frame in either the x or y direction\ndx: grid,\ndy: 0,\n\/\/ keep track of all grids the snake body occupies\ncells: [],\n\/\/ length of the snake. grows when eating an apple\nmaxCells: 4\n};\nvar apple = {\nx: 320,\ny: 320\n};\n\/\/ get random whole numbers in a specific range\n\/\/ @see https:\/\/stackoverflow.com\/a\/1527820\/2124254\nfunction getRandomInt(min, max) {\nreturn Math.floor(Math.random() * (max - min)) + min;\n}\n\/\/ game loop\nfunction loop() {\nrequestAnimationFrame(loop);\n\/\/ slow game loop to 15 fps instead of 60 (60\/15 = 4)\nif (++count < 4) {\nreturn;\n}\ncount = 0;\ncontext.clearRect(0,0,canvas.width,canvas.height);\n\/\/ move snake by it's velocity\nsnake.x += snake.dx;\nsnake.y += snake.dy;\n\/\/ wrap snake position horizontally on edge of screen\nif (snake.x < 0) {\nsnake.x = canvas.width - grid;\n}\nelse if (snake.x >= canvas.width) {\nsnake.x = 0;\n}\n\/\/ wrap snake position vertically on edge of screen\nif (snake.y < 0) {\nsnake.y = canvas.height - grid;\n}\nelse if (snake.y >= canvas.height) {\nsnake.y = 0;\n}\n\/\/ keep track of where snake has been. front of the array is always the head\nsnake.cells.unshift({x: snake.x, y: snake.y});\n\/\/ remove cells as we move away from them\nif (snake.cells.length > snake.maxCells) {\nsnake.cells.pop();\n}\n\/\/ draw apple\ncontext.fillStyle = 'red';\ncontext.fillRect(apple.x, apple.y, grid-1, grid-1);\n\/\/ draw snake one cell at a time\ncontext.fillStyle = 'green';\nsnake.cells.forEach(function(cell, index) {\n\/\/ drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is\ncontext.fillRect(cell.x, cell.y, grid-1, grid-1);\n\/\/ snake ate apple\nif (cell.x === apple.x && cell.y === apple.y) {\nsnake.maxCells++;\n\/\/ canvas is 400x400 which is 25x25 grids\napple.x = getRandomInt(0, 25) * grid;\napple.y = getRandomInt(0, 25) * grid;\n}\n\/\/ check collision with all cells after this one (modified bubble sort)\nfor (var i = index + 1; i < snake.cells.length; i++) {\n\/\/ snake occupies same space as a body part. reset game\nif (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {\nsnake.x = 160;\nsnake.y = 160;\nsnake.cells = [];\nsnake.maxCells = 4;\nsnake.dx = grid;\nsnake.dy = 0;\napple.x = getRandomInt(0, 25) * grid;\napple.y = getRandomInt(0, 25) * grid;\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\/\/ left arrow key\nif (e.which === 37 && snake.dx === 0) {\nsnake.dx = -grid;\nsnake.dy = 0;\n}\n\/\/ up arrow key\nelse if (e.which === 38 && snake.dy === 0) {\nsnake.dy = -grid;\nsnake.dx = 0;\n}\n\/\/ right arrow key\nelse if (e.which === 39 && snake.dx === 0) {\nsnake.dx = grid;\nsnake.dy = 0;\n}\n\/\/ down arrow key\nelse if (e.which === 40 && snake.dy === 0) {\nsnake.dy = grid;\nsnake.dx = 0;\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0158b2d e-flex e-con-boxed e-con\" data-id=\"0158b2d\" data-element_type=\"container\" data-settings=\"{"content_width":"boxed"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb07865 elementor-widget elementor-widget-image\" data-id=\"bb07865\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 20-08-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/trafficlightman.com\/index.php\/b\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"106\" height=\"44\" src=\"https:\/\/trafficlightman.com\/wp-content\/uploads\/2023\/08\/help-1.gif\" class=\"elementor-animation-pulse-shrink attachment-large size-large wp-image-1109\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages\/933"}],"collection":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/comments?post=933"}],"version-history":[{"count":10,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages\/933\/revisions"}],"predecessor-version":[{"id":1353,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages\/933\/revisions\/1353"}],"wp:attachment":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/media?parent=933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

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

\n\t\t\t\t

\n\t\t\t\n\n\nBasic Snake HTML Game<\/title>\n<meta charset=\"UTF-8\">\n<style>\nhtml, body {\nheight: 100%;\nmargin: 0;\n }\nbody {\nbackground: black;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n }\ncanvas {\nborder: 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\/\/ the canvas width & height, snake x & y, and the apple x & y, all need to be a multiples of the grid size in order for collision detection to work\n\/\/ (e.g. 16 * 25 = 400)\nvar grid = 16;\nvar count = 0;\nvar snake = {\nx: 160,\ny: 160,\n\/\/ snake velocity. moves one grid length every frame in either the x or y direction\ndx: grid,\ndy: 0,\n\/\/ keep track of all grids the snake body occupies\ncells: [],\n\/\/ length of the snake. grows when eating an apple\nmaxCells: 4\n};\nvar apple = {\nx: 320,\ny: 320\n};\n\/\/ get random whole numbers in a specific range\n\/\/ @see https:\/\/stackoverflow.com\/a\/1527820\/2124254\nfunction getRandomInt(min, max) {\nreturn Math.floor(Math.random() * (max - min)) + min;\n}\n\/\/ game loop\nfunction loop() {\nrequestAnimationFrame(loop);\n\/\/ slow game loop to 15 fps instead of 60 (60\/15 = 4)\nif (++count < 4) {\nreturn;\n}\ncount = 0;\ncontext.clearRect(0,0,canvas.width,canvas.height);\n\/\/ move snake by it's velocity\nsnake.x += snake.dx;\nsnake.y += snake.dy;\n\/\/ wrap snake position horizontally on edge of screen\nif (snake.x < 0) {\nsnake.x = canvas.width - grid;\n}\nelse if (snake.x >= canvas.width) {\nsnake.x = 0;\n}\n\/\/ wrap snake position vertically on edge of screen\nif (snake.y < 0) {\nsnake.y = canvas.height - grid;\n}\nelse if (snake.y >= canvas.height) {\nsnake.y = 0;\n}\n\/\/ keep track of where snake has been. front of the array is always the head\nsnake.cells.unshift({x: snake.x, y: snake.y});\n\/\/ remove cells as we move away from them\nif (snake.cells.length > snake.maxCells) {\nsnake.cells.pop();\n}\n\/\/ draw apple\ncontext.fillStyle = 'red';\ncontext.fillRect(apple.x, apple.y, grid-1, grid-1);\n\/\/ draw snake one cell at a time\ncontext.fillStyle = 'green';\nsnake.cells.forEach(function(cell, index) {\n\/\/ drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is\ncontext.fillRect(cell.x, cell.y, grid-1, grid-1);\n\/\/ snake ate apple\nif (cell.x === apple.x && cell.y === apple.y) {\nsnake.maxCells++;\n\/\/ canvas is 400x400 which is 25x25 grids\napple.x = getRandomInt(0, 25) * grid;\napple.y = getRandomInt(0, 25) * grid;\n}\n\/\/ check collision with all cells after this one (modified bubble sort)\nfor (var i = index + 1; i < snake.cells.length; i++) {\n\/\/ snake occupies same space as a body part. reset game\nif (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {\nsnake.x = 160;\nsnake.y = 160;\nsnake.cells = [];\nsnake.maxCells = 4;\nsnake.dx = grid;\nsnake.dy = 0;\napple.x = getRandomInt(0, 25) * grid;\napple.y = getRandomInt(0, 25) * grid;\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\/\/ left arrow key\nif (e.which === 37 && snake.dx === 0) {\nsnake.dx = -grid;\nsnake.dy = 0;\n}\n\/\/ up arrow key\nelse if (e.which === 38 && snake.dy === 0) {\nsnake.dy = -grid;\nsnake.dx = 0;\n}\n\/\/ right arrow key\nelse if (e.which === 39 && snake.dx === 0) {\nsnake.dx = grid;\nsnake.dy = 0;\n}\n\/\/ down arrow key\nelse if (e.which === 40 && snake.dy === 0) {\nsnake.dy = grid;\nsnake.dx = 0;\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0158b2d e-flex e-con-boxed e-con\" data-id=\"0158b2d\" data-element_type=\"container\" data-settings=\"{"content_width":"boxed"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb07865 elementor-widget elementor-widget-image\" data-id=\"bb07865\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 20-08-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/trafficlightman.com\/index.php\/b\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"106\" height=\"44\" src=\"https:\/\/trafficlightman.com\/wp-content\/uploads\/2023\/08\/help-1.gif\" class=\"elementor-animation-pulse-shrink attachment-large size-large wp-image-1109\" alt=\"\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages\/933"}],"collection":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/comments?post=933"}],"version-history":[{"count":10,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages\/933\/revisions"}],"predecessor-version":[{"id":1353,"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/pages\/933\/revisions\/1353"}],"wp:attachment":[{"href":"https:\/\/trafficlightman.com\/index.php\/wp-json\/wp\/v2\/media?parent=933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}