Skip to content

Commit 4dc72d0

Browse files
rootCirclerootCircle
committed
feat: foss weekened init
0 parents  commit 4dc72d0

File tree

10 files changed

+330
-0
lines changed

10 files changed

+330
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
realindex.js
2+
/realindex.js
3+
./realindex.js

‎img/bg.jpg‎

151 KB
Loading

‎index.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
*{
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
.body{
7+
background: url(img/bg.jpg);
8+
min-height: 100vh;
9+
width: 100vw;
10+
display: flex;
11+
background-size: 100vw 100vh;
12+
background-repeat: no-repeat;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
#score{
17+
position: absolute;
18+
top: 15px;
19+
right: 5vw;
20+
font-size: 3vw;
21+
font-weight: bold;
22+
font-family: cursive;
23+
24+
}
25+
#maxScoreCont{
26+
position: absolute;
27+
top: 70px;
28+
right: 5vw;
29+
font-size: 1.5vw;
30+
font-weight: bold;
31+
font-family: cursive;
32+
}
33+
#board{
34+
background: linear-gradient(rgb(170,236,170),rgb(236,236,167));
35+
width: 90vmin;
36+
height: 92vmin;
37+
border: 2px solid black;
38+
display: grid;
39+
grid-template-rows: repeat(18,1fr);
40+
grid-template-columns: repeat(18,1fr);
41+
}
42+
.head{
43+
--top: 80%;
44+
--bottom: 10%;
45+
--left: 2%;
46+
--right: 2%;
47+
--direction: row;
48+
background:linear-gradient(rgb(228, 151, 151),rgb(239, 239, 97));
49+
border: 2px solid purple;
50+
transform: scale(1.02);
51+
border-radius: 9px;
52+
display: flex;
53+
/* align-items: space-evenly;
54+
justify-content: space-evenly; */
55+
/* gap: 20px; */
56+
flex-direction: var(--direction);
57+
padding-top: var(--top);
58+
padding-bottom:var(--bottom);
59+
padding-left: var(--left);
60+
padding-right: var(--right);
61+
}
62+
.snake{
63+
background-color: purple;
64+
border: .25vmin solid white;
65+
border-radius: 12px;
66+
/* z-index: 50; */
67+
}
68+
.food{
69+
/* background-color: rgb(255, 98, 0); */
70+
background: linear-gradient(red,purple);
71+
border: .25vmin solid black;
72+
border-radius: 8px;
73+
}
74+
.eyes{
75+
width: 4px;
76+
height: 4px;
77+
background-color: black;
78+
border: 1px solid black;
79+
z-index: 100;
80+
border-radius: 50%;
81+
margin: auto;
82+
/* border-radius: 50%; */
83+
}

‎index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="index.css">
10+
</head>
11+
12+
<body>
13+
<div class="body">
14+
<div id="score">Score: 0</div>
15+
<div id="maxScoreCont">Max Score: 0</div>
16+
<div id="board">
17+
</div>
18+
</div>
19+
<script src="index.js"></script>
20+
</body>
21+
22+
</html>

