Skip to content

Commit b5df1a8

Browse files
PBJIPBJI
authored
Merge pull request #640 from Killer2OP/patch1
[ADDED]: Nokia3310_SnakeGame
2 parents 59812a4 + 26c7a9b commit b5df1a8

File tree

4 files changed

+241
-0
lines changed

4 files changed

+241
-0
lines changed

‎SnakeGame/Killer2OP/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Nokia3310-Snake
2+
A vanilla JavaScript game
3+
4+
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!!!
5+
6+
A vanilla JavaScript grid-based game | In this you will learn how to make a fully functional game of Nokia 3310 Snake. This is a total BEGINNERS introduction to JavaScript.
7+
8+
## Screenshot
9+
![image](https://github.com/Killer2OP/javascript-mini-projects/assets/111378171/4bc7056b-73e9-4e01-8680-b426bb35fe70)

‎SnakeGame/Killer2OP/app.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const squares = document.querySelectorAll('.grid div')
3+
const scoreDisplay = document.querySelector('span')
4+
const startBtn = document.querySelector('.start')
5+
6+
const width = 10
7+
let currentIndex = 0 //so first div in our grid
8+
let appleIndex = 0 //so first div in our grid
9+
let currentSnake = [2,1,0]
10+
let direction = 1
11+
let score = 0
12+
let speed = 0.9
13+
let intervalTime = 0
14+
let interval = 0
15+
16+
17+
//to start, and restart the game
18+
function startGame() {
19+
currentSnake.forEach(index => squares[index].classList.remove('snake'))
20+
squares[appleIndex].classList.remove('apple')
21+
clearInterval(interval)
22+
score = 0
23+
randomApple()
24+
direction = 1
25+
scoreDisplay.innerText = score
26+
intervalTime = 1000
27+
currentSnake = [2,1,0]
28+
currentIndex = 0
29+
currentSnake.forEach(index => squares[index].classList.add('snake'))
30+
interval = setInterval(moveOutcomes, intervalTime)
31+
}
32+
33+
34+
//function that deals with ALL the ove outcomes of the Snake
35+
function moveOutcomes() {
36+
37+
//deals with snake hitting border and snake hitting self
38+
if (
39+
(currentSnake[0] + width >= (width * width) && direction === width ) || //if snake hits bottom
40+
(currentSnake[0] % width === width -1 && direction === 1) || //if snake hits right wall
41+
(currentSnake[0] % width === 0 && direction === -1) || //if snake hits left wall
42+
(currentSnake[0] - width < 0 && direction === -width) || //if snake hits the top
43+
squares[currentSnake[0] + direction].classList.contains('snake') //if snake goes into itself
44+
) {
45+
return clearInterval(interval) //this will clear the interval if any of the above happen
46+
}
47+
48+
const tail = currentSnake.pop() //removes last ite of the array and shows it
49+
squares[tail].classList.remove('snake') //removes class of snake from the TAIL
50+
currentSnake.unshift(currentSnake[0] + direction) //gives direction to the head of the array
51+
52+
//deals with snake getting apple
53+
if(squares[currentSnake[0]].classList.contains('apple')) {
54+
squares[currentSnake[0]].classList.remove('apple')
55+
squares[tail].classList.add('snake')
56+
currentSnake.push(tail)
57+
randomApple()
58+
score++
59+
scoreDisplay.textContent = score
60+
clearInterval(interval)
61+
intervalTime = intervalTime * speed
62+
interval = setInterval(moveOutcomes, intervalTime)
63+
}
64+
squares[currentSnake[0]].classList.add('snake')
65+
}
66+
67+
68+
//generate new apple once apple is eaten
69+
function randomApple() {
70+
do{
71+
appleIndex = Math.floor(Math.random() * squares.length)
72+
} while(squares[appleIndex].classList.contains('snake')) //making sure apples dont appear on the snake
73+
squares[appleIndex].classList.add('apple')
74+
}
75+
76+
77+
//assign functions to keycodes
78+
function control(e) {
79+
squares[currentIndex].classList.remove('snake')
80+
81+
if(e.keyCode === 39) {
82+
direction = 1 //if we press the right arrow on our keyboard, the snake will go right one
83+
} else if (e.keyCode === 38) {
84+
direction = -width // if we press the up arrow, the snake will go back ten divs, appearing to go up
85+
} else if (e.keyCode === 37) {
86+
direction = -1 // if we press left, the snake will go left one div
87+
} else if (e.keyCode === 40) {
88+
direction = +width //if we press down, the snake head will instantly appear in the div ten divs from where you are now
89+
}
90+
}
91+
92+
document.addEventListener('keyup', control)
93+
startBtn.addEventListener('click', startGame)
94+
})

‎SnakeGame/Killer2OP/index.html

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="app.js" charset="utf-8"></script>
6+
<link rel="stylesheet" href="style.css">
7+
<title>Snake Tutorial</title>
8+
</head>
9+
<body>
10+
11+
<button class='start'>Start/Restart</button>
12+
<div class='score'>Score:<span>0</span></div>
13+
14+
<div class='grid'>
15+
<div></div>
16+
<div></div>
17+
<div></div>
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
<div></div>
23+
<div></div>
24+
<div></div>
25+
<div></div>
26+
<div></div>
27+
<div></div>
28+
<div></div>
29+
<div></div>
30+
<div></div>
31+
<div></div>
32+
<div></div>
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
<div></div>
37+
<div></div>
38+
<div></div>
39+
<div></div>
40+
<div></div>
41+
<div></div>
42+
<div></div>
43+
<div></div>
44+
<div></div>
45+
<div></div>
46+
<div></div>
47+
<div></div>
48+
<div></div>
49+
<div></div>
50+
<div></div>
51+
<div></div>
52+
<div></div>
53+
<div></div>
54+
<div></div>
55+
<div></div>
56+
<div></div>
57+
<div></div>
58+
<div></div>
59+
<div></div>
60+
<div></div>
61+
<div></div>
62+
<div></div>
63+
<div></div>
64+
<div></div>
65+
<div></div>
66+
<div></div>
67+
<div></div>
68+
<div></div>
69+
<div></div>
70+
<div></div>
71+
<div></div>
72+
<div></div>
73+
<div></div>
74+
<div></div>
75+
<div></div>
76+
<div></div>
77+
<div></div>
78+
<div></div>
79+
<div></div>
80+
<div></div>
81+
<div></div>
82+
<div></div>
83+
<div></div>
84+
<div></div>
85+
<div></div>
86+
<div></div>
87+
<div></div>
88+
<div></div>
89+
<div></div>
90+
<div></div>
91+
<div></div>
92+
<div></div>
93+
<div></div>
94+
<div></div>
95+
<div></div>
96+
<div></div>
97+
<div></div>
98+
<div></div>
99+
<div></div>
100+
<div></div>
101+
<div></div>
102+
<div></div>
103+
<div></div>
104+
<div></div>
105+
<div></div>
106+
<div></div>
107+
<div></div>
108+
<div></div>
109+
<div></div>
110+
<div></div>
111+
<div></div>
112+
<div></div>
113+
<div></div>
114+
<div></div>
115+
</div>
116+
117+
</body>
118+
</html>

‎SnakeGame/Killer2OP/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.grid {
2+
width: 200px;
3+
height: 200px;
4+
display: flex;
5+
flex-wrap: wrap;
6+
border-style: solid;
7+
}
8+
9+
.grid div {
10+
width: 20px;
11+
height: 20px;
12+
}
13+
14+
.snake {
15+
background-color: blue;
16+
}
17+
18+
.apple {
19+
background-color: purple;
20+
}

0 commit comments

Comments
 (0)