Yoshi Maze Game

{"name":"Yoshi Maze Game","description":"Embark on a thrilling adventure with Yoshi as you navigate through a series of challenging mazes. Avoid obstacles, collect coins, and race against the clock to reach the end. Perfect for learning basic programming while having fun in a whimsical world. Dive into the maze and help Yoshi find his way home!","photo":null,"view_count":2,"fork_count":1,"expires_at":null,"created_at":"2025-03-20T17:28:20.335103Z","updated_at":"2025-03-20T17:28:20.335106Z","user_id":246,"status":"PRIVATE","parent_id":null,"id":6400,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let yoshi;\n\nlet keys = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n yoshi = new Yoshi();\n\n // Create some keys at random positions\n for (let i = 0; i < 5; i++) {\n keys.push({\n x: random(50, width - 50),\n y: random(50, height - 50),\n size: 20\n });\n }\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n // Display and move Yoshi\n yoshi.move();\n yoshi.display();\n\n // Display the keys\n for (let key of keys) {\n textSize(32);\n text('🔑', key.x, key.y);\n }\n}\n\nclass Yoshi {\n constructor() {\n this.x = width / 2;\n this.y = height / 2;\n this.size = 20;\n }\n\n move() {\n this.x = mouseX;\n this.y = mouseY;\n }\n\n display() {\n fill(0, 255, 0);\n rect(this.x, this.y, this.size, this.size);\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Yoshi Maze Game\n \n \n\n\n \n\n"},"chat_history":[{"project_id":6400,"message":"yoshi maze game ","created_at":"2025-03-20T17:28:20.481020Z","output_tokens":null,"code_id":218462,"sender":"human","deleted":0,"input_tokens":null,"id":118862},{"project_id":6400,"message":"Let's get started!\n Errors:\n","created_at":"2025-03-20T17:28:24.433132Z","output_tokens":null,"code_id":218462,"sender":"client_script","deleted":0,"input_tokens":null,"id":118863},{"project_id":6400,"message":"Great! Since you mentioned a \"Yoshi Maze Game,\" could you tell me more about your idea? For example, what kind of gameplay do you envision? Would you like to focus on aspects like movement, obstacles, or scoring? Let me know so we can start building it together!","created_at":"2025-03-20T17:28:24.646856Z","output_tokens":65,"code_id":218462,"sender":"ai","deleted":0,"input_tokens":2544,"id":118864},{"project_id":6400,"message":"lets add some keys to collect and use the mouse to move around ","created_at":"2025-03-20T17:28:36.831635Z","output_tokens":null,"code_id":218462,"sender":"human","deleted":0,"input_tokens":null,"id":118865},{"project_id":6400,"message":"Adding keys to collect and using the mouse for movement sounds like a fun idea! Let's start by implementing these features step by step. \n\nFirst, we'll need to set up a way for the player (Yoshi) to move around using the mouse. Then, we'll create some collectible keys in the maze. \n\nHere's what we'll do:\n1. Implement mouse movement for Yoshi.\n2. Add collectible keys scattered around the maze.\n\nLet's start with allowing Yoshi to move with the mouse. I'll guide you through adding this feature. \n\nAre you planning to use a specific emoji or shape to represent Yoshi and the keys?","created_at":"2025-03-20T17:28:36.840770Z","output_tokens":145,"code_id":218462,"sender":"ai","deleted":0,"input_tokens":2553,"id":118866},{"project_id":6400,"message":"just a green swaure for yoshi and key emoji for the keys ","created_at":"2025-03-20T17:29:00.668254Z","output_tokens":null,"code_id":218462,"sender":"human","deleted":0,"input_tokens":null,"id":118867},{"project_id":6400,"message":"Great choice! We'll use a green square to represent Yoshi and key emojis for the collectibles. Let's start by allowing Yoshi to move with the mouse.\n\nI'll guide you through modifying the code to achieve this:\n\n1. **Create a Yoshi class** to encapsulate the player's properties and behavior.\n2. **Implement mouse movement** for Yoshi.\n3. **Add keys** to the canvas at random positions.\n\nLet's start by creating the `Yoshi` class and enabling mouse movement. \n\nAdd the following code to `script.js`:\n\n```javascript\n// script.js\nlet yoshi;\nlet keys = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n yoshi = new Yoshi();\n\n // Create some keys at random positions\n for (let i = 0; i < 5; i++) {\n keys.push({\n x: random(50, width - 50),\n y: random(50, height - 50),\n size: 20\n });\n }\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n // Display and move Yoshi\n yoshi.move();\n yoshi.display();\n\n // Display the keys\n for (let key of keys) {\n textSize(32);\n text('🔑', key.x, key.y);\n }\n}\n\nclass Yoshi {\n constructor() {\n this.x = width / 2;\n this.y = height / 2;\n this.size = 20;\n }\n\n move() {\n this.x = mouseX;\n this.y = mouseY;\n }\n\n display() {\n fill(0, 255, 0);\n rect(this.x, this.y, this.size, this.size);\n }\n}\n```\n\n### Explanation:\n- **Yoshi Class**: This class represents Yoshi as a green square and handles its movement and display.\n- **Mouse Movement**: The `move()` method updates Yoshi's position to follow the mouse.\n- **Keys**: Five key emojis are randomly placed on the canvas.\n\nNext, we can add logic to collect keys when Yoshi touches them. Let me know if you're ready for that!","created_at":"2025-03-20T17:29:00.696766Z","output_tokens":455,"code_id":218462,"sender":"ai","deleted":0,"input_tokens":2555,"id":118868}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}