Emoji Adventure

{"name":"Emoji Adventure","description":null,"photo":null,"view_count":11,"fork_count":0,"expires_at":null,"created_at":"2024-10-24T22:29:34.161720Z","updated_at":"2024-10-24T22:29:34.161721Z","user_id":13,"status":"PRIVATE","parent_id":null,"id":4027,"user":{"username":"eragon","id":13,"password_hash":null,"created_at":"2023-12-12T19:34:01.315640Z","reset_token":null,"stripe_customer_id":null,"seats":null,"photo":null,"email":null,"recess_id":"bdb156dc-6ed1-1bfb-5038-ec3c338ccf57","updated_at":"2023-12-12T19:34:01.315643Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let selectedObject = 'gun';\n\nlet projectile = null;\n\nlet isDrawingMode = false;\n\nlet projectileVelocity;\n\nlet drawnPoints = [];\n\nlet smallestPoint = null;\n\nlet strokeWeightValue = 4;\n\nlet player;\n\n// Variable to store the player's position\nlet playerVelocity;\n\n// Variable to store the player's velocity\nlet isGrounded = true;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(255); // Set a white background\n\n projectileVelocity = createVector(0, 0); // Initialize the projectileVelocity vector\n player = []; // Initialize player as an empty array\n playerVelocity = createVector(0, 0); // Initialize the player's velocity\n\n const selector = document.getElementById('objectSelector');\n selector.addEventListener('change', (event) => {\n selectedObject = event.target.value;\n });\n}\n\nfunction draw() {\n background(255); // Clear the canvas each frame\n\n // Check if drawing mode is active and the mouse is pressed\n if (isDrawingMode && mouseIsPressed) {\n stroke(0); // Black color for drawing\n strokeWeight(strokeWeightValue); // Use the stroke weight value\n\n // Draw a line from the previous mouse position to the current position\n line(pmouseX, pmouseY, mouseX, mouseY);\n\n // Store the current mouse position in the drawnPoints array\n drawnPoints.push(createVector(mouseX, mouseY));\n }\n\n // Draw and update the projectile if it exists\n if (projectile) {\n fill(255, 0, 0); // Red color for projectile\n noStroke();\n ellipse(projectile.x, projectile.y, 10, 10); // Draw the projectile as a circle\n projectile.add(projectileVelocity); // Move the projectile in the calculated direction\n\n // Remove the projectile if it goes off screen\n if (projectile.x < 0 || projectile.x > width || projectile.y < 0 || projectile.y > height) {\n projectile = null;\n }\n }\n\n // Render player shape and handle movement\n if (player && selectedObject === 'player') {\n // Update player movement if the player is selected and drawing mode is off\n if (!isDrawingMode) {\n let moveAmount = createVector(0, 0);\n\n if (keyIsDown(65)) { // 'A' key for left\n moveAmount.x -= 5;\n }\n if (keyIsDown(68)) { // 'D' key for right\n moveAmount.x += 5;\n }\n if (keyIsDown(87) && isGrounded) { // 'W' key for jump\n playerVelocity.y = -10;\n isGrounded = false;\n }\n\n // Apply gravity\n playerVelocity.y += 0.5;\n moveAmount.add(playerVelocity);\n\n // Move entire shape\n player.forEach(point => point.add(moveAmount));\n\n // Check for ground collision with a higher ground level\n const groundLevel = height - 60; // Adjust this value to change the ground height\n if (player.some(point => point.y >= groundLevel)) {\n player.forEach(point => point.y = min(point.y, groundLevel));\n playerVelocity.y = 0;\n isGrounded = true;\n }\n }\n\n // Draw the player shape\n stroke(0);\n strokeWeight(strokeWeightValue);\n noFill();\n beginShape();\n player.forEach(point => vertex(point.x, point.y));\n endShape();\n }\n}\n\nfunction calculateDirection() {\n if (drawnPoints.length < 2) return;\n\n let startPoint = drawnPoints[0];\n let endPoint = drawnPoints[drawnPoints.length - 1];\n\n // Calculate the direction vector from startPoint to endPoint\n let direction = p5.Vector.sub(endPoint, startPoint);\n direction.normalize(); // Normalize the direction vector\n projectileVelocity = direction.mult(5); // Set the projectile's velocity\n}\n\nfunction calculateSmallestPoint() {\n if (drawnPoints.length === 0) return null;\n\n let minPoint = drawnPoints[0];\n let minDistance = dist(0, 0, minPoint.x, minPoint.y);\n\n for (let point of drawnPoints) {\n let distance = dist(0, 0, point.x, point.y);\n if (distance < minDistance) {\n minDistance = distance;\n minPoint = point;\n }\n }\n\n return minPoint;\n}\n\nfunction mouseWheel(event) {\n strokeWeightValue += event.delta > 0 ? 1 : -1; // Increase or decrease stroke weight\n strokeWeightValue = constrain(strokeWeightValue, 1, 20); // Constrain stroke weight between 1 and 20\n}\n\nfunction keyPressed() {\n // Toggle drawing mode when '2' key is pressed\n if (keyCode === 50) { // 50 is the keyCode for '2'\n isDrawingMode = !isDrawingMode; // Toggle drawing mode\n\n if (!isDrawingMode && selectedObject === 'player') { // When exiting drawing mode\n // If the player object is selected, create a player shape from drawn points\n if (drawnPoints.length > 0) {\n player = drawnPoints; // Assign the drawn points to player\n playerVelocity = createVector(0, 0); // Reset player velocity\n drawnPoints = []; // Clear the drawn points\n }\n } else if (!isDrawingMode) { // When exiting drawing mode without player\n // Calculate the smallest point\n smallestPoint = calculateSmallestPoint();\n calculateDirection(); // Calculate the direction based on drawn points\n drawnPoints = []; // Clear the drawn points\n }\n }\n\n // Fire a projectile when '1' key is pressed\n if (keyCode === 49 && selectedObject === 'gun') { // 49 is the keyCode for '1'\n if (!projectile && smallestPoint) { // Only create a new projectile if one doesn't exist\n projectile = createVector(smallestPoint.x, smallestPoint.y); // Create a projectile at the smallest point\n }\n }\n\n // Clear the canvas when '3' key is pressed\n if (keyCode === 51) { // 51 is the keyCode for '3'\n background(255); // Clear the canvas with a white background\n }\n}\n\n","style.css":"body {\n margin: 0;\n}\n\n#menu {\n position: fixed;\n top: 10px;\n left: 10px;\n z-index: 1000;\n background: white;\n padding: 10px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n#objectSelector {\n width: 100px;\n}","index.html":"\n\n\n\n \n \n Emoji Adventure\n \n \n\n\n\n \n \n\n\n"},"chat_history":[{"code_id":169748,"sender":"human","deleted":0,"input_tokens":null,"id":83131,"message":"Let's get started!","project_id":4027,"created_at":"2024-10-24T22:29:56.266494Z","output_tokens":null},{"code_id":169748,"sender":"ai","deleted":0,"input_tokens":null,"id":83132,"message":"Great! Could you tell me more about your project idea? Are you building a game, a website, an animation, or something else? What features or elements would you like to include in your project?","project_id":4027,"created_at":"2024-10-24T22:29:56.307823Z","output_tokens":null},{"code_id":169752,"sender":"human","deleted":0,"input_tokens":null,"id":83137,"message":"can we make it so that you draw on the screen, and it will affect the scene","project_id":4027,"created_at":"2024-10-24T22:30:41.444437Z","output_tokens":null},{"code_id":169752,"sender":"ai","deleted":0,"input_tokens":null,"id":83138,"message":"Sure, we can definitely implement a feature where you can draw on the screen and have it interact with the scene in some way. Could you tell me more about how you'd like the drawing to affect the scene? For example, should it change colors, create patterns, or interact with other elements?","project_id":4027,"created_at":"2024-10-24T22:30:41.454562Z","output_tokens":null},{"code_id":169753,"sender":"human","deleted":0,"input_tokens":null,"id":83139,"message":"its just white]","project_id":4027,"created_at":"2024-10-24T22:30:54.084713Z","output_tokens":null},{"code_id":169753,"sender":"ai","deleted":0,"input_tokens":null,"id":83140,"message":"To get started with drawing on the screen, we can add some functionality to let you draw with your mouse. This will allow us to see the drawing on the canvas. Let's implement a basic drawing feature first. \n\nHere's how you can add drawing functionality:\n\n1. We'll update the `draw` function to allow drawing with the mouse.\n2. You can decide how the drawing affects the scene after we have the basic drawing functionality.\n\nLet's add the drawing feature:\n\n```javascript\nfunction draw() {\n // Check if the mouse is pressed\n if (mouseIsPressed) {\n // Set the stroke color and weight\n stroke(0); // Black color\n strokeWeight(4); // Thickness of the line\n\n // Draw a line from the previous mouse position to the current position\n line(pmouseX, pmouseY, mouseX, mouseY);\n }\n}\n```\n\n- This code will draw a line wherever you drag the mouse while holding it down.\n- `stroke(0)` sets the color of the line to black.\n- `strokeWeight(4)` sets the thickness of the line.\n- `line(pmouseX, pmouseY, mouseX, mouseY)` draws a line from the previous mouse position to the current position.\n\nYou can replace the existing `draw` function in your `script.js` file with this new code. Once you've done this, let me know how you'd like the drawing to affect your scene!","project_id":4027,"created_at":"2024-10-24T22:30:54.165665Z","output_tokens":null},{"code_id":169769,"sender":"human","deleted":0,"input_tokens":null,"id":83143,"message":"is there a way to basically have an option that is in the form of a scrollable menu, and you select the property of what your gonna draw on that side, ie: a gun, a car, ThE PLaYeR","project_id":4027,"created_at":"2024-10-24T22:33:27.755114Z","output_tokens":null},{"code_id":169769,"sender":"ai","deleted":0,"input_tokens":null,"id":83144,"message":"Yes, we can create a scrollable menu with options to select different properties or objects to draw, such as a gun, a car, or the player. We can implement this using HTML for the menu and JavaScript to handle the selection and drawing.\n\nLet's start by creating a basic scrollable menu in HTML, and then we'll update the JavaScript to handle the selection.\n\nHere's how you can add a scrollable menu:\n\n### HTML\nWe'll add a simple menu to the HTML file.\n\n```html\n\n\n\n \n \n Emoji Adventure\n \n \n\n\n \n \n\n\n```\n\n### CSS\nLet's style the menu to make it scrollable and visually appealing.\n\n```css\nbody { \n margin: 0; \n}\n\n#menu {\n position: fixed;\n top: 10px;\n left: 10px;\n z-index: 1000;\n background: white;\n padding: 10px;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n#objectSelector {\n width: 100px;\n}\n```\n\n### JavaScript\nWe will update the JavaScript to use the selected option.\n\n```javascript\nlet selectedObject = 'gun'; // Default selected object\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(255); // Set a white background\n\n const selector = document.getElementById('objectSelector');\n selector.addEventListener('change', (event) => {\n selectedObject = event.target.value;\n });\n}\n\nfunction draw() {\n // Check if the mouse is pressed\n if (mouseIsPressed) {\n stroke(0); // Black color\n strokeWeight(5); // Thickness of the line\n\n // Draw a line from the previous mouse position to the current position\n line(pmouseX, pmouseY, mouseX, mouseY);\n\n // Example of different drawing based on selected object\n if (selectedObject === 'gun') {\n // Add gun drawing logic here\n } else if (selectedObject === 'car') {\n // Add car drawing logic here\n } else if (selectedObject === 'player') {\n // Add player drawing logic here\n }\n }\n}\n```\n\n### Explanation\n- We've added a `