Snake Game Adventure

{"name":"Snake Game Adventure","description":"Get ready to slither your way to victory in this classic Snake Game! Navigate your snake to collect food, grow longer, and avoid crashing into walls or yourself. With simple controls and engaging gameplay, it's the perfect way to challenge your reflexes and have a blast!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-01-13T14:46:50.558325Z","updated_at":"2025-01-13T14:46:50.558329Z","user_id":5,"status":"PRIVATE","parent_id":null,"id":5481,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// JavaScript code here\n\nlet snake;\nlet food;\nlet direction;\nlet gridSize = 20;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n // Initialize the snake at the center of the canvas\n snake = [createVector(floor(width / gridSize / 2), floor(height / gridSize / 2))];\n direction = createVector(1, 0); // Start moving to the right\n placeFood();\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n // Update snake position\n updateSnake();\n\n // Draw snake\n drawSnake();\n\n // Draw food\n drawFood();\n}\n\nfunction updateSnake() {\n let head = snake[0].copy();\n head.add(direction);\n snake.unshift(head);\n\n // Remove the last part of the snake\n snake.pop();\n}\n\nfunction drawSnake() {\n fill(0);\n for (let i = 0; i < snake.length; i++) {\n let pos = snake[i];\n text('🟩', pos.x * gridSize, pos.y * gridSize);\n }\n}\n\nfunction drawFood() {\n fill(255, 0, 0);\n text('🍎', food.x * gridSize, food.y * gridSize);\n}\n\nfunction placeFood() {\n let cols = floor(width / gridSize);\n let rows = floor(height / gridSize);\n food = createVector(floor(random(cols)), floor(random(rows)));\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Snake Game Adventure\n \n \n\n\n \n\n"},"chat_history":[{"message":"lets make a snake game","project_id":5481,"created_at":"2025-01-13T14:46:50.579998Z","output_tokens":null,"sender":"human","code_id":202178,"deleted":0,"input_tokens":null,"id":102265},{"message":"Let's get started!","project_id":5481,"created_at":"2025-01-13T14:46:55.064820Z","output_tokens":null,"sender":"human","code_id":202178,"deleted":0,"input_tokens":null,"id":102266},{"message":"","project_id":5481,"created_at":"2025-01-13T14:46:55.215030Z","output_tokens":0,"sender":"ai","code_id":202178,"deleted":0,"input_tokens":2490,"id":102267},{"message":"like a recreation of the classic arcade game","project_id":5481,"created_at":"2025-01-13T14:47:06.005009Z","output_tokens":null,"sender":"human","code_id":202179,"deleted":0,"input_tokens":null,"id":102268},{"message":"Great! Recreating the classic Snake game is a fun project. We can start by setting up the basic elements like the snake and the food. \n\nTo begin, could you let me know:\n- How do you envision controlling the snake? (e.g., arrow keys)\n- Would you like to use any specific visuals for the snake and food, or should we use simple emojis or shapes? \n\nLet's get started!","project_id":5481,"created_at":"2025-01-13T14:47:06.025837Z","output_tokens":91,"sender":"ai","code_id":202179,"deleted":0,"input_tokens":2493,"id":102269},{"message":"arrow keys, just use emojis\n🟩 for snake body\n🍎 for food","project_id":5481,"created_at":"2025-01-13T14:47:48.055364Z","output_tokens":null,"sender":"human","code_id":202179,"deleted":0,"input_tokens":null,"id":102270},{"message":"Great! Using arrow keys and emojis will make the game both simple and fun. Let's start by setting up the snake and the food. We'll create the snake with a basic movement functionality and place the food randomly on the canvas.\n\n### Here's what we'll do:\n1. Set up the initial snake as a list of positions.\n2. Add movement functionality for the snake using the arrow keys.\n3. Place food on the canvas and check for collisions with the snake.\n\nLet's begin with the snake setup:\n\n```javascript\n// JavaScript code here\n\nlet snake;\nlet food;\nlet direction;\nlet gridSize = 20;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n // Initialize the snake at the center of the canvas\n snake = [createVector(floor(width / gridSize / 2), floor(height / gridSize / 2))];\n direction = createVector(1, 0); // Start moving to the right\n placeFood();\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n // Update snake position\n updateSnake();\n\n // Draw snake\n drawSnake();\n\n // Draw food\n drawFood();\n}\n\nfunction updateSnake() {\n let head = snake[0].copy();\n head.add(direction);\n snake.unshift(head);\n\n // Remove the last part of the snake\n snake.pop();\n}\n\nfunction drawSnake() {\n fill(0);\n for (let i = 0; i < snake.length; i++) {\n let pos = snake[i];\n text('🟩', pos.x * gridSize, pos.y * gridSize);\n }\n}\n\nfunction drawFood() {\n fill(255, 0, 0);\n text('🍎', food.x * gridSize, food.y * gridSize);\n}\n\nfunction placeFood() {\n let cols = floor(width / gridSize);\n let rows = floor(height / gridSize);\n food = createVector(floor(random(cols)), floor(random(rows)));\n}\n```\n\n### Explanation:\n- **Global Variables**: We have `snake`, `food`, `direction`, and `gridSize` for managing the snake's position and movement.\n- **setup()**: Initializes the canvas, the snake's starting position, and places the food.\n- **draw()**: Updates the snake's position and draws the snake and food.\n- **updateSnake()**: Moves the snake in the current direction.\n- **drawSnake()**: Draws the snake using the 🟩 emoji.\n- **drawFood()**: Draws the food using the 🍎 emoji.\n- **placeFood()**: Randomly places the food on the canvas.\n\n### Next Steps:\n- Implement controls using arrow keys.\n- Check for collision with food and grow the snake.\n\nFeel free to implement this part and let me know when you're ready to move on to the next steps!","project_id":5481,"created_at":"2025-01-13T14:47:48.118352Z","output_tokens":598,"sender":"ai","code_id":202179,"deleted":0,"input_tokens":2504,"id":102271}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}