Merge pull request kunjgit#4294 from 1911aditi/main

Added new game:- SNAKE
manikumarreddyu · Jun 12, 2024 · c30894e · c30894e
2 parents 1018627 + 6c310c2
commit c30894e
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 0 deletions.
diff --git a/Games/snake/README.md b/Games/snake/README.md
@@ -0,0 +1,23 @@
+# Snake Game
+
+This is a simple Snake Game implemented in HTML CSS and JavaScript.
+
+## How to Play
+
+- Use the arrow keys to control the snake's direction.
+- Eat the red food blocks to grow the snake and increase your score.
+- Avoid colliding with the walls or the snake itself.
+
+
+## Development
+
+To run the game locally:
+
+1. Clone this repository.
+2. Open `index.html` in your browser.
+
+## Acknowledgements
+
+- The Snake Game logic is inspired by classic snake games.
+- CSS styles for the game layout are defined in `styles.css`.
+
diff --git a/Games/snake/index.html b/Games/snake/index.html
@@ -0,0 +1,13 @@
+<!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>
+    <canvas id="gameCanvas" width="400" height="400"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/snake/script.js b/Games/snake/script.js
@@ -0,0 +1,96 @@
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
+const gridSize = 20;
+let snake = [{x: 10, y: 10}];
+let food = {x: 15, y: 15};
+let dx = 0;
+let dy = 0;
+let score = 0;
+let gameInterval;
+
+document.addEventListener("keydown", changeDirection);
+
+function changeDirection(event) {
+    const keyPressed = event.key;
+    if (keyPressed === "ArrowUp" && dy === 0) {
+        dx = 0;
+        dy = -1;
+    } else if (keyPressed === "ArrowDown" && dy === 0) {
+        dx = 0;
+        dy = 1;
+    } else if (keyPressed === "ArrowLeft" && dx === 0) {
+        dx = -1;
+        dy = 0;
+    } else if (keyPressed === "ArrowRight" && dx === 0) {
+        dx = 1;
+        dy = 0;
+    }
+}
+
+function drawSnake() {
+    ctx.fillStyle = "#000";
+    snake.forEach((segment) => {
+        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
+    });
+}
+
+function drawFood() {
+    ctx.fillStyle = "#ff0000";
+    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+}
+
+function moveSnake() {
+    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
+    snake.unshift(head);
+    if (head.x === food.x && head.y === food.y) {
+        score++;
+        createFood();
+    } else {
+        snake.pop();
+    }
+}
+
+function createFood() {
+    food.x = Math.floor(Math.random() * (canvas.width / gridSize));
+    food.y = Math.floor(Math.random() * (canvas.height / gridSize));
+}
+
+function drawScore() {
+    ctx.fillStyle = "#000";
+    ctx.font = "20px Arial";
+    ctx.fillText("Score: " + score, 10, 25);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawSnake();
+    drawFood();
+    drawScore();
+    moveSnake();
+
+    if (checkCollision()) {
+        gameOver();
+        return;
+    }
+}
+
+function checkCollision() {
+    const head = snake[0];
+    return (
+        head.x < 0 ||
+        head.x >= canvas.width / gridSize ||
+        head.y < 0 ||
+        head.y >= canvas.height / gridSize ||
+        snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
+    );
+}
+
+function gameOver() {
+    clearInterval(gameInterval);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#000";
+    ctx.font = "30px Arial";
+    ctx.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
+}
+
+gameInterval = setInterval(draw, 100);
diff --git a/Games/snake/style.css b/Games/snake/style.css
@@ -0,0 +1,17 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+}
+
+.game-container {
+    position: relative;
+}
+
+#gameCanvas {
+    border: 1px solid #000;
+}
diff --git a/README.md b/README.md
@@ -327,7 +327,10 @@ This repository also provides one such platforms where contributers come over an
 | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball)                  |
 |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
 |[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game)   |
+| [Snake](https://github.com/kunjgit/GameZone/tree/main/Games/snake)                               |
+
 |[Chess_Game_computer](https://github.com/kunjgit/GameZone/tree/main/Games/Chess_Game_computer)   |
+
 |[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light)   |
 | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) |
 | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) |

diff --git a/assets/images/snake.png b/assets/images/snake.png