Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Snake Game</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #f0f0f0; | |
| } | |
| canvas { | |
| border: 1px solid black; | |
| background-color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="gameCanvas" width="400" height="400"></canvas> | |
| <script> | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const box = 20; // Size of each grid box | |
| const canvasSize = 400; | |
| let snake = []; | |
| snake[0] = { x: 9 * box, y: 10 * box }; // Initial snake position | |
| let food = { | |
| x: Math.floor(Math.random() * (canvasSize / box)) * box, | |
| y: Math.floor(Math.random() * (canvasSize / box)) * box | |
| }; | |
| let score = 0; | |
| let direction; | |
| document.addEventListener('keydown', setDirection); | |
| function setDirection(event) { | |
| if (event.keyCode == 37 && direction != 'RIGHT') { | |
| direction = 'LEFT'; | |
| } else if (event.keyCode == 38 && direction != 'DOWN') { | |
| direction = 'UP'; | |
| } else if (event.keyCode == 39 && direction != 'LEFT') { | |
| direction = 'RIGHT'; | |
| } else if (event.keyCode == 40 && direction != 'UP') { | |
| direction = 'DOWN'; | |
| } | |
| } | |
| function collision(head, array) { | |
| for (let i = 0; i < array.length; i++) { | |
| if (head.x == array[i].x && head.y == array[i].y) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| function draw() { | |
| // Clear canvas | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(0, 0, canvasSize, canvasSize); | |
| // Draw snake | |
| for (let i = 0; i < snake.length; i++) { | |
| ctx.fillStyle = (i == 0) ? 'green' : 'lightgreen'; | |
| ctx.fillRect(snake[i].x, snake[i].y, box, box); | |
| ctx.strokeStyle = 'darkgreen'; | |
| ctx.strokeRect(snake[i].x, snake[i].y, box, box); | |
| } | |
| // Draw food | |
| ctx.fillStyle = 'red'; | |
| ctx.fillRect(food.x, food.y, box, box); | |
| // Old head position | |
| let snakeX = snake[0].x; | |
| let snakeY = snake[0].y; | |
| // Which direction | |
| if (direction == 'LEFT') snakeX -= box; | |
| if (direction == 'UP') snakeY -= box; | |
| if (direction == 'RIGHT') snakeX += box; | |
| if (direction == 'DOWN') snakeY += box; | |
| // If the snake eats the food | |
| if (snakeX == food.x && snakeY == food.y) { | |
| score++; | |
| food = { | |
| x: Math.floor(Math.random() * (canvasSize / box)) * box, | |
| y: Math.floor(Math.random() * (canvasSize / box)) * box | |
| }; | |
| // Don't remove tail | |
| } else { | |
| // Remove the tail | |
| snake.pop(); | |
| } | |
| // New head | |
| let newHead = { | |
| x: snakeX, | |
| y: snakeY | |
| }; | |
| // Game over conditions | |
| if (snakeX < 0 || snakeX >= canvasSize || snakeY < 0 || snakeY >= canvasSize || collision(newHead, snake)) { | |
| clearInterval(game); | |
| alert('Game Over! Score: ' + score); | |
| // Optionally reset game or provide restart button | |
| document.location.reload(); // Simple reload to restart | |
| } | |
| snake.unshift(newHead); | |
| // Draw score | |
| ctx.fillStyle = 'black'; | |
| ctx.font = '20px Arial'; | |
| ctx.fillText('Score: ' + score, box, 1.6 * box); | |
| } | |
| let game = setInterval(draw, 100); // Game loop speed | |
| </script> | |
| </body> | |
| </html> | |