Jumping Adventure

{"name":"Jumping Adventure","description":"Embark on a thrilling adventure with jumping challenges, platform spawning, and wall-jumping action! Overcome pits and enemies while mastering the art of precision jumping in this exciting platformer game.","photo":null,"view_count":4,"fork_count":1,"expires_at":null,"created_at":"2024-04-12T18:06:56.446855Z","updated_at":"2024-04-12T19:08:09.979183Z","user_id":28,"status":"PUBLIC","parent_id":null,"id":1145,"user":{"photo":null,"email":null,"recess_id":"cf1f90dc-37b2-f9e5-9b7b-608488d34314","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"jacob","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let player;\nlet blocks = [];\n\nfunction setup() {\n createCanvas(800, 600);\n player = new Player(100, 500);\n // Creating a ground as an example, represented by blocks\n for (let i = 0; i < width; i += 100) {\n blocks.push(new Block(i, 550, 100, 50));\n }\n // Airborne blocks for wall jumping and collision detection\n blocks.push(new Block(300, 400, 100, 50));\n blocks.push(new Block(500, 300, 100, 50));\n blocks.push(new Block(250, 200, 100, 50));\n}\n\nfunction draw() {\n background(220);\n\n // Drawing a red line at y=1000 with respect to the camera\n stroke(255, 0, 0); // Set the stroke color to red\n strokeWeight(10); // Set the stroke weight\n line(0, 1000 - player.y + height / 2, width, 1000 - player.y + height / 2); // Adjust line position based on camera\n noStroke();\n\n push(); // Save the current drawing state\n followCamera(player); // Apply camera logic to follow the player\n\n // Update and draw player and blocks with camera offset\n player.update(blocks);\n player.draw();\n blocks.forEach(block => block.draw());\n\n pop(); // Restore the original drawing state\n\n\n}\n\nfunction followCamera(target) {\n // Define the boundaries for the middle third of the canvas\n let leftBoundary = width / 3;\n let rightBoundary = 2 * width / 3;\n let topBoundary = height / 3;\n let bottomBoundary = 2 * height / 3;\n\n // Calculate camera offset based on the target's position, but only adjust if outside the middle third\n let camX = 0;\n let camY = 0;\n\n if (target.x < leftBoundary) {\n camX = -target.x + leftBoundary;\n } else if (target.x > rightBoundary) {\n camX = -target.x + rightBoundary;\n }\n\n if (target.y < topBoundary) {\n camY = -target.y + topBoundary;\n } else if (target.y > bottomBoundary) {\n camY = -target.y + bottomBoundary;\n }\n\n // Apply camera transformation\n translate(camX, camY);\n}\n\nclass Player {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.width = 50;\n this.height = 50;\n this.velocityX = 0;\n this.velocityY = 0;\n this.speed = 5;\n this.gravity = 0.5;\n this.jumpPower = -10;\n this.onGround = false;\n this.jumpKeyReleased = true;\n }\n\n applyGravity() {\n if (!this.onGround) {\n this.velocityY += this.gravity;\n } else {\n this.velocityY = Math.max(0, this.velocityY);\n }\n this.y += this.velocityY;\n this.onGround = false; // Reset onGround status each frame\n }\n\n handleCollisions(blocks) {\n let touchingWall = false; // New variable to track wall collisions\n blocks.forEach(block => {\n let horizontalOverlap = this.x + this.width > block.x && this.x < block.x + block.width;\n let verticalOverlap = this.y + this.height > block.y && this.y < block.y + block.height;\n if (horizontalOverlap && verticalOverlap) {\n let overlapX = (this.x < block.x) ? (block.x - (this.x + this.width)) : ((block.x + block.width) - this.x);\n let overlapY = (this.y < block.y) ? (block.y - (this.y + this.height)) : ((block.y + block.height) - this.y);\n\n if (Math.abs(overlapX) < Math.abs(overlapY)) {\n this.x += overlapX;\n this.velocityX = 0;\n touchingWall = true; // Set touchingWall to true if there's horizontal overlap\n } else {\n this.y += overlapY;\n this.velocityY = 0;\n if (overlapY < 0) {\n this.onGround = true;\n } else {\n // Optional: React differently if hitting the bottom of a block\n }\n }\n }\n });\n\n // Allow wall jump if touching a wall but not on the ground\n if (touchingWall && !this.onGround && keyIsDown(32) && this.jumpKeyReleased) {\n this.velocityY = this.jumpPower;\n this.jumpKeyReleased = false;\n }\n }\n\n\n move() {\n if (keyIsDown(65)) { // A key\n this.velocityX = -this.speed;\n } else if (keyIsDown(68)) { // D key\n this.velocityX = this.speed;\n } else {\n this.velocityX = 0;\n }\n this.x += this.velocityX;\n }\n\n jump() {\n if (keyIsDown(32) && this.onGround && this.jumpKeyReleased) { // Modified this line\n this.velocityY = this.jumpPower;\n this.onGround = false;\n this.jumpKeyReleased = false; // Add this line\n }\n }\n\n draw() {\n fill(0); // Set the color to black\n rect(this.x, this.y, this.width, this.height);\n }\n\n update(blocks) {\n this.applyGravity();\n this.move();\n this.handleCollisions(blocks);\n\n if (!keyIsDown(32)) {\n this.jumpKeyReleased = true;\n }\n\n this.jump();\n\n // Check if the player's Y value goes over 1000\n if (this.y > 1000 - this.height) {\n // Reset player position or handle as needed\n this.resetPosition();\n }\n }\n\n // Method to reset player's position or respond to the event\n resetPosition() {\n // Example: Reset to starting position\n this.x = 100;\n this.y = 450; // Adjust based on the game's starting position\n this.velocityY = 0; // Reset vertical velocity\n }\n}\n\n\nclass Block {\n constructor(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n\n draw() {\n fill(150); // Set the color to a shade of grey\n rect(this.x, this.y, this.width, this.height);\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n Jumping Adventure\n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"deleted":0,"code_id":64814,"input_tokens":null,"id":35531,"project_id":1145,"sender":"human","message":"Let's get started!","created_at":"2024-04-12T18:07:01.889671Z","output_tokens":null},{"deleted":0,"code_id":64814,"input_tokens":null,"id":35532,"project_id":1145,"sender":"ai","message":"To begin implementing the visual elements for our platformer game, we'll start by adding the ground, character, deadly holes, and movable blocks. We'll use the p5.js library, which is already included in your HTML file.\n\nFirst, let's add some basic elements to your `script.js` file to draw these components on the screen.\n\n```javascript\nlet player;\nlet ground;\nlet holes = [];\nlet blocks = [];\n\nfunction setup() {\n createCanvas(800, 600);\n ground = createSprite(400, 550, 800, 100);\n player = createSprite(100, ground.position.y - 50, 50, 50);\n // Example hole and block for demonstration\n holes.push(createSprite(200, ground.position.y - 25, 50, 100));\n blocks.push(createSprite(400, ground.position.y - 75, 100, 50));\n}\n\nfunction draw() {\n background(220);\n drawSprites();\n}\n```\n\n- `createSprite(x, y, width, height)` is used to create visual elements. `x` and `y` set the position, while `width` and `height` define the size.\n- We initialize `ground` as a large rectangle to act as the platform, `player` as a smaller square to represent the player character, a `hole` as an example obstacle, and a `block` as a movable object for the player to interact with.\n- In the `draw()` function, `background(220)` sets the background color, and `drawSprites()` renders all the sprites on the canvas each frame.","created_at":"2024-04-12T18:07:01.897194Z","output_tokens":null},{"deleted":0,"code_id":64826,"input_tokens":null,"id":35533,"project_id":1145,"sender":"human","message":"LOG: \n🌸 p5.js says: There's an error due to \"createSprite\" not being defined in the current scope (on line 8 in eb8fc444-2c0d-4abf-8f26-351e2c0615ff [blob:https://www.jippity.pro/eb8fc444-2c0d-4abf-8f26-351e2c0615ff:8:26]).\n\nIf you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive). For more:\nhttps://p5js.org/examples/data-variable-scope.html\nhttps://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_Defined#What_went_wrong","created_at":"2024-04-12T18:10:19.984564Z","output_tokens":null},{"deleted":0,"code_id":64826,"input_tokens":null,"id":35534,"project_id":1145,"sender":"ai","message":"The error message indicates that `createSprite` is not defined. This is because `createSprite` is a function provided by the p5.play library, which extends p5.js with additional functionality for game development, including sprite creation and manipulation. It seems we've forgotten to include the p5.play library in your HTML file. Let's add it to ensure `createSprite` and other related functions work as expected.\n\nUpdate your HTML file to include the p5.play library:\n\n```html\n\n\n\n```\n\n- The second `