diff --git a/Snake Game/app.js b/Snake Game/app.js new file mode 100644 index 00000000..cfc40de3 --- /dev/null +++ b/Snake Game/app.js @@ -0,0 +1,94 @@ +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) + }) \ No newline at end of file diff --git a/Snake Game/index.html b/Snake Game/index.html new file mode 100644 index 00000000..50a91592 --- /dev/null +++ b/Snake Game/index.html @@ -0,0 +1,118 @@ + + + + + + + Snake Game + + + + +
Score:0
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/Snake Game/style.css b/Snake Game/style.css new file mode 100644 index 00000000..bcb02c02 --- /dev/null +++ b/Snake Game/style.css @@ -0,0 +1,20 @@ +.grid { + width: 200px; + height: 200px; + display: flex; + flex-wrap: wrap; + border-style: solid; + } + + .grid div { + width: 20px; + height: 20px; + } + + .snake { + background-color: blue; + } + + .apple { + background-color: purple; + } \ No newline at end of file