acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/snake-game/README.md b/Domains/Frontend/MiniProjects/snake-game/README.md
@@ -0,0 +1,38 @@
+# Snake Game
+
+A classic Snake game implemented as a frontend mini-project.
+
+
+Demo:
+
+<img width="2559" height="1308" alt="Image" src="https://github.com/user-attachments/assets/1aca5e9b-6668-478c-856d-622401ba3e07" />
+
+
+## Description
+This is a simple implementation of the popular Snake game where the player controls a snake to eat food and grow longer while avoiding collisions with walls or itself.
+
+## Features
+- Responsive design
+- Score tracking
+- Game over detection
+- Keyboard controls
+
+## How to Play
+- Use arrow keys to control the snake's direction.
+- Eat the food to grow and increase your score.
+- Avoid hitting the walls or your own tail.
+
+## Installation
+1. Clone the repository.
+2. Open `index.html` in a web browser.
+
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+
+## Contributing
+Feel free to submit issues or pull requests.
+
+## License
+MIT License
diff --git a/Domains/Frontend/MiniProjects/snake-game/index.html b/Domains/Frontend/MiniProjects/snake-game/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snake Game</title>
+
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>Snake Game</h1>
+    <p>Use the arrow keys to move the snake and eat the food!</p>
+
+    <div class="container">
+        <p>Score: <span id="score">0</span></p>
+        <canvas id="gameCanvas" width="400" height="400"></canvas>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/snake-game/script.js b/Domains/Frontend/MiniProjects/snake-game/script.js
@@ -0,0 +1,96 @@
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
+
+let snake = [{ x: 9, y: 9 }];
+let food = { x: 5, y: 5 };
+let score = 0;
+let direction = { x: 0, y: 0 };
+
+function gameLoop() {
+    update();
+    draw();
+    setTimeout(gameLoop, 300);
+}
+
+function update() {
+    // Move the snake
+    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
+    snake.unshift(head);
+
+    // Check for food collision
+    if (head.x === food.x && head.y === food.y) {
+        score++;
+        placeFood();
+    } else {
+        snake.pop();
+    }
+
+    // Check for wall collisions
+    if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20 || isCollidingWithSelf(head)) {
+        resetGame();
+    }
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawSnake();
+    drawFood();
+    drawScore();
+}
+
+function drawSnake() {
+    ctx.fillStyle = "#4CAF50";
+    snake.forEach(segment => {
+        ctx.fillRect(segment.x * 20, segment.y * 20, 18, 18);
+    });
+}
+
+function drawFood() {
+    ctx.fillStyle = "#FF5722";
+    ctx.beginPath();
+    ctx.arc(food.x * 20 + 10, food.y * 20 + 10, 9, 0, Math.PI * 2);
+    ctx.fill();
+}
+
+function drawScore() {
+    ctx.fillStyle = "#000";
+    ctx.font = "24px Arial";
+    ctx.fillText("Score: " + score, 10, 30);
+}
+
+function placeFood() {
+    food = {
+        x: Math.floor(Math.random() * 20),
+        y: Math.floor(Math.random() * 20)
+    };
+}
+
+function isCollidingWithSelf(head) {
+    return snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y);
+}
+
+function resetGame() {
+    snake = [{ x: 9, y: 9 }];
+    score = 0;
+    direction = { x: 0, y: 0 };
+    placeFood();
+}
+
+document.addEventListener("keydown", event => {
+    switch (event.key) {
+        case "ArrowUp":
+            if (direction.y === 0) direction = { x: 0, y: -1 };
+            break;
+        case "ArrowDown":
+            if (direction.y === 0) direction = { x: 0, y: 1 };
+            break;
+        case "ArrowLeft":
+            if (direction.x === 0) direction = { x: -1, y: 0 };
+            break;
+        case "ArrowRight":
+            if (direction.x === 0) direction = { x: 1, y: 0 };
+            break;
+    }
+});
+
+gameLoop();
diff --git a/Domains/Frontend/MiniProjects/snake-game/style.css b/Domains/Frontend/MiniProjects/snake-game/style.css
@@ -0,0 +1,55 @@
+/* Basic styles for Snake Game */
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#gameCanvas {
+    border: 2px solid #333;
+    background-color: #fff;
+    display: grid;
+    grid-template-columns: repeat(20, 20px);
+    grid-template-rows: repeat(20, 20px);
+    gap: 0;
+    margin: 20px auto;
+}
+
+.cell {
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+}
+
+.snake {
+    background-color: #4CAF50;
+}
+
+.food {
+    background-color: #FF5722;
+    border-radius: 50%;
+}
+
+#score {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    margin: 5px;
+    cursor: pointer;
+}