Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Snake Game #497

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Snake Game #497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f90cdd0
Added Snake Game
CodeDrinks270 Oct 22, 2023
fea7260
Merge branch 'main' into main
CodeDrinks270 Oct 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions Snake Game/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
})
118 changes: 118 additions & 0 deletions Snake Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="app.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
<title>Snake Game</title>
</head>
<body>

<button class='start'>Start/Restart</button>
<div class='score'>Score:<span>0</span></div>

<div class='grid'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

</body>
</html>
20 changes: 20 additions & 0 deletions Snake Game/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}