diff --git a/Games/snake/README.md b/Games/snake/README.md new file mode 100644 index 0000000000..d691f36bc7 --- /dev/null +++ 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 new file mode 100644 index 0000000000..fa8181fdc1 --- /dev/null +++ b/Games/snake/index.html @@ -0,0 +1,13 @@ + + + + + + Snake Game + + + + + + + diff --git a/Games/snake/script.js b/Games/snake/script.js new file mode 100644 index 0000000000..c459740d25 --- /dev/null +++ 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 new file mode 100644 index 0000000000..2228ef5329 --- /dev/null +++ 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 index 4272513cd2..d6f00b550c 100644 --- 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 new file mode 100644 index 0000000000..98118e2990 Binary files /dev/null and b/assets/images/snake.png differ