Skip to content

Commit 2cc39ae

Browse files
Karan SinghKaran Singh
Karan Singh
authored and
Karan Singh
committed
snake game
0 parents  commit 2cc39ae

File tree

3 files changed

+228
-0
lines changed

3 files changed

+228
-0
lines changed

‎index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Snake Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="game-container">
11+
<h1>Snake Game</h1>
12+
<div id="game-board"></div>
13+
<p>
14+
Controls: <strong>W</strong> (Up), <strong>A</strong> (Left),
15+
<strong>S</strong> (Down), <strong>D</strong> (Right)
16+
</p>
17+
<p>Score: <span id="score">0</span></p>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎script.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
const board = document.getElementById("game-board");
2+
const scoreDisplay = document.getElementById("score");
3+
4+
// Game settings
5+
const boardSize = 20;
6+
let snake = [{ x: 10, y: 10 }];
7+
let food = { x: 5, y: 5 };
8+
let direction = { x: 0, y: 0 };
9+
let nextDirection = { x: 0, y: 0 };
10+
let score = 0;
11+
let lastTime = 0;
12+
const snakeSpeed = 10; // Moves per second
13+
14+
// Initialize the board
15+
function createBoard() {
16+
board.innerHTML = "";
17+
for (let i = 0; i < boardSize * boardSize; i++) {
18+
const cell = document.createElement("div");
19+
cell.classList.add("cell");
20+
board.appendChild(cell);
21+
}
22+
}
23+
24+
// Draw the snake
25+
function drawSnake() {
26+
snake.forEach((segment) => {
27+
const index = segment.y * boardSize + segment.x;
28+
const cell = board.children[index];
29+
if (cell) cell.classList.add("snake");
30+
});
31+
}
32+
33+
// Draw the food
34+
function drawFood() {
35+
const index = food.y * boardSize + food.x;
36+
const cell = board.children[index];
37+
if (cell) cell.classList.add("food");
38+
}
39+
40+
// Move the snake
41+
function moveSnake() {
42+
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
43+
snake.unshift(head);
44+
45+
// Check collision with food
46+
if (head.x === food.x && head.y === food.y) {
47+
score += 10;
48+
scoreDisplay.textContent = score;
49+
placeFood();
50+
} else {
51+
snake.pop();
52+
}
53+
54+
// Check collision with walls or itself
55+
if (
56+
head.x < 0 ||
57+
head.x >= boardSize ||
58+
head.y < 0 ||
59+
head.y >= boardSize ||
60+
snake
61+
.slice(1)
62+
.some((segment) => segment.x === head.x && segment.y === head.y)
63+
) {
64+
alert("Game Over! Your score: " + score);
65+
resetGame();
66+
}
67+
}
68+
69+
// Place food at a random position
70+
function placeFood() {
71+
food.x = Math.floor(Math.random() * boardSize);
72+
food.y = Math.floor(Math.random() * boardSize);
73+
if (snake.some((segment) => segment.x === food.x && segment.y === food.y)) {
74+
placeFood();
75+
}
76+
}
77+
78+
// Reset the game
79+
function resetGame() {
80+
snake = [{ x: 10, y: 10 }];
81+
direction = { x: 0, y: 0 };
82+
nextDirection = { x: 0, y: 0 };
83+
score = 0;
84+
scoreDisplay.textContent = score;
85+
placeFood();
86+
}
87+
88+
// Game loop
89+
function gameLoop(currentTime) {
90+
window.requestAnimationFrame(gameLoop);
91+
92+
const secondsSinceLastRender = (currentTime - lastTime) / 1000;
93+
if (secondsSinceLastRender < 1 / snakeSpeed) return;
94+
95+
lastTime = currentTime;
96+
97+
// Update direction
98+
direction = nextDirection;
99+
100+
createBoard();
101+
moveSnake();
102+
drawSnake();
103+
drawFood();
104+
}
105+
106+
// Handle controls
107+
document.addEventListener("keydown", (event) => {
108+
switch (event.key) {
109+
case "w":
110+
if (direction.y === 0) nextDirection = { x: 0, y: -1 };
111+
break;
112+
case "a":
113+
if (direction.x === 0) nextDirection = { x: -1, y: 0 };
114+
break;
115+
case "s":
116+
if (direction.y === 0) nextDirection = { x: 0, y: 1 };
117+
break;
118+
case "d":
119+
if (direction.x === 0) nextDirection = { x: 1, y: 0 };
120+
break;
121+
}
122+
});
123+
124+
// Start the game
125+
placeFood();
126+
window.requestAnimationFrame(gameLoop);

‎style.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
body {
2+
font-family: "Poppins", sans-serif;
3+
background-color: #0d1117;
4+
color: #ffffff;
5+
text-align: center;
6+
margin: 0;
7+
padding: 0;
8+
overflow: hidden;
9+
}
10+
11+
.game-container {
12+
max-width: 600px;
13+
margin: 50px auto;
14+
text-align: center;
15+
}
16+
17+
h1 {
18+
color: #00ffa3;
19+
text-shadow: 0 0 20px #00ffa3, 0 0 30px #00ffa3;
20+
}
21+
22+
#game-board {
23+
display: grid;
24+
grid-template-columns: repeat(20, 30px);
25+
grid-template-rows: repeat(20, 30px);
26+
gap: 1px;
27+
background-color: #161b22;
28+
border: 5px solid #00ffa3;
29+
border-radius: 15px;
30+
margin: 20px auto;
31+
position: relative;
32+
box-shadow: 0 0 20px rgba(0, 255, 163, 0.5);
33+
}
34+
35+
.cell {
36+
width: 30px;
37+
height: 30px;
38+
background-color: #1c2028;
39+
border-radius: 5px;
40+
transition: background-color 0.2s ease-in-out;
41+
}
42+
43+
.snake {
44+
background: linear-gradient(45deg, #2bf0ff, #008cff);
45+
border-radius: 50%;
46+
animation: pulse 1.5s infinite;
47+
box-shadow: 0 0 10px #00ffff, 0 0 20px #008cff;
48+
}
49+
50+
@keyframes pulse {
51+
0%,
52+
100% {
53+
transform: scale(1);
54+
}
55+
50% {
56+
transform: scale(1.2);
57+
}
58+
}
59+
60+
.food {
61+
background: radial-gradient(circle, #ff4081, #ff0050);
62+
border-radius: 50%;
63+
animation: bounce 1.5s infinite;
64+
box-shadow: 0 0 10px #ff4081, 0 0 20px #ff0050;
65+
}
66+
67+
@keyframes bounce {
68+
0%,
69+
100% {
70+
transform: scale(1);
71+
}
72+
50% {
73+
transform: scale(1.2);
74+
}
75+
}
76+
77+
p {
78+
margin-top: 10px;
79+
font-size: 18px;
80+
color: #ffffffcc;
81+
}

0 commit comments

Comments
 (0)