Skip to content

Commit 940b07c

Browse files
author
Amanchib
committed
Initial commit
0 parents  commit 940b07c

File tree

6 files changed

+303
-0
lines changed

6 files changed

+303
-0
lines changed

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎bg.jpg‎

6.97 KB
Loading

‎food.png‎

15.8 KB
Loading

‎index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Snake Game</title>
5+
<style>
6+
html, body { height: 100%; margin: 0; }
7+
body { background: black; overflow: hidden;
8+
9+
height: 100%;}
10+
canvas { border: 1px solid white; }
11+
.text-center{
12+
text-align:center;}
13+
#ID{color:fuchsia; font-family: monospace; margin-left: 530px;
14+
15+
text-align: center;
16+
margin-left: 690px;
17+
}
18+
#ID{
19+
20+
width: 500px;
21+
height: 20px;
22+
23+
24+
border-top: 1px;
25+
border-top-color: #1287A5;
26+
27+
28+
29+
30+
}
31+
32+
canvas{
33+
/* margin-left: 180px;*/
34+
margin-top: -60px;
35+
width: 500px;
36+
height: 500px;
37+
border: 10px solid #1287A5;
38+
39+
background-image: url('snake.jpg');
40+
background-size: 100% 100%;
41+
42+
border-radius: 20px;
43+
44+
45+
}
46+
ul{
47+
overflow: hidden;
48+
font-size: 30px; text-align: center; color: aqua;
49+
border-top: 0px;
50+
}
51+
li{
52+
display: inline-block;
53+
}
54+
</style>
55+
</head>
56+
<body onload="GetFromLocalStorage()">
57+
<h1 style="text-align:center; color:saddlebrown; font-family: Cursive; font-size: 50px; margin-top: 1px;"> Snake Game </h1><br>
58+
59+
60+
<font id="ID1" > </font>
61+
<div class="text-center">
62+
<canvas width="400" height="400" id="snakegame"> </canvas></div>
63+
<font id="ID"style="font-size: 40px;" > </font>
64+
<div style="color: white; height: 75px; border: 2px solid white;">
65+
66+
67+
<ul style="list-style-type:circle; " >
68+
<li>P ->Pause</li>
69+
<li>....Enter ->New Game</li>
70+
<li>....UP</li>
71+
<li>....DOWN</li>
72+
<li>....RIGHT</li>
73+
<li>....LEFT</li>
74+
</ul>
75+
76+
</div>
77+
<script src="s.js"></script>
78+
</body>
79+
80+
</html>

