├── style.css
├── index.html
├── README.md
└── app.js
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | font-family: Arial, Helvetica, sans-serif;
5 | background-color: paleturquoise;
6 | text-align: center;
7 | }
8 |
9 | h2{
10 | font-size: 2em;
11 | color: darkgreen;
12 | margin-top: 10px;
13 | }
14 |
15 | #msg{
16 | margin-bottom: 1em;
17 | margin-top: 8px;
18 |
19 | }
20 |
21 | #gameboard{
22 | border: 3px solid black;
23 | }
24 |
25 | #score{
26 | margin-top: 1em;
27 | font-size: 1.2em;
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Snake Game
7 |
8 |
9 |
10 |
11 | Snake Game
12 | Press space to pause or continue
13 |
17 |
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🐍 Snake Game
2 |
3 | A classic Snake game built using HTML, CSS, and JavaScript. Control the snake, eat food to grow longer, and avoid crashing into walls or yourself!
4 |
5 |
6 | ---
7 |
8 | ## 🎮 Game Features
9 |
10 | - 🕹️ Arrow key controls
11 | - ⏸️ Press **spacebar** to pause or continue
12 | - 🍎 Red block represents food
13 | - 📈 Score is displayed at the bottom
14 | - 💀 Displays **Game Over** when the snake hits a wall or itself
15 | - 🎨 Simple and clean UI with smooth animation
16 |
17 | ---
18 |
19 |
20 | ## 🛠️ Technologies Used
21 |
22 | - **HTML5**
23 | - **CSS3**
24 | - **JavaScript**
25 |
26 | ---
27 |
28 | ## 📁 Folder Structure
29 |
30 | snake-game/
31 | ├── index.html
32 | ├── style.css
33 | ├── app.js
34 |
35 | ---
36 |
37 | ## 🔧 How to Run Locally
38 |
39 | 1. Clone the repository:
40 |
41 |
42 | git clone https://github.com/Uvajanani/Snake-Game.git
43 | 2. Navigate to the project folder:
44 |
45 | cd Snake-Game
46 |
47 |
48 | ## ⭐ Show Your Support
49 | If you liked this project, consider giving it a ⭐ on GitHub!
50 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const gameBoard = document.getElementById('gameBoard')
2 | const context = gameBoard.getContext('2d')
3 | const scoreText = document.getElementById('scoreVal')
4 |
5 | const WIDTH = gameBoard.width
6 | const HEIGHT = gameBoard.height
7 | const UNIT = 25
8 |
9 | let foodX
10 | let foodY
11 | let xVel = 25
12 | let yVel = 0
13 | let score = 0
14 | let active = true
15 | let started = false
16 | let paused = false
17 | let snake = [
18 | {x:UNIT*3,y:0},
19 | {x:UNIT*2,y:0},
20 | {x:UNIT,y:0},
21 | {x:0,y:0}
22 | ]
23 |
24 | window.addEventListener('keydown',keyPress)
25 | startGame();
26 |
27 | function startGame(){
28 | context.fillStyle = '#212121'
29 | context.fillRect(0,0,WIDTH,HEIGHT)
30 | createFood()
31 | displayFood()
32 | drawSnake()
33 | }
34 |
35 | function clearBoard(){
36 | context.fillStyle = '#212121'
37 | context.fillRect(0,0,WIDTH,HEIGHT)
38 | }
39 | function createFood(){
40 | foodX = Math.floor(Math.random()*WIDTH/UNIT)*UNIT
41 | foodY = Math.floor(Math.random()*HEIGHT/UNIT)*UNIT
42 | }
43 |
44 | function displayFood(){
45 | context.fillStyle = 'red'
46 | context.fillRect(foodX,foodY,UNIT,UNIT)
47 | }
48 |
49 | function drawSnake(){
50 | context.fillStyle = 'blue'
51 | context.strokeStyle = '#212121'
52 | snake.forEach((snakePart) =>{
53 | context.fillRect(snakePart.x,snakePart.y,UNIT,UNIT)
54 | context.strokeRect(snakePart.x,snakePart.y,UNIT,UNIT)
55 |
56 | })
57 | }
58 |
59 | function moveSnake(){
60 | const head = {x:snake[0].x+xVel,
61 | y:snake[0].y+yVel}
62 | snake.unshift(head)
63 | if(snake[0].x == foodX && snake[0].y == foodY)
64 | {
65 | score+=1
66 | scoreText.textContent = score
67 | createFood()
68 | }
69 | else
70 | {
71 | snake.pop()
72 | }
73 |
74 | }
75 |
76 | function nextTick(){
77 | if(active && !paused){
78 | setTimeout(() =>{
79 | clearBoard()
80 | displayFood()
81 | moveSnake()
82 | drawSnake()
83 | checkGameOver()
84 | nextTick()
85 | },100)
86 | }
87 | else if(!active){
88 | clearBoard()
89 | context.font = "bold 50px serif"
90 | context.fillStyle = "white"
91 | context.textAlign = "center"
92 | context.fillText("Game Over!!!",WIDTH/2,HEIGHT/2)
93 | }
94 |
95 | }
96 |
97 | function keyPress(event){
98 | if(!started)
99 | {
100 | started = true
101 | nextTick()
102 | }
103 | if(event.keyCode === 32){
104 | console.log('clicked')
105 | if(paused){
106 | paused = false
107 | nextTick()
108 | }
109 | else{
110 | paused = true
111 | }
112 | }
113 | const LEFT = 37
114 | const UP = 38
115 | const RIGHT = 39
116 | const DOWN = 40
117 | switch(true){
118 | case(event.keyCode == LEFT && xVel != UNIT):
119 | xVel = -UNIT
120 | yVel = 0
121 | break
122 | case(event.keyCode == RIGHT && xVel != -UNIT):
123 | xVel = UNIT
124 | yVel = 0
125 | break
126 | case(event.keyCode == UP && yVel != UNIT):
127 | xVel = 0
128 | yVel = -UNIT
129 | break
130 | case(event.keyCode == DOWN && yVel != -UNIT):
131 | xVel = 0
132 | yVel = UNIT
133 | break
134 |
135 | }
136 | }
137 |
138 | function checkGameOver(){
139 | switch(true){
140 | case(snake[0].x<0):
141 | case(snake[0].x>=WIDTH):
142 | case(snake[0].y<0):
143 | case(snake[0].y>=HEIGHT):
144 | active = false
145 | break
146 |
147 | }
148 |
149 | for(let i=1;i