Mini Metroidvania Adventure

{"name":"Mini Metroidvania Adventure","description":"Embark on a whimsical journey in a mini metroidvania game where you explore mysterious lands, uncover secrets, and defeat quirky enemies! With simple controls and charming graphics, you'll create a delightful experience that captures the essence of exploration and discovery. Join the adventure and learn to program in the process!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-01-14T11:15:21.783434Z","updated_at":"2025-01-14T11:15:21.783437Z","user_id":97,"status":"PRIVATE","parent_id":null,"id":5487,"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 secretCode = 'abc';\n\n// Size of each tile in the map\nlet cameraOffsetX = 0;\n\nlet cameraOffsetY = 0;\n\nlet mapWidth = 20;\n\n// Number of tiles in width\nlet mapHeight = 12;\n\nlet player;\n\nlet playerSpeed = 5;\n\nlet isPaused = false;\n\nlet inputCode = '';\n\nlet gravity = 0.5;\n\n// Gravity strength\nlet velocityY = 0;\n\n// Vertical velocity\nlet onGround = false;\n\n// Size of each tile in the map\nlet tileSize = 50;\n\n// 2D array representing the map\nlet map = [\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1]\n];\n\n// Object to store codes and their corresponding functions\nlet codes = {\n 'abc': function () { console.log(\"Code 'abc' matched!\"); },\n '123': function () { console.log(\"Code '123' matched!\"); },\n 'xyz': function () { console.log(\"Code 'xyz' matched!\"); }\n};\n\nlet playerX = 100;\n\n// Initial horizontal position of the player\nlet playerY = 550;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n if (!isPaused) {\n background(135, 206, 235);\n\n // Camera follows the player.\n translate(-playerX + width / 2, -playerY + height / 2);\n\n drawMap(); // Draw the map\n applyGravity(); // Apply gravity to the player\n handlePlayerMovement(); // Handle player movement logic\n drawPlayer(); // Draw the player\n } else {\n // Display the input code when paused\n fill(0);\n textSize(32);\n text(\"Input: \" + inputCode, 50, 50);\n }\n}\n\nfunction checkCollision() {\n // Check if the player is colliding with the ground while moving horizontally\n let tileX = Math.floor(playerX / tileSize);\n let tileY = Math.floor(playerY / tileSize);\n\n if (tileY < map.length && map[tileY][tileX] === 1) {\n // Reset the player's position based on direction\n if (keyIsDown(LEFT_ARROW)) {\n playerX += playerSpeed; // Move back if there's a collision\n } else if (keyIsDown(RIGHT_ARROW)) {\n playerX -= playerSpeed; // Move back if there's a collision\n }\n }\n}\n\nfunction drawMap() {\n for (let y = 0; y < map.length; y++) {\n for (let x = 0; x < map[y].length; x++) {\n if (map[y][x] === 1) {\n fill(100, 200, 100); // Ground color\n rect(x * tileSize, y * tileSize, tileSize, tileSize); // Draw ground tile\n }\n }\n }\n}\n\nfunction applyGravity() {\n let nextY = playerY + velocityY; // Predicted next position\n // Check for collision with the ground\n if (checkGroundCollision(nextY)) {\n playerY = nextY; // Update to new vertical position if no collision\n onGround = true; // Player is on the ground\n velocityY = 0; // Reset vertical velocity\n } else {\n // If falling, apply gravity\n velocityY += gravity; // Increase downward velocity when in air\n playerY += velocityY; // Update player vertical position\n }\n}\n\nfunction checkGroundCollision(nextY) {\n let tileX = Math.floor(playerX / tileSize);\n let tileY = Math.floor(nextY / tileSize);\n\n // Check if the player is within the bounds of the map array\n if (tileX >= 0 && tileX < map[0].length && tileY >= 0 && tileY < map.length) {\n return map[tileY][tileX] === 1; // Check if the next position collides with ground\n }\n return false; // If out of bounds, assume no collision\n}\n\nfunction drawPlayer() {\n textSize(32);\n text('🤖', playerX, playerY); // Draw player character\n}\n\nfunction keyPressed() {\n if (key === ' ') {\n isPaused = !isPaused;\n if (!isPaused) {\n checkCode();\n }\n } else if (isPaused) {\n inputCode += key;\n }\n}\n\nfunction checkCode() {\n // Check if the inputCode matches any defined code\n if (codes[inputCode]) {\n codes[inputCode](); // Execute the corresponding function\n } else {\n console.log(\"Code not recognized.\");\n }\n inputCode = ''; // Reset the input code\n}\n\nfunction checkTileCollision(nextX, nextY) {\n let tileX = Math.floor(nextX / tileSize);\n let tileY = Math.floor(nextY / tileSize);\n\n // Check if the player is within the bounds of the map array\n if (tileY >= 0 && tileY < map.length && tileX >= 0 && tileX < map[0].length) {\n return map[tileY][tileX] === 1; // Check if the next position collides with ground\n }\n return false; // If out of bounds, assume no collision\n}\n\nfunction handlePlayerMovement() {\n if (onGround) { // Allow movement only if on the ground\n if (keyIsDown(LEFT_ARROW)) {\n let newX = playerX - playerSpeed; // Calculate new position\n if (!checkTileCollision(newX, playerY)) { // Check for collision when moving left\n playerX = newX; // Move left if no collision\n }\n }\n if (keyIsDown(RIGHT_ARROW)) {\n let newX = playerX + playerSpeed; // Calculate new position\n if (!checkTileCollision(newX, playerY)) { // Check for collision when moving right\n playerX = newX; // Move right if no collision\n }\n }\n }\n // Jumping\n if (keyIsDown(UP_ARROW) && onGround) {\n velocityY = -10; // Jumping\n onGround = false; // Player is now in the air\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Mini Metroidvania Adventure\n \n \n\n\n \n\n"},"chat_history":[{"project_id":5487,"sender":"human","message":"fix the collision so im not inside th blocks cuz thats hapening at least visually","deleted":0,"created_at":"2025-01-14T14:06:37.385545Z","output_tokens":null,"code_id":202807,"input_tokens":null,"id":102657},{"project_id":5487,"sender":"ai","message":"To fix the collision issue where the player appears to be inside the blocks, we need to ensure that the player is correctly positioned above the blocks when a collision is detected. Let's adjust the collision detection logic for both horizontal and vertical movement.\n\nHere's how we can do it:\n\n1. Modify the horizontal collision detection to adjust the player's position correctly.\n2. Ensure the player sits on top of blocks when falling.\n\nLet's update the relevant parts of the code:\n\n```javascript\nfunction checkCollision() {\n // Check if the player is colliding with the ground while moving horizontally\n let tileX = Math.floor(playerX / tileSize);\n let tileY = Math.floor(playerY / tileSize);\n\n if (tileY < map.length && map[tileY][tileX] === 1) {\n // Reset the player's position based on direction\n if (keyIsDown(LEFT_ARROW)) {\n playerX = (tileX + 1) * tileSize; // Snap player to the right side of the block\n } else if (keyIsDown(RIGHT_ARROW)) {\n playerX = tileX * tileSize - 1; // Snap player to the left side of the block\n }\n }\n}\n```\n\n```javascript\nfunction checkGroundCollision(nextY) {\n let tileX = Math.floor(playerX / tileSize);\n let tileY = Math.floor(nextY / tileSize); // Get the tile below the player's predicted position\n\n // Check if the player is within the bounds of the map array\n if (tileX >= 0 && tileX < map[0].length && tileY >= 0 && tileY < map.length) {\n if (map[tileY][tileX] === 1) {\n playerY = tileY * tileSize - 1; // Snap player to the top of the block\n return true; // Collision with ground\n }\n }\n return false; // No collision\n}\n```\n\n### Explanation:\n- **Horizontal Collision**: Adjust the player's horizontal position to align with the block's edge when a collision is detected.\n- **Vertical Collision**: Ensure the player is placed directly on top of the block when falling, so they don't appear inside it.\n\nNow, try replacing the existing code with this updated version and see if it resolves the issue with the player appearing inside the blocks. Let me know if any further adjustments are needed!","deleted":0,"created_at":"2025-01-14T14:06:37.396916Z","output_tokens":538,"code_id":202807,"input_tokens":4630,"id":102658}],"assets":[],"messages_sent":26,"comments":[],"steps":[]}