‎s.js‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
var canvas = document.getElementById('snakegame');
2+
var context = canvas.getContext('2d');
3+
var grid = 16;
4+
var count = 0;
5+
var score = 0;
6+
var flag;
7+
var inter;
8+
var snake =
9+
{
10+
x : 160,
11+
y : 160 ,
12+
cells : [{x:160 , y:160} , {x:144 , y:160}] ,
13+
};
14+
var apple = {
15+
x: 320,
16+
y: 320
17+
};
18+
19+
// draw apple
20+
function drawApple()
21+
{
22+
context.fillStyle = '#EE7486';
23+
context.fillRect(apple.x, apple.y, grid-1, grid-1);
24+
for(let i=0 ; i<snake.cells.length ; i++)
25+
{
26+
if(snake.cells[i].x == apple.x && snake.cells[i].y == apple.y)
27+
{
28+
snake.cells.unshift({x: apple.x , y: apple.y}) ;
29+
var number1 = Math.floor((Math.random() * 24) + 1);
30+
var number2 = Math.floor((Math.random() * 24) + 1);
31+
apple.x = number1 * 16;
32+
apple.y = number2 * 16;
33+
for(let i = 0 ; i < snake.cells.length ; i++)
34+
{
35+
if( apple.x == snake.cells[i].x && apple.y == snake.cells[i].y)
36+
{
37+
drawApple();
38+
}
39+
}
40+
break;
41+
}
42+
}
43+
//drawSnake();
44+
}
45+
46+
drawApple();
47+
48+
// draw snake
49+
function drawSnake()
50+
{
51+
52+
if(snake.cells.length != 0){
53+
context.fillStyle = '#ECF34D';
54+
context.fillRect(snake.cells[0].x, snake.cells[0].y, grid-1, grid-1);}
55+
56+
context.fillStyle = '#A7A2A2';
57+
for(let i=1 ; i<snake.cells.length ; i++)
58+
context.fillRect(snake.cells[i].x, snake.cells[i].y, grid-1, grid-1);
59+
60+
61+
StoreInLocalStorage();
62+
if(snake.cells.length <= 2)
63+
{}
64+
else{
65+
count = snake.cells.length -2;
66+
score = (count*5);}
67+
document.getElementById("ID").innerHTML = "Score = " + score;
68+
69+
}
70+
71+
function StoreInLocalStorage()
72+
{
73+
localStorage.snake = JSON.stringify(snake);
74+
}
75+
76+
function GetFromLocalStorage()
77+
{
78+
if(!localStorage.snake)
79+
{
80+
localStorage.snake = JSON.stringify([]);
81+
snake = {
82+
x : 160,
83+
y : 160 ,
84+
cells : [{x:160 , y:160} , {x:144 , y:160}] ,
85+
};
86+
drawSnake();
87+
}
88+
else
89+
{
90+
snake = JSON.parse(localStorage.snake);
91+
if(snake.cells.length == 0)
92+
{
93+
snake = {
94+
x : 160,
95+
y : 160 ,
96+
cells : [{x:160 , y:160} , {x:144 , y:160}] ,
97+
};
98+
}
99+
console.log(snake);
100+
drawSnake();
101+
}
102+
}
103+
104+
//drawSnake();
105+
function moveSnake( dx , dy)
106+
{
107+
snake.x += dx ;
108+
snake.y += dy ;
109+
if(snake.x >= 400 || snake.x < 0 || snake.y >= 400 || snake.y < 0)
110+
{
111+
GameOver();
112+
}
113+
for(let i=0 ; i<snake.cells.length ; i++)
114+
{
115+
if(snake.x == snake.cells[i].x && snake.y == snake.cells[i].y)
116+
{
117+
GameOver();
118+
}
119+
}
120+
snake.cells.unshift({x: snake.x , y: snake.y}) ; // Insert at 0th position
121+
snake.cells.pop(); // remove the last element
122+
drawSnake();
123+
}
124+
125+
function GameOver()
126+
{
127+
context.clearRect(0, 0, canvas.width,canvas.height);// Clear the Canvas
128+
snake.cells = [];
129+
apple = {x:-100,y:-20};
130+
context.fillStyle = 'white';
131+
context.font = "50px italic";
132+
context.textAlign = "center";
133+
context.fillText("Game Over" , canvas.width/2, canvas.height/2);
134+
}
135+
136+
// listen to keyboard events to move the snake
137+
document.addEventListener('keydown', function(e)
138+
{
139+
let dx = 0, dy = 0 ;
140+
if (e.keyCode == 37 )
141+
{
142+
if(flag == 39)
143+
{}
144+
else
145+
{
146+
clearInterval(inter);
147+
inter = setInterval(function(){
148+
dx = -grid; flag=37;
149+
dy = 0;
150+
context.clearRect(0, 0, canvas.width,canvas.height);// Clear the Canvas
151+
moveSnake(dx,dy);
152+
drawApple();
153+
},100);
154+
}
155+
}
156+
// up arrow key
157+
else if (e.keyCode == 38 )
158+
{
159+
if(flag == 40)
160+
{}
161+
else
162+
{
163+
clearInterval(inter);
164+
inter = setInterval(function(){
165+
dx = 0;
166+
dy = -grid; flag=38;
167+
context.clearRect(0, 0, canvas.width,canvas.height);// Clear the Canvas
168+
moveSnake(dx,dy);
169+
drawApple();
170+
},100);
171+
}
172+
}
173+
// right arrow key
174+
else if (e.keyCode == 39 )
175+
{
176+
if(flag == 37)
177+
{}
178+
else
179+
{
180+
clearInterval(inter);
181+
inter = setInterval(function(){
182+
dx = grid; flag=39;
183+
dy = 0;
184+
context.clearRect(0, 0, canvas.width,canvas.height);// Clear the Canvas
185+
moveSnake(dx,dy);
186+
drawApple();
187+
},100);
188+
}
189+
}
190+
// down arrow key
191+
else if (e.keyCode == 40 )
192+
{
193+
if(flag == 38)
194+
{}
195+
else
196+
{
197+
clearInterval(inter);
198+
inter = setInterval(function(){
199+
dx = 0;
200+
dy = grid; flag=40;
201+
context.clearRect(0, 0, canvas.width,canvas.height);// Clear the Canvas
202+
moveSnake(dx,dy);
203+
drawApple();
204+
},100);
205+
}
206+
}
207+
else if(e.keyCode == 13)
208+
{
209+
document.location.reload();
210+
snake = {
211+
x : 160,
212+
y : 160 ,
213+
cells : [{x:160 , y:160} , {x:144 , y:160}] ,
214+
};
215+
drawSnake();
216+
}
217+
else if(e.keyCode == 80 || e.keyCode == 112)
218+
{
219+
clearInterval(inter);
220+
}
221+
});

‎snake.jpg‎

130 KB
Loading

0 commit comments

Comments
 (0)