Slithering Snake Game

{"name":"Slithering Snake Game","description":"Create your own version of the classic Snake game using p5.js! Start by making the snake appear on the screen, then bring it to life with smooth controls using WASD or arrow keys. Dodge the boundaries and collect food to grow your snake and increase your score. Implement collision detection to end the game when the snake hits itself. Challenge yourself to beat your high score!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-11-13T16:18:21.497909Z","updated_at":"2025-11-13T16:18:21.497910Z","user_id":839,"status":"PRIVATE","parent_id":null,"id":10509,"user":{"photo":null,"email":"lvic_stu28@sdcoestudents.net","recess_id":null,"created_at":"2025-10-13T17:35:21.906801Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"lvic_stu28","id":839,"password_hash":"$2b$12$zH3KWgTv93IwGrROZx5tCO422dJWsTdM3EdYguX1bNE06wchb9Spu","updated_at":"2025-10-13T17:35:21.906807Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"function setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}// script.js\n\nlet snake;\nlet gridSize = 20; // Size of each grid square\nlet direction;\nlet gameSpeed = 10; // Lower gameSpeed for slower movement\n\nfunction setup() {\n createCanvas(400, 400); // A smaller map size\n frameRate(gameSpeed); // Set game speed\n snake = new Snake();\n direction = createVector(1, 0);\n}\n\nfunction draw() {\n background(135, 206, 235);\n snake.update();\n snake.show();\n}\n\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.add(direction.copy().mult(gridSize));\n this.body.shift();\n this.body.push(head);\n }\n\n show() {\n fill(0);\n for (let part of this.body) {\n rect(part.x, part.y, gridSize, gridSize);\n }\n }\n}\n\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW && direction.x === 0) {\n direction = createVector(-1, 0);\n } else if (keyCode === RIGHT_ARROW && direction.x === 0) {\n direction = createVector(1, 0);\n } else if (keyCode === UP_ARROW && direction.y === 0) {\n direction = createVector(0, -1);\n } else if (keyCode === DOWN_ARROW && direction.y === 0) {\n direction = createVector(0, 1);\n }\n}// script.js\n\n\nlet isGameOver = false; // Track game over state\n\nfunction setup() {\n createCanvas(400, 400); \n frameRate(gameSpeed); \n resetGame();\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n if (isGameOver) {\n showGameOverScreen();\n } else {\n snake.update();\n snake.show();\n checkCollision();\n }\n}\n\nfunction resetGame() {\n snake = new Snake();\n direction = createVector(1, 0);\n isGameOver = false;\n}\n\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.add(direction.copy().mult(gridSize));\n this.body.shift();\n this.body.push(head);\n }\n\n show() {\n fill(0);\n for (let part of this.body) {\n rect(part.x, part.y, gridSize, gridSize);\n }\n }\n}\n\nfunction checkCollision() {\n let head = snake.body[snake.body.length - 1];\n\n // Check if snake hits the walls\n if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {\n isGameOver = true;\n }\n}\n\nfunction showGameOverScreen() {\n fill(255, 0, 0);\n textSize(32);\n textAlign(CENTER, CENTER);\n text('Game Over', width / 2, height / 2 - 20);\n text('Press R to Restart', width / 2, height / 2 + 20);\n}\n\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW && direction.x === 0) {\n direction = createVector(-1, 0);\n } else if (keyCode === RIGHT_ARROW && direction.x === 0) {\n direction = createVector(1, 0);\n } else if (keyCode === UP_ARROW && direction.y === 0) {\n direction = createVector(0, -1);\n } else if (keyCode === DOWN_ARROW && direction.y === 0) {\n direction = createVector(0, 1);\n }\n\n if (keyCode === 82 && isGameOver) { // 'R' key to restart\n resetGame();\n }\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Slithering Snake Game\n \n \n \n \n\n\n \n\n"},"chat_history":[{"message":"make me a game like google snake","project_id":10509,"created_at":"2025-11-13T16:18:21.510399Z","output_tokens":null,"sender":"human","code_id":293002,"deleted":0,"input_tokens":null,"id":179094},{"message":"Let's get started!\n Errors:\n","project_id":10509,"created_at":"2025-11-13T16:18:35.833033Z","output_tokens":null,"sender":"client_script","code_id":293002,"deleted":0,"input_tokens":null,"id":179101},{"message":"Great! Before we dive into building the game, could you tell me a bit more about your idea for this project? Are you imagining a game similar to the classic snake game with a moving snake and food to eat? Or do you have any specific features in mind that you'd like to include?","project_id":10509,"created_at":"2025-11-13T16:18:36.251588Z","output_tokens":69,"sender":"ai","code_id":293002,"deleted":0,"input_tokens":2616,"id":179102},{"message":"slower speed the controlls are the arrow keys and the speed is slower and the map is smaller","project_id":10509,"created_at":"2025-11-13T16:19:08.640242Z","output_tokens":null,"sender":"human","code_id":293002,"deleted":0,"input_tokens":null,"id":179115},{"message":"Got it! We can make the snake game with the arrow keys for control, a smaller map, and a slower speed. Let's start by setting up the basic game mechanics for the snake and its movement. I'll guide you on how to implement these features step-by-step.\n\nLet's begin by defining the snake and its movement logic. We'll create a snake that moves based on the arrow keys, and we'll set the game to update at a slower speed. \n\nHere's how we can start:\n\n1. Define a Snake class to manage the snake's properties and behavior.\n2. Implement movement controls using the arrow keys.\n3. Set up the game with a smaller map and slower speed.\n\nLet's add the initial code for the Snake class and the movement logic.\n\n```javascript\n// script.js\n\nlet snake;\nlet gridSize = 20; // Size of each grid square\nlet direction;\nlet gameSpeed = 10; // Lower gameSpeed for slower movement\n\nfunction setup() {\n createCanvas(400, 400); // A smaller map size\n frameRate(gameSpeed); // Set game speed\n snake = new Snake();\n direction = createVector(1, 0);\n}\n\nfunction draw() {\n background(135, 206, 235);\n snake.update();\n snake.show();\n}\n\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.add(direction.copy().mult(gridSize));\n this.body.shift();\n this.body.push(head);\n }\n\n show() {\n fill(0);\n for (let part of this.body) {\n rect(part.x, part.y, gridSize, gridSize);\n }\n }\n}\n\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW && direction.x === 0) {\n direction = createVector(-1, 0);\n } else if (keyCode === RIGHT_ARROW && direction.x === 0) {\n direction = createVector(1, 0);\n } else if (keyCode === UP_ARROW && direction.y === 0) {\n direction = createVector(0, -1);\n } else if (keyCode === DOWN_ARROW && direction.y === 0) {\n direction = createVector(0, 1);\n }\n}\n```\n\n### Explanation:\n- **Snake Class**: Manages the snake's body and updates its position.\n- **Movement**: The snake moves in a grid-like manner, updating its direction based on arrow key presses.\n- **Game Speed**: The `frameRate` function controls how fast the game updates, allowing for slower movement.\n\nYou can replace the existing code in your `script.js` with this code to get started. Let me know how it goes or if you want to add more features!","project_id":10509,"created_at":"2025-11-13T16:19:09.069992Z","output_tokens":614,"sender":"ai","code_id":293002,"deleted":0,"input_tokens":2631,"id":179116},{"message":"make is die and respaw with a screen to respawn when it runs into the wall","project_id":10509,"created_at":"2025-11-13T16:20:21.721080Z","output_tokens":null,"sender":"human","code_id":293015,"deleted":0,"input_tokens":null,"id":179143},{"message":"To implement a feature where the snake dies upon hitting a wall and then displays a screen to respawn, we can follow these steps:\n\n1. **Detect Collision**: Check if the snake's head hits the walls of the canvas.\n2. **Display Respawn Screen**: Show a message when the snake dies, allowing the player to restart the game.\n3. **Restart Game**: Reset the game state when the player chooses to respawn.\n\nLet's go ahead and implement these features. I'll provide you with the code to update your `script.js` file.\n\n```javascript\n// script.js\n\nlet snake;\nlet gridSize = 20; \nlet direction;\nlet gameSpeed = 10; \nlet isGameOver = false; // Track game over state\n\nfunction setup() {\n createCanvas(400, 400); \n frameRate(gameSpeed); \n resetGame();\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n if (isGameOver) {\n showGameOverScreen();\n } else {\n snake.update();\n snake.show();\n checkCollision();\n }\n}\n\nfunction resetGame() {\n snake = new Snake();\n direction = createVector(1, 0);\n isGameOver = false;\n}\n\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.add(direction.copy().mult(gridSize));\n this.body.shift();\n this.body.push(head);\n }\n\n show() {\n fill(0);\n for (let part of this.body) {\n rect(part.x, part.y, gridSize, gridSize);\n }\n }\n}\n\nfunction checkCollision() {\n let head = snake.body[snake.body.length - 1];\n\n // Check if snake hits the walls\n if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {\n isGameOver = true;\n }\n}\n\nfunction showGameOverScreen() {\n fill(255, 0, 0);\n textSize(32);\n textAlign(CENTER, CENTER);\n text('Game Over', width / 2, height / 2 - 20);\n text('Press R to Restart', width / 2, height / 2 + 20);\n}\n\nfunction keyPressed() {\n if (keyCode === LEFT_ARROW && direction.x === 0) {\n direction = createVector(-1, 0);\n } else if (keyCode === RIGHT_ARROW && direction.x === 0) {\n direction = createVector(1, 0);\n } else if (keyCode === UP_ARROW && direction.y === 0) {\n direction = createVector(0, -1);\n } else if (keyCode === DOWN_ARROW && direction.y === 0) {\n direction = createVector(0, 1);\n }\n\n if (keyCode === 82 && isGameOver) { // 'R' key to restart\n resetGame();\n }\n}\n```\n\n### Explanation:\n- **Collision Detection**: The `checkCollision` function checks if the snake's head has moved outside the canvas boundaries.\n- **Game Over Screen**: When a collision is detected, `isGameOver` is set to `true`, and a message is displayed using `showGameOverScreen`.\n- **Restart Functionality**: Pressing the 'R' key resets the game to its initial state using the `resetGame` function.\n\nYou can replace the current code in your `script.js` file with this updated code. Let me know if you have any questions or need further adjustments!","project_id":10509,"created_at":"2025-11-13T16:20:22.203309Z","output_tokens":755,"sender":"ai","code_id":293015,"deleted":0,"input_tokens":2960,"id":179144},{"message":"Errors:\n%c * Tone.js v14.8.39 * ,Uncaught SyntaxError: Unexpected token '}' at 2:1 in script.js,\n🌸 p5.js says: There's a syntax error due to a symbol that wasn't expected at its place.\nUsually this is due to a typo. Check the line number in the error below for anything missing/extra.\nFor more: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong,Uncaught SyntaxError: Identifier 'snake' has already been declared at 60:5 in script.js\n Errors:\n%c * Tone.js v14.8.39 * \nUncaught SyntaxError: Unexpected token '}' at 2:1 in script.js\n\n🌸 p5.js says: There's a syntax error due to a symbol that wasn't expected at its place.\nUsually this is due to a typo. Check the line number in the error below for anything missing/extra.\nFor more: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Unexpected_token#What_went_wrong\nUncaught SyntaxError: Identifier 'snake' has already been declared at 60:5 in script.js","project_id":10509,"created_at":"2025-11-13T16:20:57.742077Z","output_tokens":null,"sender":"client_script","code_id":293034,"deleted":0,"input_tokens":null,"id":179155},{"message":"You have a couple of issues in your `script.js` file.\n\n1. **Unexpected token '}'**: This error typically occurs when there is an extra closing bracket or a missing opening bracket. In your code, you have two separate `setup` and `draw` functions defined, which is not allowed. You need to remove the duplicate definitions.\n\n2. **Identifier 'snake' has already been declared**: This error is due to declaring the variable `snake` twice in the same scope. Once you remove the duplicate `setup` and `draw` functions, this issue will also be resolved.\n\n### Steps to Fix:\n\n- **Remove the Duplicate Code**: You need to remove the second definition of `snake`, `gridSize`, `direction`, `gameSpeed`, and the second `setup` and `draw` functions.\n\nHere is what you should remove:\n```javascript\nlet snake;\nlet gridSize = 20; \nlet direction;\nlet gameSpeed = 10; \n```\nThis code should be removed as it duplicates the earlier declarations.\n\nAlso, remove the second occurrence of the `setup` and `draw` functions entirely (the one starting from `function setup()` and ending at the second `}` before `class Snake`).\n\n### Updated Code Example:\nMake sure your `script.js` looks like this after the changes:\n\n```javascript\nfunction setup() {\n createCanvas(400, 400); \n frameRate(gameSpeed); \n resetGame();\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n if (isGameOver) {\n showGameOverScreen();\n } else {\n snake.update();\n snake.show();\n checkCollision();\n }\n}\n\n// Rest of your existing code...\n```\n\nAfter making these adjustments, check to ensure there are no remaining syntax errors.\n\nRemember to click the 'Where does this code go?' button for more guidance!","project_id":10509,"created_at":"2025-11-13T16:20:58.184358Z","output_tokens":423,"sender":"ai","code_id":293034,"deleted":0,"input_tokens":1670,"id":179156},{"message":"","project_id":10509,"created_at":"2025-11-13T16:21:54.471720Z","output_tokens":null,"sender":"client_script","code_id":293043,"deleted":0,"input_tokens":null,"id":179174},{"message":"","project_id":10509,"created_at":"2025-11-13T16:22:22.789787Z","output_tokens":null,"sender":"client_script","code_id":293043,"deleted":0,"input_tokens":null,"id":179184}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}