Pokedex Adventure Game

{"name":"Pokedex Adventure Game","description":"Dive into the world of Pokémon with the Pokedex Adventure Game! Explore a vibrant landscape, catch Pokémon, and learn fun facts about each one you encounter. With simple controls and engaging visuals, this game is perfect for both beginners and Pokémon fans alike.","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-11-14T22:13:37.825593Z","updated_at":"2024-11-14T22:13:37.825600Z","user_id":4,"status":"PRIVATE","parent_id":null,"id":4598,"user":{"photo":null,"email":null,"recess_id":"803a180d-df5e-dbf8-2d4b-a79d02b6dad5","created_at":"2023-12-11T22:20:59.207232Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"pandahbomb","id":4,"password_hash":null,"updated_at":"2023-12-11T22:20:59.207234Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// script.js\n\nlet circleDescription = false;\nlet squareDescription = false;\nlet triangleDescription = false;\nlet starDescription = false;\nlet pentagonDescription = false;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear background every frame\n\n // Draw circle with a face\n fill(255, 204, 0); // Yellow color\n ellipse(200, 200, 100, 100);\n fill(0); // Black color for face\n ellipse(185, 190, 10, 10); // Left eye\n ellipse(215, 190, 10, 10); // Right eye\n arc(200, 210, 50, 20, 0, PI); // Smile\n\n // Draw square with a face\n fill(0, 255, 0); // Green color\n rect(400, 150, 100, 100);\n fill(0); // Black color for face\n ellipse(425, 180, 10, 10); // Left eye\n ellipse(475, 180, 10, 10); // Right eye\n arc(450, 210, 50, 20, 0, PI); // Smile\n\n // Draw triangle with a face\n fill(255, 0, 0); // Red color\n triangle(600, 250, 550, 350, 650, 350);\n fill(0); // Black color for face\n ellipse(580, 280, 10, 10); // Left eye\n ellipse(620, 280, 10, 10); // Right eye\n arc(600, 300, 40, 20, 0, PI); // Smile\n\n // Draw star with a face\n fill(255, 165, 0); // Orange color\n drawStar(800, 200, 30, 70, 5);\n fill(0); // Black color for face\n ellipse(800, 200, 10, 10); // Left eye\n ellipse(820, 200, 10, 10); // Right eye\n arc(810, 220, 40, 20, 0, PI); // Smile\n\n // Draw pentagon with a face\n fill(0, 0, 255); // Blue color\n drawPentagon(1000, 250, 50);\n fill(0); // Black color for face\n ellipse(980, 250, 10, 10); // Left eye\n ellipse(1020, 250, 10, 10); // Right eye\n arc(1000, 270, 40, 20, 0, PI); // Smile\n\n // Show descriptions\n if (circleDescription) {\n fill(255);\n textSize(16);\n text(\"Happy Circle\", 150, 320);\n }\n\n if (squareDescription) {\n fill(255);\n textSize(16);\n text(\"Jolly Square\", 380, 320);\n }\n\n if (triangleDescription) {\n fill(255);\n textSize(16);\n text(\"Cheerful Triangle\", 550, 400);\n }\n\n if (starDescription) {\n fill(255);\n textSize(16);\n text(\"Shiny Star\", 800, 400);\n }\n\n if (pentagonDescription) {\n fill(255);\n textSize(16);\n text(\"Brave Pentagon\", 1000, 400);\n }\n}\n\nfunction mousePressed() {\n // Check if mouse is over the circle\n if (dist(mouseX, mouseY, 200, 200) < 50) {\n circleDescription = true;\n setTimeout(() => circleDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the square\n if (mouseX > 400 && mouseX < 500 && mouseY > 150 && mouseY < 250) {\n squareDescription = true;\n setTimeout(() => squareDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the triangle\n if (isPointInTriangle(mouseX, mouseY, 600, 250, 550, 350, 650, 350)) {\n triangleDescription = true;\n setTimeout(() => triangleDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the star\n if (dist(mouseX, mouseY, 800, 200) < 50) {\n starDescription = true;\n setTimeout(() => starDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the pentagon\n if (isPointInPentagon(mouseX, mouseY, 1000, 250, 50)) {\n pentagonDescription = true;\n setTimeout(() => pentagonDescription = false, 2000); // Hide after 2 seconds\n }\n}\n\nfunction drawStar(x, y, radius1, radius2, npoints) {\n let angle = TWO_PI / npoints;\n let halfAngle = angle / 2.0;\n beginShape();\n for (let a = 0; a < TWO_PI; a += angle) {\n let sx = x + cos(a) * radius2;\n let sy = y + sin(a) * radius2;\n vertex(sx, sy);\n sx = x + cos(a + halfAngle) * radius1;\n sy = y + sin(a + halfAngle) * radius1;\n vertex(sx, sy);\n }\n endShape(CLOSE);\n}\n\nfunction drawPentagon(x, y, radius) {\n beginShape();\n for (let i = 0; i < 5; i++) {\n let angle = TWO_PI / 5 * i;\n let sx = x + cos(angle) * radius;\n let sy = y + sin(angle) * radius;\n vertex(sx, sy);\n }\n endShape(CLOSE);\n}\n\nfunction isPointInTriangle(px, py, x1, y1, x2, y2, x3, y3) {\n let area = 0.5 * (-y2 * x1 + y1 * (x2 - x1) + x3 * (y1 - y2) + y2 * x1);\n let s = 1 / (2 * area) * (y1 * (x2 - x3) + (x2 - x1) * (py - y1));\n let t = 1 / (2 * area) * (x1 * (y2 - py) + (x1 - x2) * (y1 - y3));\n return s > 0 && t > 0 && (1 - s - t > 0);\n}\n\nfunction isPointInPentagon(px, py, x, y, radius) {\n let inside = true;\n for (let i = 0; i < 5; i++) {\n let angle = TWO_PI / 5 * i;\n let sx = x + cos(angle) * radius;\n let sy = y + sin(angle) * radius;\n if (dist(px, py, sx, sy) < 50) {\n inside = false;\n break;\n }\n }\n return inside;\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Pokedex Adventure Game\n \n \n\n\n \n\n"},"chat_history":[{"message":"lets make a pokedex game!","project_id":4598,"created_at":"2024-11-14T22:13:37.866494Z","output_tokens":null,"sender":"human","code_id":183672,"deleted":0,"input_tokens":null,"id":89919},{"message":"Let's get started!","project_id":4598,"created_at":"2024-11-14T22:13:41.965384Z","output_tokens":null,"sender":"human","code_id":183672,"deleted":0,"input_tokens":null,"id":89920},{"message":"Great! I'm excited to help you with your Pokedex game. Could you tell me more about your idea? For example, what kind of gameplay are you envisioning? Is it more of a collecting game, a battle simulation, or something else entirely? Let me know what features you'd like to include!","project_id":4598,"created_at":"2024-11-14T22:13:41.972731Z","output_tokens":null,"sender":"ai","code_id":183672,"deleted":0,"input_tokens":null,"id":89921},{"message":"lets have different shapes, with cute faces (you draw) and when you click on them, it gives you a descripion about it. Then it goes away after a little bit","project_id":4598,"created_at":"2024-11-14T22:16:00.049197Z","output_tokens":null,"sender":"human","code_id":183673,"deleted":0,"input_tokens":null,"id":89922},{"message":"That sounds like a fun idea! We can create different shapes with faces, and when you click on them, a description will appear. Let's start by creating some shapes with cute faces. \n\nCould you let me know how many different shapes you'd like to have? And do you have any specific descriptions in mind for each shape?","project_id":4598,"created_at":"2024-11-14T22:16:00.119774Z","output_tokens":null,"sender":"ai","code_id":183673,"deleted":0,"input_tokens":null,"id":89923},{"message":"no you make them then i tweak it","project_id":4598,"created_at":"2024-11-14T22:16:17.018250Z","output_tokens":null,"sender":"human","code_id":183673,"deleted":0,"input_tokens":null,"id":89924},{"message":"Got it! We can create some simple shapes with faces and add descriptions that show up when you click on them. Let's start by creating a couple of shapes with faces. I'll show you how to do that in the code.\n\nLet's add a circle and a square with faces to your game. Here's how you can set it up:\n\n```javascript\n// script.js\n\nlet circleDescription = false;\nlet squareDescription = false;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear background every frame\n\n // Draw circle with a face\n fill(255, 204, 0); // Yellow color\n ellipse(200, 200, 100, 100);\n fill(0); // Black color for face\n ellipse(185, 190, 10, 10); // Left eye\n ellipse(215, 190, 10, 10); // Right eye\n arc(200, 210, 50, 20, 0, PI); // Smile\n\n // Draw square with a face\n fill(0, 255, 0); // Green color\n rect(400, 150, 100, 100);\n fill(0); // Black color for face\n ellipse(425, 180, 10, 10); // Left eye\n ellipse(475, 180, 10, 10); // Right eye\n arc(450, 210, 50, 20, 0, PI); // Smile\n\n // Show descriptions\n if (circleDescription) {\n fill(255);\n textSize(16);\n text(\"Happy Circle\", 150, 320);\n }\n\n if (squareDescription) {\n fill(255);\n textSize(16);\n text(\"Jolly Square\", 380, 320);\n }\n}\n\nfunction mousePressed() {\n // Check if mouse is over the circle\n if (dist(mouseX, mouseY, 200, 200) < 50) {\n circleDescription = true;\n setTimeout(() => circleDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the square\n if (mouseX > 400 && mouseX < 500 && mouseY > 150 && mouseY < 250) {\n squareDescription = true;\n setTimeout(() => squareDescription = false, 2000); // Hide after 2 seconds\n }\n}\n```\n\n### Explanation:\n- **Shapes and Faces**: We draw a circle and a square with simple facial features using `ellipse` and `arc`.\n- **Descriptions**: When you click on a shape, a description appears below it for 2 seconds.\n- **Interactivity**: The `mousePressed` function checks if the mouse is over a shape and toggles the description display.\n\nFeel free to tweak the shapes, colors, or descriptions as you'd like! Let me know if you want to add more shapes or make any changes.","project_id":4598,"created_at":"2024-11-14T22:16:17.074367Z","output_tokens":null,"sender":"ai","code_id":183673,"deleted":0,"input_tokens":null,"id":89925},{"message":"MAKE MORE, (cool :D)","project_id":4598,"created_at":"2024-11-14T22:17:09.065058Z","output_tokens":null,"sender":"human","code_id":183674,"deleted":0,"input_tokens":null,"id":89926},{"message":"Awesome! Let's add a few more shapes with cute faces. We can include a triangle, a star, and a pentagon. Each will have its own description that will appear when you click on them. \n\nHere's the updated code with these additional shapes:\n\n```javascript\n// script.js\n\nlet circleDescription = false;\nlet squareDescription = false;\nlet triangleDescription = false;\nlet starDescription = false;\nlet pentagonDescription = false;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear background every frame\n\n // Draw circle with a face\n fill(255, 204, 0); // Yellow color\n ellipse(200, 200, 100, 100);\n fill(0); // Black color for face\n ellipse(185, 190, 10, 10); // Left eye\n ellipse(215, 190, 10, 10); // Right eye\n arc(200, 210, 50, 20, 0, PI); // Smile\n\n // Draw square with a face\n fill(0, 255, 0); // Green color\n rect(400, 150, 100, 100);\n fill(0); // Black color for face\n ellipse(425, 180, 10, 10); // Left eye\n ellipse(475, 180, 10, 10); // Right eye\n arc(450, 210, 50, 20, 0, PI); // Smile\n\n // Draw triangle with a face\n fill(255, 0, 0); // Red color\n triangle(600, 250, 550, 350, 650, 350);\n fill(0); // Black color for face\n ellipse(580, 280, 10, 10); // Left eye\n ellipse(620, 280, 10, 10); // Right eye\n arc(600, 300, 40, 20, 0, PI); // Smile\n\n // Draw star with a face\n fill(255, 165, 0); // Orange color\n drawStar(800, 200, 30, 70, 5);\n fill(0); // Black color for face\n ellipse(800, 200, 10, 10); // Left eye\n ellipse(820, 200, 10, 10); // Right eye\n arc(810, 220, 40, 20, 0, PI); // Smile\n\n // Draw pentagon with a face\n fill(0, 0, 255); // Blue color\n drawPentagon(1000, 250, 50);\n fill(0); // Black color for face\n ellipse(980, 250, 10, 10); // Left eye\n ellipse(1020, 250, 10, 10); // Right eye\n arc(1000, 270, 40, 20, 0, PI); // Smile\n\n // Show descriptions\n if (circleDescription) {\n fill(255);\n textSize(16);\n text(\"Happy Circle\", 150, 320);\n }\n\n if (squareDescription) {\n fill(255);\n textSize(16);\n text(\"Jolly Square\", 380, 320);\n }\n\n if (triangleDescription) {\n fill(255);\n textSize(16);\n text(\"Cheerful Triangle\", 550, 400);\n }\n\n if (starDescription) {\n fill(255);\n textSize(16);\n text(\"Shiny Star\", 800, 400);\n }\n\n if (pentagonDescription) {\n fill(255);\n textSize(16);\n text(\"Brave Pentagon\", 1000, 400);\n }\n}\n\nfunction mousePressed() {\n // Check if mouse is over the circle\n if (dist(mouseX, mouseY, 200, 200) < 50) {\n circleDescription = true;\n setTimeout(() => circleDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the square\n if (mouseX > 400 && mouseX < 500 && mouseY > 150 && mouseY < 250) {\n squareDescription = true;\n setTimeout(() => squareDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the triangle\n if (isPointInTriangle(mouseX, mouseY, 600, 250, 550, 350, 650, 350)) {\n triangleDescription = true;\n setTimeout(() => triangleDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the star\n if (dist(mouseX, mouseY, 800, 200) < 50) {\n starDescription = true;\n setTimeout(() => starDescription = false, 2000); // Hide after 2 seconds\n }\n\n // Check if mouse is over the pentagon\n if (isPointInPentagon(mouseX, mouseY, 1000, 250, 50)) {\n pentagonDescription = true;\n setTimeout(() => pentagonDescription = false, 2000); // Hide after 2 seconds\n }\n}\n\nfunction drawStar(x, y, radius1, radius2, npoints) {\n let angle = TWO_PI / npoints;\n let halfAngle = angle / 2.0;\n beginShape();\n for (let a = 0; a < TWO_PI; a += angle) {\n let sx = x + cos(a) * radius2;\n let sy = y + sin(a) * radius2;\n vertex(sx, sy);\n sx = x + cos(a + halfAngle) * radius1;\n sy = y + sin(a + halfAngle) * radius1;\n vertex(sx, sy);\n }\n endShape(CLOSE);\n}\n\nfunction drawPentagon(x, y, radius) {\n beginShape();\n for (let i = 0; i < 5; i++) {\n let angle = TWO_PI / 5 * i;\n let sx = x + cos(angle) * radius;\n let sy = y + sin(angle) * radius;\n vertex(sx, sy);\n }\n endShape(CLOSE);\n}\n\nfunction isPointInTriangle(px, py, x1, y1, x2, y2, x3, y3) {\n let area = 0.5 * (-y2 * x1 + y1 * (x2 - x1) + x3 * (y1 - y2) + y2 * x1);\n let s = 1 / (2 * area) * (y1 * (x2 - x3) + (x2 - x1) * (py - y1));\n let t = 1 / (2 * area) * (x1 * (y2 - py) + (x1 - x2) * (y1 - y3));\n return s > 0 && t > 0 && (1 - s - t > 0);\n}\n\nfunction isPointInPentagon(px, py, x, y, radius) {\n let inside = true;\n for (let i = 0; i < 5; i++) {\n let angle = TWO_PI / 5 * i;\n let sx = x + cos(angle) * radius;\n let sy = y + sin(angle) * radius;\n if (dist(px, py, sx, sy) < 50) {\n inside = false;\n break;\n }\n }\n return inside;\n}\n```\n\n### Explanation:\n- **New Shapes**: Added a triangle, a star, and a pentagon, each with their own face and description.\n- **Description Logic**: Each shape will show its own description when clicked, just like the circle and square.\n- **Custom Drawing**: The `drawStar` and `drawPentagon` functions are created for drawing the star and pentagon shapes.\n\nFeel free to modify the colors, shapes, or descriptions as you like! Let me know if you want to add even more shapes or features!","project_id":4598,"created_at":"2024-11-14T22:17:09.128796Z","output_tokens":null,"sender":"ai","code_id":183674,"deleted":0,"input_tokens":null,"id":89927}],"assets":[],"messages_sent":5,"comments":[],"steps":[]}