Ghostly Pac-Man Adventure

{"name":"Ghostly Pac-Man Adventure","description":"Chase down the pellets and avoid the ghosts in this spooky rendition of the classic Pac-Man game! Use power-ups to turn the tables on the pesky spirits and achieve the highest score.","photo":null,"view_count":13,"fork_count":1,"expires_at":null,"created_at":"2024-04-14T13:07:04.666958Z","updated_at":"2024-04-14T13:07:04.666961Z","user_id":28,"status":"PUBLIC","parent_id":1074,"id":1158,"user":{"photo":null,"email":null,"recess_id":"","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"oldj","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// Initialize a canvas\nlet maze;\nlet enemies = []; // Holds multiple enemies\nlet enemy; // Declare the enemy variable\nlet score = 0; // Initialize the score\nlet player; // Declare the player variable\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0);\n maze = new Maze(); // Initialize the maze\n enemies.push(new Enemy(99, 115)); // Add the first enemy\n enemies.push(new Enemy(140, 165)); // Add a new enemy at position (300, 300)\n player = new Player(200, 131); // Initialize the player at position (200, 200)\n}\n\nfunction draw() {\n background(0);\n maze.display(); // Draw the maze\n fill(255); // Set text color to white\n textSize(32); // Set text size\n text(`Score: ${score}`, 10, 40); // Display the score at position (10, 40)\n // Handle each enemy in the enemies array\n for (let i = 0; i < enemies.length; i++) {\n enemies[i].display(); // Display the enemy\n enemies[i].move(player.x, player.y); // Move the enemy towards the player\n\n // Check for collision with the player\n if (enemies[i].collidesWithPlayer(player.x, player.y, player.size)) {\n // Reset player to start position upon collision\n player.x = 121;\n player.y = 131;\n\n // Optionally, reset enemies' positions\n enemies.forEach(enemy => {\n enemy.x = random(50, width - 50);\n enemy.y = random(50, height - 50);\n });\n break; // Exit the loop if a collision is detected\n }\n }\n\n player.display(); // Display the player\n player.move(); // Move the player based on arrow key inputs\n}\nclass Enemy {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.size = 20;\n this.speed = 3;\n }\n\n display() {\n fill(255, 0, 0);\n ellipse(this.x, this.y, this.size, this.size);\n }\n\n move(playerX, playerY) {\n let nextX = this.x;\n let nextY = this.y;\n\n if (playerX < this.x) {\n nextX -= this.speed;\n } else if (playerX > this.x) {\n nextX += this.speed;\n }\n\n if (!maze.collidesWithWall(nextX, this.y, this.size)) {\n this.x = nextX;\n }\n\n if (playerY < this.y) {\n nextY -= this.speed;\n } else if (playerY > this.y) {\n nextY += this.speed;\n }\n\n if (!maze.collidesWithWall(this.x, nextY, this.size)) {\n this.y = nextY;\n }\n }\n collidesWithPlayer(playerX, playerY, playerSize) {\n const d = dist(this.x, this.y, playerX, playerY);\n return d < (this.size / 2 + playerSize / 2);\n }\n}\nclass Player {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.size = 20;\n this.speed = 5;\n }\n\n display() {\n fill(0, 0, 255);\n ellipse(this.x, this.y, this.size, this.size);\n }\n\n move() {\n let nextX = this.x;\n let nextY = this.y;\n\n if (keyIsDown(LEFT_ARROW)) {\n nextX -= this.speed;\n }\n if (keyIsDown(RIGHT_ARROW)) {\n nextX += this.speed;\n }\n if (keyIsDown(UP_ARROW)) {\n nextY -= this.speed;\n }\n if (keyIsDown(DOWN_ARROW)) {\n nextY += this.speed;\n }\n\n if (!maze.collidesWithWall(nextX, nextY, this.size)) {\n this.x = nextX;\n this.y = nextY;\n }\n }\n}\n\nclass Maze {\n constructor() {\n this.walls = [\n { x1: 0, y1: 0, x2: windowWidth, y2: 0 },\n { x1: windowWidth, y1: 0, x2: windowWidth, y2: windowHeight },\n { x1: windowWidth, y1: windowHeight, x2: 0, y2: windowHeight },\n { x1: 0, y1: windowHeight, x2: 0, y2: 0 },\n // Boundary Walls\n { x1: 50, y1: 50, x2: 750, y2: 50 },\n { x1: 750, y1: 50, x2: 750, y2: 550 },\n { x1: 750, y1: 550, x2: 50, y2: 550 },\n { x1: 50, y1: 550, x2: 50, y2: 50 },\n // Horizontal Walls\n { x1: 50, y1: 100, x2: 250, y2: 100 },\n { x1: 500, y1: 100, x2: 700, y2: 100 },\n { x1: 200, y1: 200, x2: 600, y2: 200 },\n { x1: 100, y1: 400, x2: 350, y2: 400 },\n { x1: 600, y1: 400, x2: 750, y2: 400 },\n // Vertical Walls to intersect with some horizontal walls\n { x1: 300, y1: 50, x2: 300, y2: 250 },\n { x1: 400, y1: 300, x2: 400, y2: 500 },\n { x1: 650, y1: 250, x2: 650, y2: 550 },\n { x1: 250, y1: 100, x2: 250, y2: 400 },\n // You can add more walls here to make the maze more intricate\n\n ];\n }\n collidesWithWall(nextX, nextY, size) {\n const radius = size / 2;\n for (let wall of this.walls) {\n // Determine the type of wall: horizontal or vertical\n const isVertical = wall.x1 === wall.x2;\n const isHorizontal = wall.y1 === wall.y2;\n \n let closestX, closestY;\n\n if (isVertical) {\n closestX = wall.x1; // For vertical walls, the closest X is constant\n closestY = constrain(nextY, min(wall.y1, wall.y2), max(wall.y1, wall.y2)); // Y is constrained between the top and bottom of the wall\n } else if (isHorizontal) {\n closestY = wall.y1; // For horizontal walls, the closest Y is constant\n closestX = constrain(nextX, min(wall.x1, wall.x2), max(wall.x1, wall.x2)); // X is constrained between the left and right ends of the wall\n }\n\n const distX = nextX - closestX;\n const distY = nextY - closestY;\n\n if (distX * distX + distY * distY < radius * radius) {\n return true;\n }\n }\n return false;\n}\n\n display() {\n stroke(255);\n strokeWeight(4);\n for (let wall of this.walls) {\n line(wall.x1, wall.y1, wall.x2, wall.y2);\n }\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","style.css":"","index.html":"\n\n\n\n \n \n Ghostly Pac-Man Adventure\n \n\n\n\n \n \n\n\n"},"chat_history":[{"message":"Let's get started!","project_id":1158,"created_at":"2024-04-14T13:07:15.624318Z","output_tokens":null,"sender":"human","code_id":65563,"deleted":0,"input_tokens":null,"id":35825},{"message":"```javascript\nclass Enemy {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.size = 20;\n this.speed = 3;\n this.direction = floor(random(4)); // 0: up, 1:","project_id":1158,"created_at":"2024-04-14T13:07:15.638640Z","output_tokens":null,"sender":"ai","code_id":65563,"deleted":0,"input_tokens":null,"id":35826},{"message":"I am able to pass through the left and bottom walls, but not right and top walls. I should not be able to pass trhough any. help me redo my collision detection","project_id":1158,"created_at":"2024-04-14T13:22:34.719535Z","output_tokens":null,"sender":"human","code_id":65573,"deleted":0,"input_tokens":null,"id":35833},{"message":"```javascript\nclass Maze {\n collidesWithWall(nextX, nextY, size) {\n for (let wall of this.walls) {\n // Checking the closest point on the wall to the center of the player or enemy\n const closestX = constrain(nextX, wall.x1, wall.x2);\n const closestY = constrain(nextY, wall.y1, wall.y2);\n\n // Calculating the distance from the center of the player or enemy to the closest point\n const distX = nextX - closestX;\n const distY = nextY - closestY;\n\n // If the distance is less than the radius (size / 2), it's a collision\n if (distX * distX + distY * distY < (size / 2) * (size / 2)) {\n return true;\n }\n }\n return false;\n }\n}\n```\n\n- The `collidesWithWall` function now uses the `constrain` function to find the closest point on the wall to the entity (player or enemy) and checks if the distance from this point to the center of the entity is less than its radius (half its size), indicating a collision.\n- By using `constrain`, we ensure that the closest point on the wall segment being checked is always within the bounds of that segment, which fixes the issue with passing through walls.\n- This approach should uniformly prevent passing through all walls, ensuring consistent collision detection around the entire maze.","project_id":1158,"created_at":"2024-04-14T13:22:34.738109Z","output_tokens":null,"sender":"ai","code_id":65573,"deleted":0,"input_tokens":null,"id":35834},{"message":"that didn't work. I went through the left wall","project_id":1158,"created_at":"2024-04-14T13:23:46.571124Z","output_tokens":null,"sender":"human","code_id":65575,"deleted":0,"input_tokens":null,"id":35835},{"message":"Given the issue with passing through the left wall, I suspect the problem might be related to how the collision detection handles edges and corners, particularly for horizontal movement. Let's refine the collision detection logic to ensure it properly accounts for all wall boundaries. We'll also ensure the collision detection is robust for movements in all directions.\n\n```javascript\ncollidesWithWall(nextX, nextY, size) {\n const radius = size / 2;\n for (let wall of this.walls) {\n // Determine the type of wall: horizontal or vertical\n const isVertical = wall.x1 === wall.x2;\n const isHorizontal = wall.y1 === wall.y2;\n \n let closestX, closestY;\n\n if (isVertical) {\n closestX = wall.x1; // For vertical walls, the closest X is constant\n closestY = constrain(nextY, min(wall.y1, wall.y2), max(wall.y1, wall.y2)); // Y is constrained between the top and bottom of the wall\n } else if (isHorizontal) {\n closestY = wall.y1; // For horizontal walls, the closest Y is constant\n closestX = constrain(nextX, min(wall.x1, wall.x2), max(wall.x1, wall.x2)); // X is constrained between the left and right ends of the wall\n }\n\n const distX = nextX - closestX;\n const distY = nextY - closestY;\n\n if (distX * distX + distY * distY < radius * radius) {\n return true;\n }\n }\n return false;\n}\n```\n\n- This updated `collidesWithWall` method now explicitly handles horizontal and vertical walls by identifying the orientation of each wall segment before calculating the closest points. This ensures that the collision detection logic is correctly applied based on the wall's orientation.\n- For vertical walls, it sets the `closestX` to the wall's X position and constrains `closestY` within the wall's Y bounds. For horizontal walls, it does the opposite, fixing the `closestY` and constraining `closestX`. This approach accurately identifies the closest point on the wall to the entity, improving the collision detection accuracy.\n- By using `min` and `max` functions to constrain the values, the method effectively handles walls in all directions, ensuring entities do not pass through any wall boundaries, including the left wall which was previously problematic.","project_id":1158,"created_at":"2024-04-14T13:23:46.579303Z","output_tokens":null,"sender":"ai","code_id":65575,"deleted":0,"input_tokens":null,"id":35836}],"assets":[],"messages_sent":3,"comments":[],"steps":[{"title":"Add ghost characters","instruction":"Create enemy characters that move around the maze and try to catch the player.","created_at":"2024-04-07T13:07:55.449594","project_id":1158,"complete":false,"step_number":0,"updated_at":"2024-04-14T13:07:04.672826","id":6000},{"title":"Different ghost behaviors and speeds","instruction":"Implement various behaviors and speeds for the ghosts to make the gameplay more dynamic and challenging.","created_at":"2024-04-07T13:07:55.449660","project_id":1158,"complete":false,"step_number":1,"updated_at":"2024-04-14T13:07:04.672911","id":6001},{"title":"Power-ups for players","instruction":"Include power-ups for the player to use against the ghosts, adding an extra layer of strategy to the game.","created_at":"2024-04-07T13:07:55.449703","project_id":1158,"complete":false,"step_number":2,"updated_at":"2024-04-14T13:07:04.672956","id":6002},{"title":"Player and ghost movement controls","instruction":"Implement user input for controlling the movement of the player (Pac-Man) and the ghosts.","created_at":"2024-04-07T13:07:55.449745","project_id":1158,"complete":false,"step_number":3,"updated_at":"2024-04-14T13:07:04.672999","id":6003},{"title":"Scoring and collision detection","instruction":"Implement game logic for scoring, collision detection, and handling interactions between Pac-Man, ghosts, and power-ups.","created_at":"2024-04-07T13:07:55.449785","project_id":1158,"complete":false,"step_number":4,"updated_at":"2024-04-14T13:07:04.673048","id":6004},{"title":"Maze and level design","instruction":"Create visually appealing mazes and design multiple levels to keep the game engaging and entertaining.","created_at":"2024-04-07T13:07:55.449824","project_id":1158,"complete":false,"step_number":5,"updated_at":"2024-04-14T13:07:04.673089","id":6005},{"title":"Sound effects and background music","instruction":"Add immersive sound effects and background music to enhance the overall gaming experience.","created_at":"2024-04-07T13:07:55.449864","project_id":1158,"complete":false,"step_number":6,"updated_at":"2024-04-14T13:07:04.673131","id":6006},{"title":"UI elements and game information","instruction":"Incorporate UI elements to display game information such as scores, remaining lives, and power-up status.","created_at":"2024-04-07T13:07:55.449902","project_id":1158,"complete":false,"step_number":7,"updated_at":"2024-04-14T13:07:04.673172","id":6007},{"title":"Mobile responsiveness","instruction":"Ensure the game is responsive and playable on mobile devices for a wider audience to enjoy.","created_at":"2024-04-07T13:07:55.449941","project_id":1158,"complete":false,"step_number":8,"updated_at":"2024-04-14T13:07:04.673217","id":6008}]}