‎index.js‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
let board = document.getElementById('board')
2+
let scoreCont = document.getElementById('score')
3+
let maxScoreCont = document.getElementById('maxScoreCont');
4+
let HeadEle;
5+
// console.log(HeadEle);
6+
let inputDir = { x: 0, y: 0 };
7+
8+
const foodSound = new Audio('music/food.mp3');
9+
const gameOverSound = new Audio('music/gameOver.mp3');
10+
const moveSound = new Audio('music/move.mp3');
11+
const musicSound = new Audio('music/music.mp3');
12+
let speed = 5;
13+
let lastPaintTime = 0;
14+
let snakeArr = [
15+
{ x: 13, y: 15 }
16+
]
17+
let food = {
18+
x: 6, y: 7
19+
};
20+
21+
// Game Functions
22+
function main(ctime) {
23+
window.requestAnimationFrame(main);
24+
if ((ctime - lastPaintTime) / 1000 < (1 / speed)) {
25+
return;
26+
}
27+
// console.log(ctime);
28+
lastPaintTime = ctime;
29+
gameEngine();
30+
// console.log(ctime);
31+
}
32+
function isCollide(snake) {
33+
// return false;
34+
//if you into yourself
35+
36+
if (snake[0].x > 18 || snake[0].x < 0 || snake[0].y > 18 || snake[0].y < 0) {
37+
return true;
38+
}
39+
}
40+
function gameEngine() {
41+
//part1: updating the snake array and food
42+
if (isCollide(snakeArr)) {
43+
gameOverSound.play();
44+
musicSound.pause();
45+
inputDir = { x: 0, y: 0 };
46+
alert("Game over. Press any key to play again");
47+
snakeArr = [{ x: 13, y: 15 }];
48+
// musicSound.play();
49+
}
50+
51+
//IF you have eaten the food, increment the score and regenerate the food
52+
if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) {
53+
// console.log("food")
54+
foodSound.play();
55+
56+
snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y });
57+
// console.log(snakeArr)
58+
let a = 2;
59+
let b = 16;
60+
food = { x: 2 + Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }
61+
}
62+
63+
//Moving the snake
64+
// console.log("-----")
65+
// console.log(snakeArr.l)
66+
for (let i = snakeArr.length - 2; i >= 0; i--) {
67+
// const element = array[i];
68+
// console.log("hello");
69+
snakeArr[i + 1] = { ...snakeArr[i] };
70+
// console.log(snakeArr[i + 1].x);
71+
72+
}
73+
snakeArr[0].x += inputDir.x;
74+
snakeArr[0].y += inputDir.y;
75+
76+
//part2: display the snake and food
77+
//display the snake
78+
board.innerHTML = "";
79+
snakeArr.forEach((e, index) => {
80+
snakeElement = document.createElement('div');
81+
snakeElement.style.gridRowStart = e.y;
82+
snakeElement.style.gridColumnStart = e.x;
83+
if (index === 0) {
84+
eyes = document.createElement('div');
85+
eyes.classList.add('eyes');
86+
eyes2 = document.createElement('div');
87+
eyes2.classList.add('eyes');
88+
snakeElement.classList.add('head');
89+
// HeadEle = document.querySelectorAll('.head');
90+
// console.log(e.x, e.y, typeof e.x, typeof e.y)
91+
if (inputDir.x === 0 && inputDir.y === -1) {
92+
snakeElement.style.setProperty('--top', '15%');
93+
snakeElement.style.setProperty('--bottom', '75%');
94+
snakeElement.style.setProperty('--left', '2%');
95+
snakeElement.style.setProperty('--right', '2%');
96+
snakeElement.style.setProperty('--direction', 'row');
97+
}
98+
else if (inputDir.x === 0 && inputDir.y === 1) {
99+
snakeElement.style.setProperty('--top', '75%');
100+
snakeElement.style.setProperty('--bottom', '15%');
101+
snakeElement.style.setProperty('--left', '2%');
102+
snakeElement.style.setProperty('--right', '2%');
103+
snakeElement.style.setProperty('--direction', 'row');
104+
}
105+
else if (inputDir.x === -1 && inputDir.y === 0) {
106+
snakeElement.style.setProperty('--top', '2%');
107+
snakeElement.style.setProperty('--bottom', '2%');
108+
snakeElement.style.setProperty('--left', '15%');
109+
snakeElement.style.setProperty('--right', '75%');
110+
snakeElement.style.setProperty('--direction', 'column');
111+
}
112+
else if (inputDir.x === 1 && inputDir.y === 0) {
113+
snakeElement.style.setProperty('--top', '2%');
114+
snakeElement.style.setProperty('--bottom', '2%');
115+
snakeElement.style.setProperty('--left', '75%');
116+
snakeElement.style.setProperty('--right', '15%');
117+
snakeElement.style.setProperty('--direction', 'column');
118+
}
119+
board.appendChild(snakeElement);
120+
snakeElement.appendChild(eyes);
121+
snakeElement.appendChild(eyes2);
122+
}
123+
else {
124+
snakeElement.classList.add('snake');
125+
board.appendChild(snakeElement)
126+
}
127+
})
128+
129+
//part2: display the snake
130+
131+
foodElement = document.createElement('div');
132+
foodElement.style.gridRowStart = food.y;
133+
foodElement.style.gridColumnStart = food.x;
134+
foodElement.classList.add('food');
135+
board.appendChild(foodElement);
136+
137+
}
138+
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
//Main logic starts here
149+
window.requestAnimationFrame(main);
150+
window.addEventListener('keydown', e => {
151+
// inputDir = { x: 0, y: 1 } //start the game
152+
moveSound.play();
153+
switch (e.key) {
154+
case "ArrowUp":
155+
inputDir.x = 0;
156+
inputDir.y = -1;
157+
158+
break;
159+
case "ArrowDown":
160+
inputDir.x = 0;
161+
inputDir.y = 1;
162+
163+
break;
164+
case "ArrowLeft":
165+
inputDir.x = -1;
166+
inputDir.y = 0;
167+
168+
break;
169+
case "ArrowRight":
170+
inputDir.x = 1;
171+
inputDir.y = 0;
172+
break;
173+
default:
174+
break;
175+
}
176+
});
177+

