Snake Game

{"name":"Snake Adventure!","description":"Dive into the classic Snake game with a twist! Control your snake, eat the food, and grow longer while avoiding collisions. Experience the thrill of scoring high and sharing your achievements with friends. Perfect for both beginners and seasoned gamers!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/sjy8ua9nnadyy7uwkcqn","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-04-16T17:53:54.169394Z","updated_at":"2025-04-16T17:53:54.169397Z","user_id":395,"status":"PRIVATE","parent_id":4928,"id":7554,"user":{"username":"elijah","id":395,"password_hash":"$2b$12$jENdCR7y7QwroV.pEqEOmOmV3amqkp.FfBIWWoTHecP2tWDZLyRWK","updated_at":"2025-03-10T14:01:17.868275Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"elijah.hunter@alpha.school","recess_id":null,"created_at":"2025-03-10T14:01:17.868267Z","reset_token":null,"stripe_customer_id":null,"seats":0},"code":{"script.js":"\r\n\r\nconst canvas = document.getElementById(\"gameCanvas\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\n// Game settings\r\nconst box = 20; // Size of each grid box\r\nconst canvasSize = canvas.width / box;\r\n\r\n// Snake setup\r\nlet snake = [{ x: 10, y: 10 }];\r\nlet direction = \"RIGHT\";\r\nlet nextDirection = \"RIGHT\"; // Prevent immediate reversal\r\n\r\n// Food setup\r\nlet food = generateFood();\r\n\r\n// Timer variables\r\nlet countdown = 5; // Countdown starts at 5 seconds\r\nlet gameStarted = false; // Game starts after countdown\r\nlet gameOver = false; // Track if the game is over\r\n\r\n// Countdown function\r\nfunction startCountdown() {\r\n if (countdown > 0) {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = \"30px Arial\";\r\n ctx.fillStyle = \"black\";\r\n ctx.textAlign = \"center\";\r\n ctx.fillText(`Starting in ${countdown}...`, canvas.width / 2, canvas.height / 2);\r\n countdown--;\r\n setTimeout(startCountdown, 1000);\r\n } else {\r\n gameStarted = true;\r\n setInterval(draw, 100); // Start the game loop after countdown\r\n }\r\n}\r\n\r\n// Generate food at a valid position\r\nfunction generateFood() {\r\n let newFood;\r\n do {\r\n newFood = {\r\n x: Math.floor(Math.random() * canvasSize),\r\n y: Math.floor(Math.random() * canvasSize),\r\n };\r\n } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));\r\n return newFood;\r\n}\r\n\r\n// Game loop\r\nfunction draw() {\r\n if (!gameStarted || gameOver) return;\r\n\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n // Update direction\r\n direction = nextDirection;\r\n\r\n // Move the snake\r\n const head = { ...snake[0] };\r\n if (direction === \"RIGHT\") head.x++;\r\n if (direction === \"LEFT\") head.x--;\r\n if (direction === \"UP\") head.y--;\r\n if (direction === \"DOWN\") head.y++;\r\n\r\n // Add the new head\r\n snake.unshift(head);\r\n\r\n // Check if the snake eats the food\r\n if (head.x === food.x && head.y === food.y) {\r\n food = generateFood();\r\n } else {\r\n // Remove the last segment if no food is eaten\r\n snake.pop();\r\n }\r\n\r\n // Check for collisions\r\n if (\r\n head.x < 0 ||\r\n head.x >= canvasSize ||\r\n head.y < 0 ||\r\n head.y >= canvasSize ||\r\n snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)\r\n ) {\r\n handleGameOver();\r\n return;\r\n }\r\n\r\n // Draw the snake\r\n snake.forEach((segment, index) => {\r\n ctx.fillStyle = index === 0 ? \"green\" : \"lime\";\r\n ctx.fillRect(segment.x * box, segment.y * box, box, box);\r\n });\r\n\r\n // Draw the food\r\n ctx.fillStyle = \"red\";\r\n ctx.fillRect(food.x * box, food.y * box, box, box);\r\n}\r\n\r\n// Handle game over\r\nfunction handleGameOver() {\r\n gameOver = true;\r\n\r\n // Display \"Game Over\" message\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = \"30px Arial\";\r\n ctx.fillStyle = \"black\";\r\n ctx.textAlign = \"center\";\r\n ctx.fillText(\"Game Over!\", canvas.width / 2, canvas.height / 2 - 20);\r\n ctx.fillText(\"Press R to Restart\", canvas.width / 2, canvas.height / 2 + 20);\r\n}\r\n\r\n// Restart game\r\nfunction restartGame() {\r\n // Reset game state\r\n snake = [{ x: 10, y: 10 }];\r\n direction = \"RIGHT\";\r\n nextDirection = \"RIGHT\";\r\n food = generateFood();\r\n gameStarted = true;\r\n gameOver = false;\r\n}\r\n\r\n// Change direction\r\ndocument.addEventListener(\"keydown\", (event) => {\r\n\r\n\r\n\r\n\r\n if (event.key === \"ArrowUp\" && direction !== \"DOWN\") nextDirection = \"UP\";\r\n if (event.key === \"ArrowDown\" && direction !== \"UP\") nextDirection = \"DOWN\";\r\n if (event.key === \"ArrowLeft\" && direction !== \"RIGHT\") nextDirection = \"LEFT\";\r\n if (event.key === \"ArrowRight\" && direction !== \"LEFT\") nextDirection = \"RIGHT\";\r\n\r\n\r\n\r\n // Restart the game\r\n if (event.key === \"r\" || event.key === \"R\") {\r\n if (gameOver) restartGame();\r\n }\r\n});\r\n\r\n// Start the countdown\r\nstartCountdown();\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","style.css":"body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0;\r\n background-color: #f0f0f0;\r\n font-family: Arial, sans-serif;\r\n height: 100vh;\r\n \r\n\r\n}\r\n\r\ncanvas {\r\n border: 2px solid black;\r\n height: 80Vh;\r\n \r\n\r\n}","index.html":"\n\n\n\n \n \n Snake Game\n \n\n\n\n

\n \n\n\n"},"chat_history":[],"assets":[{"project_id":7554,"created_at":"2025-04-16T17:53:54.201557Z","resource_type":"image","id":72011,"cloudinary_id":"sjy8ua9nnadyy7uwkcqn","name":"planet04","deleted":false}],"messages_sent":0,"comments":[],"steps":[]}