Skip to content

Commit e5c1327

Browse files
abhipshapatroabhipshapatro
authored
Merge pull request #7 from NaMiKA0305/kit
Added Snake
2 parents 463727d + 15cc522 commit e5c1327

8 files changed

Lines changed: 198 additions & 0 deletions

File tree

‎snake/css/style.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
*{
2+
padding:0;
3+
margin:0;
4+
}
5+
6+
.body1{
7+
background:url("https://wallpapercave.com/wp/wp3906260.jpg");
8+
background-attachment:fixed;
9+
min-height: 100vh;
10+
background-repeat: no-repeat;
11+
display:flex;
12+
justify-content:center;
13+
align-items: center;
14+
}
15+
#board{
16+
background: linear-gradient(rgb(10, 107, 10), rgb(66, 40, 31));
17+
width:92vh ;
18+
height:90vh ;
19+
border: 2px solid green;
20+
display: grid;
21+
grid-template-rows:repeat(18,1fr) ;
22+
grid-template-columns: repeat(18,1fr);
23+
}
24+
25+
.head{
26+
background: linear-gradient(rgb(221, 52, 52),rgb(212, 230, 57));
27+
border-radius:5px ;
28+
border: 2px solid purple;
29+
transform: scaleX(1.02);
30+
}
31+
.snake{
32+
background-color: rgb(126, 15, 126);
33+
border: 2px solid aquamarine;
34+
border-radius: 5px;
35+
}
36+
.food{
37+
38+
background:linear-gradient(rgb(223, 24, 67),rgb(66, 66, 194));
39+
border:.25vmin solid blue;
40+
border-radius:5px ;
41+
}
42+
#score{
43+
position: absolute;
44+
top: 9px;
45+
right: 200px;
46+
font-size: 39px;
47+
font-weight: bold;
48+
color: aliceblue;
49+
text-align: right;
50+
51+
}

‎snake/css/wp3906260.jpg‎

128 KB
Loading

‎snake/js/hiss3-103123.mp3‎

28.6 KB
Binary file not shown.

‎snake/js/index.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
let inputDir = { x: 0, y: 0 };
2+
const foodSound = new Audio('pow-90398.mp3');
3+
const gameOverSound = new Audio('hiss3-103123.mp3');
4+
const moveSound = new Audio('snake-hissing-6092.mp3');
5+
const musicSound = new Audio('music.mp3');
6+
let speed = 3;
7+
let score =0;
8+
let lastPaintTime = 0;
9+
let snakeArr = [
10+
{ x: 13, y: 15 }
11+
]
12+
food={ x: 6, y: 7 };
13+
14+
15+
//Game Function
16+
function main(ctime) {
17+
18+
window.requestAnimationFrame(main);
19+
// console.log(ctime)
20+
if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
21+
return;
22+
}
23+
lastPaintTime = ctime;
24+
gameEngine();
25+
26+
}
27+
function isCollide(snake){
28+
//if u bump into urself
29+
for (let i = 1; i< snakeArr.length; i++) {
30+
// const element = array[index];
31+
if(snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
32+
return true;
33+
}
34+
}
35+
// If you bump into the wall;
36+
if(snake[0].x>= 18 || snake[0].x <=0 ||snake[0].y >= 18 || snake[0].y<=0){
37+
return true;
38+
}
39+
return false;
40+
41+
}
42+
43+
44+
function gameEngine() {
45+
//part1:updating the sanke array &food
46+
if(isCollide(snakeArr)){
47+
score += 1;
48+
score.innerHTML="Score"+score;
49+
musicSound.play();
50+
inputDir = { x: 0,y:0};
51+
alert("Game Over.Press any key to play again.");
52+
snakeArr =[ { x: 13, y: 15 }];
53+
// musicSound.play();
54+
score = 0;
55+
}
56+
57+
//If u have eaten the food, increment and regenerate the food.
58+
if(snakeArr[0].y === food.y && snakeArr[0].x ===food.x){
59+
foodSound.play();
60+
snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y});
61+
let a=2;
62+
let b=16;
63+
food = {x : Math.round(a + (b-a)* Math.random()),y : Math.round(a + (b-a)* Math.random())}
64+
}
65+
//moving the snake
66+
for(let i =snakeArr.length-2; i>=0; i-- ){
67+
// const element =array[i];
68+
snakeArr[i+1]={...snakeArr[i]};
69+
}
70+
71+
snakeArr[0].x += inputDir.x;
72+
snakeArr[0].y += inputDir.y;
73+
74+
75+
76+
//pert2:Display the snake
77+
board.innerHTML = "";
78+
snakeArr.forEach((e, index) => {
79+
sankeElement = document.createElement('div');
80+
sankeElement.style.gridRowStart = e.y;
81+
sankeElement.style.gridColumnStart = e.x;
82+
// sankeElement.classList.add('snake')
83+
if(index === 0){
84+
sankeElement.classList.add('head');
85+
}
86+
else{
87+
sankeElement.classList.add('snake');
88+
}
89+
board.appendChild(sankeElement);
90+
})
91+
//Display the food
92+
foodElement = document.createElement('div');
93+
foodElement.style.gridRowStart = food.y;
94+
foodElement.style.gridColumnStart = food.x;
95+
foodElement.classList.add('food')
96+
board.appendChild(foodElement);
97+
}
98+
99+
window.requestAnimationFrame(main);
100+
window.addEventListener('keydown', e =>{
101+
inputDir ={x:0, y:1}//start the game
102+
moveSound.play();
103+
switch(e.key){
104+
case"ArrowUp":
105+
console.log("ArrowUp");
106+
inputDir.x= 0;
107+
inputDir.y= -1;
108+
break;
109+
case "ArrowDown":
110+
console.log("ArrowDown");
111+
inputDir.x= 0;
112+
inputDir.y= 1;
113+
break;
114+
case "ArrowLeft":
115+
console.log("ArrowLeft");
116+
inputDir.x= -1;
117+
inputDir.y= 0;
118+
break;
119+
case "ArrowRight":
120+
console.log("ArrowRight");
121+
inputDir.x=1 ;
122+
inputDir.y=0 ;
123+
break;
124+
default:
125+
break;
126+
127+
}
128+
})

‎snake/js/index1.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Snake hisses</title>
8+
<link rel="stylesheet" href= "../css/style.css"/>
9+
<link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/128/2469/2469814.png">
10+
11+
</head>
12+
<body>
13+
<div class="body1">
14+
<div id="score">Score: 0</div>
15+
<div id="board"></div>
16+
</div>
17+
</body>
18+
<script src="./index.js"></script>
19+
</html>

‎snake/js/music.mp3‎

10.9 MB
Binary file not shown.

‎snake/js/pow-90398.mp3‎

19.2 KB
Binary file not shown.

‎snake/js/snake-hissing-6092.mp3‎

93.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)