diff --git a/Domains/Frontend/MiniProjects/snake-game/README.md b/Domains/Frontend/MiniProjects/snake-game/README.md new file mode 100644 index 00000000..257a7161 --- /dev/null +++ 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: + +Image + + +## 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 \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/snake-game/index.html b/Domains/Frontend/MiniProjects/snake-game/index.html new file mode 100644 index 00000000..654a8d90 --- /dev/null +++ b/Domains/Frontend/MiniProjects/snake-game/index.html @@ -0,0 +1,21 @@ + + + + + + Snake Game + + + + +

Snake Game

+

Use the arrow keys to move the snake and eat the food!

+ +
+

Score: 0

+ +
+ + + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/snake-game/script.js b/Domains/Frontend/MiniProjects/snake-game/script.js new file mode 100644 index 00000000..ee74df60 --- /dev/null +++ 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 new file mode 100644 index 00000000..63a9a5d8 --- /dev/null +++ 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; +} \ No newline at end of file