Jippity made this

{"name":"Sssslithering Snake Game","description":"Play the classic 'Snake' game and guide the snake to grow longer while avoiding the walls and its own tail. Can you beat your high score?","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/jdugdv1j2wf1hwcsatmj","view_count":8,"fork_count":0,"expires_at":"2024-06-15T17:37:27.342718","created_at":"2024-06-14T17:37:27.342718Z","updated_at":"2024-06-14T17:48:48.018655Z","user_id":97,"status":"PUBLIC","parent_id":null,"id":1880,"user":{"photo":null,"email":"leobm365@gmail.com","recess_id":"e4690172-2707-46c3-8bcb-1a2b76e418e9","created_at":"2024-05-02T18:14:08.971561Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"super_kamin","id":97,"password_hash":"$2b$12$PMJB58N8WLDuLopyknSp6.czfqNoUg9tTH9bQqK.0xzUbXRKoCWEW","updated_at":"2024-05-02T18:14:08.971564Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let snake;\r\nlet food;\r\nlet direction;\r\nlet score = 0;\r\nlet snakeHeadImg;\r\n\r\nlet eatSound;\r\nlet gameOverSound;\r\n\r\nfunction preload() {\r\n snakeHeadImg = loadImage(\"@asset('snake')\");\r\n eatSound = loadSound(\"@asset('eat')\");\r\n gameOverSound = loadSound(\"@asset('gameover')\");\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(400, 400);\r\n frameRate(10); // Controls the speed of the snake\r\n snake = new Snake();\r\n food = new Food();\r\n direction = createVector(1, 0); // Initial direction: moving right\r\n}\r\n\r\nfunction draw() {\r\n background(220);\r\n if (snake.eat(food)) {\r\n food.pickLocation();\r\n score++;\r\n }\r\n snake.update();\r\n snake.show();\r\n food.show();\r\n displayScore();\r\n}\r\n\r\nclass Food {\r\n constructor() {\r\n this.pickLocation();\r\n }\r\n\r\n pickLocation() {\r\n let cols = floor(width / 20);\r\n let rows = floor(height / 20);\r\n this.location = createVector(floor(random(cols)), floor(random(rows))).mult(20);\r\n }\r\n\r\n show() {\r\n textSize(20);\r\n text('🍎', this.location.x, this.location.y + 18); // Adjust y for vertical centering\r\n }\r\n}\r\nclass Snake {\r\n constructor() {\r\n this.body = [createVector(floor(width / 2), floor(height / 2))];\r\n this.xdir = 1;\r\n this.ydir = 0;\r\n this.len = 1;\r\n }\r\n\r\n setDir(x, y) {\r\n this.xdir = x;\r\n this.ydir = y;\r\n }\r\n\r\n update() {\r\n let head = this.body[this.body.length - 1].copy();\r\n head.x += this.xdir * 20;\r\n head.y += this.ydir * 20;\r\n \r\n if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || this.collides(head)) {\r\n this.gameOver();\r\n } else {\r\n this.body.push(head);\r\n\r\n if (this.body.length > this.len) {\r\n this.body.shift();\r\n }\r\n }\r\n }\r\n\r\n collides(pos) {\r\n for (let i = 0; i < this.body.length; i++) {\r\n if (this.body[i].x === pos.x && this.body[i].y === pos.y) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n gameOver() {\r\n noLoop();\r\n gameOverSound.play();\r\n fill(0);\r\n textSize(32);\r\n textAlign(CENTER, CENTER);\r\n text('Game Over! Press R to Restart', width / 2, height / 2);\r\n }\r\n\r\n eat(pos) {\r\n let head = this.body[this.body.length - 1];\r\n if (head.x === pos.location.x && head.y === pos.location.y) {\r\n this.len++;\r\n eatSound.play();\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n show() {\r\n for (let i = 0; i < this.body.length; i++) {\r\n if (i == this.body.length - 1) {\r\n // Draw the snake's head using the image\r\n image(snakeHeadImg, this.body[i].x, this.body[i].y, 20, 20);\r\n } else {\r\n fill(0);\r\n noStroke();\r\n rect(this.body[i].x, this.body[i].y, 20, 20);\r\n }\r\n }\r\n }\r\n}\r\nlet highScore = 0;\r\n\r\nfunction displayScore() {\r\n fill(0);\r\n textSize(16);\r\n textAlign(LEFT, TOP);\r\n text('Score: ' + score, 10, 10);\r\n text('High Score: ' + highScore, 10, 30);\r\n}\r\n\r\nfunction keyPressed() {\r\n if (keyCode === UP_ARROW && direction.y !== 1) {\r\n snake.setDir(0, -1);\r\n direction = createVector(0, -1);\r\n } else if (keyCode === DOWN_ARROW && direction.y !== -1) {\r\n snake.setDir(0, 1);\r\n direction = createVector(0, 1);\r\n } else if (keyCode === LEFT_ARROW && direction.x !== 1) {\r\n snake.setDir(-1, 0);\r\n direction = createVector(-1, 0);\r\n } else if (keyCode === RIGHT_ARROW && direction.x !== -1) {\r\n snake.setDir(1, 0);\r\n direction = createVector(1, 0);\r\n } else if (key === 'R' || key === 'r') {\r\n restartGame();\r\n }\r\n}\r\n\r\nfunction restartGame() {\r\n if (score > highScore) {\r\n highScore = score;\r\n }\r\n score = 0;\r\n snake = new Snake();\r\n food = new Food();\r\n direction = createVector(1, 0); // Initial direction: moving right\r\n loop();\r\n}","style.css":"","index.html":"\r\n\r\n\r\n\r\n \r\n \r\n Jippity made this\r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n"},"chat_history":[{"project_id":1880,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-06-14T17:37:30.899762Z","output_tokens":null,"code_id":102640,"input_tokens":null,"id":51243},{"project_id":1880,"sender":"ai","message":"Alright! Let's start by setting up the basic structure of the game and then implement user input for controlling the snake's movement.\n\nFirst, we'll define the snake and create a function to update its position based on user input.\n\n```javascript\nlet snake;\nlet direction;\n\nfunction setup() {\n createCanvas(400, 400);\n frameRate(10); // Controls the speed of the snake\n snake = new Snake();\n direction = createVector(1, 0); // Initial direction: moving right\n}\n\nfunction draw() {\n background(220);\n snake.update();\n snake.show();\n}\n```\n\nNext, we'll define the Snake class with basic movement functionality.\n\n```javascript\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n this.xdir = 1;\n this.ydir = 0;\n }\n\n setDir(x, y) {\n this.xdir = x;\n this.ydir = y;\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.x += this.xdir * 20;\n head.y += this.ydir * 20;\n this.body.shift();\n this.body.push(head);\n }\n\n show() {\n for (let i = 0; i < this.body.length; i++) {\n fill(0);\n noStroke();\n rect(this.body[i].x, this.body[i].y, 20, 20);\n }\n }\n}\n```\n\nFinally, let's implement user input to control the snake's movement.\n\n```javascript\nfunction keyPressed() {\n if (keyCode === UP_ARROW && direction.y !== 1) {\n snake.setDir(0, -1);\n direction = createVector(0, -1);\n } else if (keyCode === DOWN_ARROW && direction.y !== -1) {\n snake.setDir(0, 1);\n direction = createVector(0, 1);\n } else if (keyCode === LEFT_ARROW && direction.x !== 1) {\n snake.setDir(-1, 0);\n direction = createVector(-1, 0);\n } else if (keyCode === RIGHT_ARROW && direction.x !== -1) {\n snake.setDir(1, 0);\n direction = createVector(1, 0);\n }\n}\n```\n\n### Explanation:\n- **setup()**: Initializes the canvas, sets the frame rate, and creates a new Snake object.\n- **draw()**: Continuously updates the background and the snake's position.\n- **Snake class**: Handles the snake's body, direction, and movement.\n- **setDir(x, y)**: Sets the snake's direction based on user input.\n- **keyPressed()**: Captures arrow key presses and updates the snake's direction while preventing it from moving in the opposite direction immediately.\n\nThis sets up the basic movement for the snake. Now you can control the snake using the arrow keys!","deleted":0,"created_at":"2024-06-14T17:37:30.906580Z","output_tokens":null,"code_id":102640,"input_tokens":null,"id":51244},{"project_id":1880,"sender":"human","message":"improove your game","deleted":0,"created_at":"2024-06-14T17:41:03.318273Z","output_tokens":null,"code_id":102652,"input_tokens":null,"id":51247},{"project_id":1880,"sender":"ai","message":"Let's improve the game by adding a few features:\n1. Food for the snake to eat.\n2. Growing the snake when it eats the food.\n3. End the game when the snake runs into the walls or itself.\n4. Display the current score.\n\nWe'll start by adding a food item that the snake can eat.\n\n### Step 1: Add Food\n\nFirst, define a `Food` class and add it to the game.\n\n```javascript\nlet snake;\nlet food;\nlet direction;\nlet score = 0;\n\nfunction setup() {\n createCanvas(400, 400);\n frameRate(10); // Controls the speed of the snake\n snake = new Snake();\n food = new Food();\n direction = createVector(1, 0); // Initial direction: moving right\n}\n\nfunction draw() {\n background(220);\n if (snake.eat(food)) {\n food.pickLocation();\n score++;\n }\n snake.update();\n snake.show();\n food.show();\n displayScore();\n}\n\nclass Food {\n constructor() {\n this.pickLocation();\n }\n\n pickLocation() {\n let cols = floor(width / 20);\n let rows = floor(height / 20);\n this.location = createVector(floor(random(cols)), floor(random(rows))).mult(20);\n }\n\n show() {\n fill(255, 0, 100);\n rect(this.location.x, this.location.y, 20, 20);\n }\n}\n```\n\n### Step 2: Grow the Snake and End the Game\n\nModify the `Snake` class to handle growing and game over conditions.\n\n```javascript\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n this.xdir = 1;\n this.ydir = 0;\n this.len = 1;\n }\n\n setDir(x, y) {\n this.xdir = x;\n this.ydir = y;\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.x += this.xdir * 20;\n head.y += this.ydir * 20;\n \n if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || this.collides(head)) {\n this.gameOver();\n } else {\n this.body.push(head);\n\n if (this.body.length > this.len) {\n this.body.shift();\n }\n }\n }\n\n collides(pos) {\n for (let i = 0; i < this.body.length; i++) {\n if (this.body[i].x === pos.x && this.body[i].y === pos.y) {\n return true;\n }\n }\n return false;\n }\n\n gameOver() {\n noLoop();\n fill(0);\n textSize(32);\n textAlign(CENTER, CENTER);\n text('Game Over!', width / 2, height / 2);\n }\n\n eat(pos) {\n let head = this.body[this.body.length - 1];\n if (head.x === pos.location.x && head.y === pos.location.y) {\n this.len++;\n return true;\n }\n return false;\n }\n\n show() {\n for (let i = 0; i < this.body.length; i++) {\n fill(0);\n noStroke();\n rect(this.body[i].x, this.body[i].y, 20, 20);\n }\n }\n}\n```\n\n### Step 3: Display the Score\n\nAdd a function to display the current score.\n\n```javascript\nfunction displayScore() {\n fill(0);\n textSize(16);\n textAlign(LEFT, TOP);\n text('Score: ' + score, 10, 10);\n}\n```\n\n### Explanation:\n- **Food class**: Handles the food's location and display.\n - **pickLocation()**: Randomly places the food on the grid.\n - **show()**: Draws the food on the canvas.\n- **Snake class**: Updated to handle growth and game over conditions.\n - **update()**: Checks for collisions and grows the snake when it eats food.\n - **collides(pos)**: Checks if the snake collides with itself.\n - **gameOver()**: Displays \"Game Over\" and stops the game loop.\n - **eat(pos)**: Checks if the snake's head is at the same position as the food.\n- **displayScore()**: Displays the current score on the canvas.\n\nWith these additions, the game now has food, a growing snake, game over conditions, and a score display!","deleted":0,"created_at":"2024-06-14T17:41:03.325708Z","output_tokens":null,"code_id":102652,"input_tokens":null,"id":51248},{"project_id":1880,"sender":"human","message":"make it better","deleted":0,"created_at":"2024-06-14T17:50:25.736384Z","output_tokens":null,"code_id":102661,"input_tokens":null,"id":51249},{"project_id":1880,"sender":"ai","message":"Let's enhance the game further by adding some visual improvements and a restart functionality. Specifically, we'll:\n1. Use the provided snake image for the snake's head.\n2. Add a restart functionality that allows the player to restart the game after it ends.\n\n### Step 1: Load and Use the Snake Image\n\nFirst, let's load the snake image in the preload function and use it for the snake's head.\n\n```javascript\nlet snake;\nlet food;\nlet direction;\nlet score = 0;\nlet snakeHeadImg;\n\nfunction preload() {\n snakeHeadImg = loadImage(\"@asset('snake')\");\n}\n\nfunction setup() {\n createCanvas(400, 400);\n frameRate(10); // Controls the speed of the snake\n snake = new Snake();\n food = new Food();\n direction = createVector(1, 0); // Initial direction: moving right\n}\n\nfunction draw() {\n background(220);\n if (snake.eat(food)) {\n food.pickLocation();\n score++;\n }\n snake.update();\n snake.show();\n food.show();\n displayScore();\n}\n```\n\nNext, use the image for the snake's head in the Snake class.\n\n```javascript\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n this.xdir = 1;\n this.ydir = 0;\n this.len = 1;\n }\n\n setDir(x, y) {\n this.xdir = x;\n this.ydir = y;\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.x += this.xdir * 20;\n head.y += this.ydir * 20;\n \n if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || this.collides(head)) {\n this.gameOver();\n } else {\n this.body.push(head);\n\n if (this.body.length > this.len) {\n this.body.shift();\n }\n }\n }\n\n collides(pos) {\n for (let i = 0; i < this.body.length; i++) {\n if (this.body[i].x === pos.x && this.body[i].y === pos.y) {\n return true;\n }\n }\n return false;\n }\n\n gameOver() {\n noLoop();\n fill(0);\n textSize(32);\n textAlign(CENTER, CENTER);\n text('Game Over! Press R to Restart', width / 2, height / 2);\n }\n\n eat(pos) {\n let head = this.body[this.body.length - 1];\n if (head.x === pos.location.x && head.y === pos.location.y) {\n this.len++;\n return true;\n }\n return false;\n }\n\n show() {\n for (let i = 0; i < this.body.length; i++) {\n if (i == this.body.length - 1) {\n // Draw the snake's head using the image\n image(snakeHeadImg, this.body[i].x, this.body[i].y, 20, 20);\n } else {\n fill(0);\n noStroke();\n rect(this.body[i].x, this.body[i].y, 20, 20);\n }\n }\n }\n}\n```\n\n### Step 2: Add Restart Functionality\n\nAdd a function that allows the player to restart the game by pressing the 'R' key after the game is over.\n\n```javascript\nfunction keyPressed() {\n if (keyCode === UP_ARROW && direction.y !== 1) {\n snake.setDir(0, -1);\n direction = createVector(0, -1);\n } else if (keyCode === DOWN_ARROW && direction.y !== -1) {\n snake.setDir(0, 1);\n direction = createVector(0, 1);\n } else if (keyCode === LEFT_ARROW && direction.x !== 1) {\n snake.setDir(-1, 0);\n direction = createVector(-1, 0);\n } else if (keyCode === RIGHT_ARROW && direction.x !== -1) {\n snake.setDir(1, 0);\n direction = createVector(1, 0);\n } else if (key === 'R' || key === 'r') {\n restartGame();\n }\n}\n\nfunction restartGame() {\n score = 0;\n snake = new Snake();\n food = new Food();\n direction = createVector(1, 0); // Initial direction: moving right\n loop();\n}\n```\n\n### Explanation:\n- **preload()**: Loads the snake image before the game starts.\n- **Snake class**: Uses the snake image for the snake's head.\n- **gameOver()**: Displays a message to press 'R' to restart.\n- **keyPressed()**: Checks for the 'R' key to restart the game.\n- **restartGame()**: Resets the game state, including the score, snake, and food, and restarts the game loop.\n\nThese changes will enhance the visual appeal of the game and add a convenient way to restart after the game ends.","deleted":0,"created_at":"2024-06-14T17:50:25.742058Z","output_tokens":null,"code_id":102661,"input_tokens":null,"id":51250},{"project_id":1880,"sender":"human","message":"improove your game","deleted":0,"created_at":"2024-06-14T17:54:10.676115Z","output_tokens":null,"code_id":102675,"input_tokens":null,"id":51257},{"project_id":1880,"sender":"ai","message":"Let's add more features to enhance the game further:\n1. Display the highest score.\n2. Add sound effects for eating food and game over.\n3. Make the food appear as an emoji 🍎 for better visuals.\n\n### Step 1: Display the Highest Score\n\nWe'll keep track of the highest score and display it on the screen.\n\n```javascript\nlet highScore = 0;\n\nfunction displayScore() {\n fill(0);\n textSize(16);\n textAlign(LEFT, TOP);\n text('Score: ' + score, 10, 10);\n text('High Score: ' + highScore, 10, 30);\n}\n```\n\n### Step 2: Add Sound Effects\n\nLoad sound effects in the preload function and play them at appropriate times.\n\n```javascript\nlet eatSound;\nlet gameOverSound;\n\nfunction preload() {\n snakeHeadImg = loadImage(\"@asset('snake')\");\n eatSound = loadSound(\"@asset('eat')\");\n gameOverSound = loadSound(\"@asset('gameover')\");\n}\n```\n\nPlay the sound effects when the snake eats food or the game is over.\n\n```javascript\nclass Snake {\n constructor() {\n this.body = [createVector(floor(width / 2), floor(height / 2))];\n this.xdir = 1;\n this.ydir = 0;\n this.len = 1;\n }\n\n setDir(x, y) {\n this.xdir = x;\n this.ydir = y;\n }\n\n update() {\n let head = this.body[this.body.length - 1].copy();\n head.x += this.xdir * 20;\n head.y += this.ydir * 20;\n \n if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height || this.collides(head)) {\n this.gameOver();\n } else {\n this.body.push(head);\n\n if (this.body.length > this.len) {\n this.body.shift();\n }\n }\n }\n\n collides(pos) {\n for (let i = 0; i < this.body.length; i++) {\n if (this.body[i].x === pos.x && this.body[i].y === pos.y) {\n return true;\n }\n }\n return false;\n }\n\n gameOver() {\n noLoop();\n gameOverSound.play();\n fill(0);\n textSize(32);\n textAlign(CENTER, CENTER);\n text('Game Over! Press R to Restart', width / 2, height / 2);\n }\n\n eat(pos) {\n let head = this.body[this.body.length - 1];\n if (head.x === pos.location.x && head.y === pos.location.y) {\n this.len++;\n eatSound.play();\n return true;\n }\n return false;\n }\n\n show() {\n for (let i = 0; i < this.body.length; i++) {\n if (i == this.body.length - 1) {\n // Draw the snake's head using the image\n image(snakeHeadImg, this.body[i].x, this.body[i].y, 20, 20);\n } else {\n fill(0);\n noStroke();\n rect(this.body[i].x, this.body[i].y, 20, 20);\n }\n }\n }\n}\n```\n\n### Step 3: Use Emoji for Food\n\nModify the `Food` class to use an emoji instead of a rectangle.\n\n```javascript\nclass Food {\n constructor() {\n this.pickLocation();\n }\n\n pickLocation() {\n let cols = floor(width / 20);\n let rows = floor(height / 20);\n this.location = createVector(floor(random(cols)), floor(random(rows))).mult(20);\n }\n\n show() {\n textSize(20);\n text('🍎', this.location.x, this.location.y + 18); // Adjust y for vertical centering\n }\n}\n```\n\n### Step 4: Update High Score on Restart\n\nUpdate the highest score when the game restarts.\n\n```javascript\nfunction restartGame() {\n if (score > highScore) {\n highScore = score;\n }\n score = 0;\n snake = new Snake();\n food = new Food();\n direction = createVector(1, 0); // Initial direction: moving right\n loop();\n}\n```\n\n### Explanation:\n- **displayScore()**: Now shows both the current score and the highest score.\n- **preload()**: Loads sound effects for eating food and game over.\n- **Snake class**: Plays sound effects at appropriate times.\n- **Food class**: Displays food as an emoji.\n- **restartGame()**: Updates the highest score when the game restarts.\n\nThese changes will make the game more engaging with sound effects, better visuals for food, and a high score display!","deleted":0,"created_at":"2024-06-14T17:54:10.681739Z","output_tokens":null,"code_id":102675,"input_tokens":null,"id":51258}],"assets":[{"cloudinary_id":"jdugdv1j2wf1hwcsatmj","name":"snake","deleted":false,"id":7644,"created_at":"2024-06-14T17:48:42.487861Z","project_id":1880,"resource_type":"image"}],"messages_sent":4,"comments":[],"steps":[{"instruction":"Implement user input and controls for the snake's movement.","title":"Snake Movement","created_at":"2024-06-14T17:37:27.347821","project_id":1880,"complete":false,"step_number":0,"updated_at":"2024-06-14T17:37:27.347823","id":9788},{"instruction":"Create food objects appearing randomly on the screen for the snake to eat.","title":"Food Generation","created_at":"2024-06-14T17:37:27.347885","project_id":1880,"complete":false,"step_number":1,"updated_at":"2024-06-14T17:37:27.347885","id":9789},{"instruction":"Implement game logic for collision detection with walls and the snake's own tail.","title":"Collision Detection","created_at":"2024-06-14T17:37:27.347928","project_id":1880,"complete":false,"step_number":2,"updated_at":"2024-06-14T17:37:27.347928","id":9790},{"instruction":"Track and display the player's score as they play the game.","title":"Scoring System","created_at":"2024-06-14T17:37:27.347997","project_id":1880,"complete":false,"step_number":3,"updated_at":"2024-06-14T17:37:27.347998","id":9791},{"instruction":"Implement the game over condition when the snake collides with walls or itself.","title":"Game Over Condition","created_at":"2024-06-14T17:37:27.348043","project_id":1880,"complete":false,"step_number":4,"updated_at":"2024-06-14T17:37:27.348043","id":9792}]}