[
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: kubowania\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n"
  },
  {
    "path": "README.md",
    "content": "# Nokia3310-Snake\nA vanilla JavaScript game with tutorial\n\nFor the full walkthrough to coding the game, please visit [here](https://www.youtube.com/watch?v=GWPGz9hrVMk)\n\nI have kept the styling at a bare miniumum for you to go wild and make it your own. Please tag me as I would LOVE to see your game!!!\n\nA vanilla JavaScript grid-based game | In this tutorial you will learn how to make a fully functional game of Nokia 3310 Snake. This is a total BEGINNERS introduction to JavaScript, in which you will cover the following:\n\n* project set up\n* linking your JavaScript and CSS files to your HTML file\n* event listeners\n* query Selectors\n* arrow functions\n* forEach\n* setting time intervals and countdowns\n\n\n### MIT Licence\n\nCopyright (c) 2020 Ania Kubow\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*Translation: Ofcourse you can use this for you project! Just make sure to say where you got this from :)\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n \n"
  },
  {
    "path": "app.js",
    "content": "document.addEventListener('DOMContentLoaded', () => {\n  const squares = document.querySelectorAll('.grid div')\n  const scoreDisplay = document.querySelector('span')\n  const startBtn = document.querySelector('.start')\n\n  const width = 10\n  let currentIndex = 0 //so first div in our grid\n  let appleIndex = 0 //so first div in our grid\n  let currentSnake = [2,1,0] \n  let direction = 1\n  let score = 0\n  let speed = 0.9\n  let intervalTime = 0\n  let interval = 0\n\n\n  //to start, and restart the game\n  function startGame() {\n    currentSnake.forEach(index => squares[index].classList.remove('snake'))\n    squares[appleIndex].classList.remove('apple')\n    clearInterval(interval)\n    score = 0\n    randomApple()\n    direction = 1\n    scoreDisplay.innerText = score\n    intervalTime = 1000\n    currentSnake = [2,1,0]\n    currentIndex = 0\n    currentSnake.forEach(index => squares[index].classList.add('snake'))\n    interval = setInterval(moveOutcomes, intervalTime)\n  }\n\n\n  //function that deals with ALL the ove outcomes of the Snake\n  function moveOutcomes() {\n\n    //deals with snake hitting border and snake hitting self\n    if (\n      (currentSnake[0] + width >= (width * width) && direction === width ) || //if snake hits bottom\n      (currentSnake[0] % width === width -1 && direction === 1) || //if snake hits right wall\n      (currentSnake[0] % width === 0 && direction === -1) || //if snake hits left wall\n      (currentSnake[0] - width < 0 && direction === -width) ||  //if snake hits the top\n      squares[currentSnake[0] + direction].classList.contains('snake') //if snake goes into itself\n    ) {\n      return clearInterval(interval) //this will clear the interval if any of the above happen\n    }\n\n    const tail = currentSnake.pop() //removes last ite of the array and shows it\n    squares[tail].classList.remove('snake')  //removes class of snake from the TAIL\n    currentSnake.unshift(currentSnake[0] + direction) //gives direction to the head of the array\n\n    //deals with snake getting apple\n    if(squares[currentSnake[0]].classList.contains('apple')) {\n      squares[currentSnake[0]].classList.remove('apple')\n      squares[tail].classList.add('snake')\n      currentSnake.push(tail)\n      randomApple()\n      score++\n      scoreDisplay.textContent = score\n      clearInterval(interval)\n      intervalTime = intervalTime * speed\n      interval = setInterval(moveOutcomes, intervalTime)\n    }\n    squares[currentSnake[0]].classList.add('snake')\n  }\n\n\n  //generate new apple once apple is eaten\n  function randomApple() {\n    do{\n      appleIndex = Math.floor(Math.random() * squares.length)\n    } while(squares[appleIndex].classList.contains('snake')) //making sure apples dont appear on the snake\n    squares[appleIndex].classList.add('apple')\n  }\n\n\n  //assign functions to keycodes\n  function control(e) {\n    squares[currentIndex].classList.remove('snake')\n\n    if(e.keyCode === 39) {\n      direction = 1 //if we press the right arrow on our keyboard, the snake will go right one\n    } else if (e.keyCode === 38) {\n      direction = -width // if we press the up arrow, the snake will go back ten divs, appearing to go up\n    } else if (e.keyCode === 37) {\n      direction = -1 // if we press left, the snake will go left one div\n    } else if (e.keyCode === 40) {\n      direction = +width //if we press down, the snake head will instantly appear in the div ten divs from where you are now\n    }\n  }\n\n  document.addEventListener('keyup', control)\n  startBtn.addEventListener('click', startGame)\n})\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n  <head>\n    <meta charset=\"utf-8\">\n    <script src=\"app.js\" charset=\"utf-8\"></script>\n    <link rel=\"stylesheet\" href=\"style.css\">\n    <title>Snake Tutorial</title>\n  </head>\n  <body>\n\n    <button class='start'>Start/Restart</button>\n    <div class='score'>Score:<span>0</span></div>\n\n    <div class='grid'>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n      <div></div>\n    </div>\n\n  </body>\n</html>\n"
  },
  {
    "path": "style.css",
    "content": ".grid {\n  width: 200px;\n  height: 200px;\n  display: flex;\n  flex-wrap: wrap;\n  border-style: solid;\n}\n\n.grid div {\n  width: 20px;\n  height: 20px;\n}\n\n.snake {\n  background-color: blue;\n}\n\n.apple {\n  background-color: purple;\n}\n"
  }
]