so i made a snake game using ai with html and css and js i didn’t know how to i have only did it with python <\/p>\n\n\n\n
styles.css<\/em><\/strong><\/p>\n\n\n\n script.js<\/em><\/strong><\/p>\n\n\n\n index.html <\/em><\/strong><\/p>\n\n\n\n so i made a snake game using ai with html and css and js i didn’t know how to i […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","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":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-87","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/87\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}body {\n background: #111;\n color: white;\n text-align: center;\n font-family: Arial, sans-serif;\n}\n\n#gameCanvas {\n background: #222;\n border: 3px solid #0f0;\n margin-top: 20px;\n}\n#gameCanvas {\n border: 4px solid #0f0;\n background: #111; \n}<\/code><\/pre>\n\n\n\nconst canvas = document.getElementById(\"gameCanvas\");\nconst ctx = canvas.getContext(\"2d\");\n\nconst box = 20;\nconst gridSize = 1000; \n\nlet snake = [{ x: 25 * box, y: 25 * box }];\nlet direction = \"RIGHT\";\n\nfunction randomFood() {\n return {\n x: Math.floor(Math.random() * (gridSize \/ box)) * box,\n y: Math.floor(Math.random() * (gridSize \/ box)) * box\n };\n}\n\nlet food = randomFood();\n\ndocument.addEventListener(\"keydown\", changeDirection);\n\nfunction changeDirection(e) {\n const key = e.key.toLowerCase();\n\n if ((key === \"arrowup\" || key === \"w\") && direction !== \"DOWN\") direction = \"UP\";\n else if ((key === \"arrowdown\" || key === \"s\") && direction !== \"UP\") direction = \"DOWN\";\n else if ((key === \"arrowleft\" || key === \"a\") && direction !== \"RIGHT\") direction = \"LEFT\";\n else if ((key === \"arrowright\" || key === \"d\") && direction !== \"LEFT\") direction = \"RIGHT\";\n}\n\nfunction drawGame() {\n ctx.clearRect(0, 0, gridSize, gridSize);\n\n\n ctx.fillStyle = \"red\";\n ctx.fillRect(food.x, food.y, box, box);\n\n\n let head = { ...snake[0] };\n\n if (direction === \"UP\") head.y -= box;\n if (direction === \"DOWN\") head.y += box;\n if (direction === \"LEFT\") head.x -= box;\n if (direction === \"RIGHT\") head.x += box;\n\n\n if (\n head.x < 0 || head.x >= gridSize ||\n head.y < 0 || head.y >= gridSize ||\n snake.some(segment => segment.x === head.x && segment.y === head.y)\n ) {\n alert(\"Game Over!\");\n document.location.reload();\n return;\n }\n\n\n snake.unshift(head);\n\n \n if (head.x === food.x && head.y === food.y) {\n food = randomFood();\n } else {\n snake.pop();\n }\n\n \n ctx.fillStyle = \"#0f0\";\n snake.forEach(segment => {\n ctx.fillRect(segment.x, segment.y, box, box);\n });\n}\nctx.strokeStyle = \"#0f0\";\nctx.lineWidth = 4;\nctx.strokeRect(0, 0, gridSize, gridSize);\n\nsetInterval(drawGame, 100);\n<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Snake Game<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n <h1>Snake Game<\/h1>\n <canvas id=\"gameCanvas\" width=\"1000\" height=\"1000\"><\/canvas>\n\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"