‎music/food.mp3‎

3.97 KB
Binary file not shown.

‎music/gameover.mp3‎

12.4 KB
Binary file not shown.

‎music/move.mp3‎

5.3 KB
Binary file not shown.

‎music/music.mp3‎

10.9 MB
Binary file not shown.

‎readme.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Snake Game
2+
3+
A classic Snake game built using HTML, CSS, and JavaScript. This simple game allows players to control a snake, guiding it to eat food and grow longer while avoiding collisions with the boundary and itself.
4+
5+
6+
## How to Play
7+
8+
- Use the arrow keys on your keyboard to control the direction of the snake.
9+
- Guide the snake to eat the food that appears on the screen.
10+
- Each time the snake eats food, it grows longer.
11+
- Avoid collisions with the boundary of the game area and with the snake itself.
12+
- The game ends when the snake collides with the boundary or itself.
13+
14+
## Technologies Used
15+
16+
- HTML5
17+
- CSS3
18+
- JavaScript
19+
20+
## Installation
21+
22+
No installation is required to play the game. Simply open the `index.html` file in your web browser to start playing.
23+
24+
## Contributing
25+
26+
Contributions are welcome! If you find any bugs or have suggestions for improvements, please check the list of [open issues](https://github.com/iiitl/snake-game-js/issues) before submitting a new one.
27+
28+
You can contribute by solving the given issues or by creating new ones and solving them. To contribute, follow these steps:
29+
30+
1. **Check for existing issues:** Before starting work on a new issue, please check if there's already an open issue for it. If not, feel free to create one.
31+
32+
2. **Fork the repository:** Click on the "Fork" button at the top right corner of the repository page to create a copy of the repository on your GitHub account.
33+
34+
3. **Clone the repository:** Clone the forked repository to your local machine using the following command:
35+
36+
4. **Make changes:** Make your desired changes to the codebase.
37+
38+
5. **Commit your changes:** Commit your changes with a descriptive commit message using the following command:
39+
40+
6. **Push changes:** Push your changes to your forked repository on GitHub using the following command:
41+
42+
7. **Submit a pull request:** Finally, submit a pull request from your forked repository to the original repository. Ensure to provide a clear description of your changes in the pull request.
43+
44+
Thank you for contributing!
45+

0 commit comments

Comments
 (0)