Repository: kubowania/Nokia3310-Snake
Branch: master
Commit: 3f96f06ed107
Files: 5
Total size: 8.3 KB
Directory structure:
gitextract_qacmur9o/
├── .github/
│ └── FUNDING.yml
├── README.md
├── app.js
├── index.html
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: kubowania
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: README.md
================================================
# Nokia3310-Snake
A vanilla JavaScript game with tutorial
For the full walkthrough to coding the game, please visit [here](https://www.youtube.com/watch?v=GWPGz9hrVMk)
I 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!!!
A 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:
* project set up
* linking your JavaScript and CSS files to your HTML file
* event listeners
* query Selectors
* arrow functions
* forEach
* setting time intervals and countdowns
### MIT Licence
Copyright (c) 2020 Ania Kubow
Permission 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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*Translation: Ofcourse you can use this for you project! Just make sure to say where you got this from :)
THE 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.
================================================
FILE: app.js
================================================
document.addEventListener('DOMContentLoaded', () => {
const squares = document.querySelectorAll('.grid div')
const scoreDisplay = document.querySelector('span')
const startBtn = document.querySelector('.start')
const width = 10
let currentIndex = 0 //so first div in our grid
let appleIndex = 0 //so first div in our grid
let currentSnake = [2,1,0]
let direction = 1
let score = 0
let speed = 0.9
let intervalTime = 0
let interval = 0
//to start, and restart the game
function startGame() {
currentSnake.forEach(index => squares[index].classList.remove('snake'))
squares[appleIndex].classList.remove('apple')
clearInterval(interval)
score = 0
randomApple()
direction = 1
scoreDisplay.innerText = score
intervalTime = 1000
currentSnake = [2,1,0]
currentIndex = 0
currentSnake.forEach(index => squares[index].classList.add('snake'))
interval = setInterval(moveOutcomes, intervalTime)
}
//function that deals with ALL the ove outcomes of the Snake
function moveOutcomes() {
//deals with snake hitting border and snake hitting self
if (
(currentSnake[0] + width >= (width * width) && direction === width ) || //if snake hits bottom
(currentSnake[0] % width === width -1 && direction === 1) || //if snake hits right wall
(currentSnake[0] % width === 0 && direction === -1) || //if snake hits left wall
(currentSnake[0] - width < 0 && direction === -width) || //if snake hits the top
squares[currentSnake[0] + direction].classList.contains('snake') //if snake goes into itself
) {
return clearInterval(interval) //this will clear the interval if any of the above happen
}
const tail = currentSnake.pop() //removes last ite of the array and shows it
squares[tail].classList.remove('snake') //removes class of snake from the TAIL
currentSnake.unshift(currentSnake[0] + direction) //gives direction to the head of the array
//deals with snake getting apple
if(squares[currentSnake[0]].classList.contains('apple')) {
squares[currentSnake[0]].classList.remove('apple')
squares[tail].classList.add('snake')
currentSnake.push(tail)
randomApple()
score++
scoreDisplay.textContent = score
clearInterval(interval)
intervalTime = intervalTime * speed
interval = setInterval(moveOutcomes, intervalTime)
}
squares[currentSnake[0]].classList.add('snake')
}
//generate new apple once apple is eaten
function randomApple() {
do{
appleIndex = Math.floor(Math.random() * squares.length)
} while(squares[appleIndex].classList.contains('snake')) //making sure apples dont appear on the snake
squares[appleIndex].classList.add('apple')
}
//assign functions to keycodes
function control(e) {
squares[currentIndex].classList.remove('snake')
if(e.keyCode === 39) {
direction = 1 //if we press the right arrow on our keyboard, the snake will go right one
} else if (e.keyCode === 38) {
direction = -width // if we press the up arrow, the snake will go back ten divs, appearing to go up
} else if (e.keyCode === 37) {
direction = -1 // if we press left, the snake will go left one div
} else if (e.keyCode === 40) {
direction = +width //if we press down, the snake head will instantly appear in the div ten divs from where you are now
}
}
document.addEventListener('keyup', control)
startBtn.addEventListener('click', startGame)
})
================================================
FILE: index.html
================================================
Snake Tutorial