{"id":9135,"date":"2023-09-29T05:16:06","date_gmt":"2023-09-29T05:16:06","guid":{"rendered":"https:\/\/www.swarmingbee.co.uk\/?page_id=9135"},"modified":"2023-10-08T10:09:04","modified_gmt":"2023-10-08T10:09:04","slug":"snake-1982","status":"publish","type":"page","link":"https:\/\/www.swarmingbee.co.uk\/snake-1982\/","title":{"rendered":"Snake 1982"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n \n \n Snake Game JavaScript | CodingNepal<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.3.0\/css\/all.min.css\">\n <script src=\"script.js\" defer><\/script>\n <\/head>\n <body>\n <div class=\"wrapper\">\n <div class=\"game-details\">\n <span class=\"score\">Score: 0<\/span>\n <span class=\"high-score\">High Score: 0<\/span>\n <\/div>\n <div class=\"play-board\"><\/div>\n <div class=\"controls\">\n <i data-key=\"ArrowLeft\" class=\"fa-solid fa-arrow-left-long\"><\/i>\n <i data-key=\"ArrowUp\" class=\"fa-solid fa-arrow-up-long\"><\/i>\n <i data-key=\"ArrowRight\" class=\"fa-solid fa-arrow-right-long\"><\/i>\n <i data-key=\"ArrowDown\" class=\"fa-solid fa-arrow-down-long\"><\/i>\n <\/div>\n <\/div>\n <\/body>\n<\/html>\n<script>\nconst playBoard = document.querySelector(\".play-board\");\nconst scoreElement = document.querySelector(\".score\");\nconst highScoreElement = document.querySelector(\".high-score\");\nconst controls = document.querySelectorAll(\".controls i\");\nlet gameOver = false;\nlet foodX, foodY;\nlet snakeX = 5, snakeY = 5;\nlet velocityX = 0, velocityY = 0;\nlet snakeBody = [];\nlet setIntervalId;\nlet score = 0;\n\/\/ Getting high score from the local storage\nlet highScore = localStorage.getItem(\"high-score\") || 0;\nhighScoreElement.innerText = `High Score: ${highScore}`;\nconst updateFoodPosition = () => {\n \/\/ Passing a random 1 - 30 value as food position\n foodX = Math.floor(Math.random() * 30) + 1;\n foodY = Math.floor(Math.random() * 30) + 1;\n}\nconst handleGameOver = () => {\n \/\/ Clearing the timer and reloading the page on game over\n clearInterval(setIntervalId);\n alert(\"Game Over! Press OK to replay...\");\n location.reload();\n}\nconst changeDirection = e => {\n \/\/ Changing velocity value based on key press\n if(e.key === \"ArrowUp\" && velocityY != 1) {\n velocityX = 0;\n velocityY = -1;\n } else if(e.key === \"ArrowDown\" && velocityY != -1) {\n velocityX = 0;\n velocityY = 1;\n } else if(e.key === \"ArrowLeft\" && velocityX != 1) {\n velocityX = -1;\n velocityY = 0;\n } else if(e.key === \"ArrowRight\" && velocityX != -1) {\n velocityX = 1;\n velocityY = 0;\n }\n}\n\/\/ Calling changeDirection on each key click and passing key dataset value as an object\ncontrols.forEach(button => button.addEventListener(\"click\", () => changeDirection({ key: button.dataset.key })));\nconst initGame = () => {\n if(gameOver) return handleGameOver();\n let html = `<div class=\"food\" style=\"grid-area: ${foodY} \/ ${foodX}\"><\/div>`;\n \/\/ Checking if the snake hit the food\n if(snakeX === foodX && snakeY === foodY) {\n updateFoodPosition();\n snakeBody.push([foodY, foodX]); \/\/ Pushing food position to snake body array\n score++; \/\/ increment score by 1\n highScore = score >= highScore ? score : highScore;\n localStorage.setItem(\"high-score\", highScore);\n scoreElement.innerText = `Score: ${score}`;\n highScoreElement.innerText = `High Score: ${highScore}`;\n }\n \/\/ Updating the snake's head position based on the current velocity\n snakeX += velocityX;\n snakeY += velocityY;\n \n \/\/ Shifting forward the values of the elements in the snake body by one\n for (let i = snakeBody.length - 1; i > 0; i--) {\n snakeBody[i] = snakeBody[i - 1];\n }\n snakeBody[0] = [snakeX, snakeY]; \/\/ Setting first element of snake body to current snake position\n \/\/ Checking if the snake's head is out of wall, if so setting gameOver to true\n if(snakeX <= 0 || snakeX > 30 || snakeY <= 0 || snakeY > 30) {\n return gameOver = true;\n }\n for (let i = 0; i < snakeBody.length; i++) {\n \/\/ Adding a div for each part of the snake's body\n html += `<div class=\"head\" style=\"grid-area: ${snakeBody[i][1]} \/ ${snakeBody[i][0]}\"><\/div>`;\n \/\/ Checking if the snake head hit the body, if so set gameOver to true\n if (i !== 0 && snakeBody[0][1] === snakeBody[i][1] && snakeBody[0][0] === snakeBody[i][0]) {\n gameOver = true;\n }\n }\n playBoard.innerHTML = html;\n}\nupdateFoodPosition();\nsetIntervalId = setInterval(initGame, 100);\ndocument.addEventListener(\"keyup\", changeDirection);\n<\/script>\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Snake Game JavaScript | CodingNepal Score: 0 High Score: 0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/pages\/9135"}],"collection":[{"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/comments?post=9135"}],"version-history":[{"count":10,"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/pages\/9135\/revisions"}],"predecessor-version":[{"id":10301,"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/pages\/9135\/revisions\/10301"}],"wp:attachment":[{"href":"https:\/\/www.swarmingbee.co.uk\/wp-json\/wp\/v2\/media?parent=9135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}