Mini Quest Adventure

{"name":"I do not know the name yet","description":"Embark on a whimsical journey in this mini adventure game inspired by the spirit of exploration! Navigate through a vibrant world filled with challenges and surprises. Collect treasures, solve puzzles, and enjoy the thrill of discovery, all while learning to code with p5.js!","photo":"","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-03-23T19:04:33.461461Z","updated_at":"2025-03-23T19:04:33.461464Z","user_id":313,"status":"PRIVATE","parent_id":6250,"id":6489,"user":{"username":"rex3","id":313,"password_hash":null,"updated_at":"2025-01-12T20:10:45.881414Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"ac4a15cf-0ef2-456b-8c44-f9ff5ff75a7f","created_at":"2025-01-12T20:10:45.881409Z","reset_token":null,"stripe_customer_id":null,"seats":0},"code":{"script.js":"let characterAttack1;\n\nlet characterCrouch;\n\nlet characterSlide;\n\nlet characterSneakAlt;\n\nlet characterIdle;\n\nlet characterWalk1;\n\nlet characterWalk2;\n\nlet characterJump;\n\nlet characterSneak;\n\nlet character;\n\nlet characterJab;\n\nlet zombie1_idle;\n\nlet swingAngle = 0;\n\nlet swingSpeed = 0.1;\n\nlet zombieHealth = 25;\n\nlet damageDisplay = 0;\n\nlet zombieAlive = true;\n\nlet isRespawning = false;\n\nlet inventoryVisible = false;\n\nlet inventory = Array(25).fill(null);\n\nlet hoveredItem = null;\n\nlet equippedItems = [];\n\nfunction preload() {\n characterIdle = loadImage(\"@asset('character1_idle')\"); // Load the idle image\n characterWalk1 = loadImage(\"@asset('character1_walk1')\"); // Load the walk1 image\n characterWalk2 = loadImage(\"@asset('character1_walk2')\"); // Load the walk2 image\n characterJump = loadImage(\"@asset('character1_jump')\"); // Load the jump image\n characterSlide = loadImage(\"@asset('character1_slide')\"); // Load the sneak image\n characterJab = loadImage(\"@asset('character1_idle')\"); // Load the jab image for testing\n zombie1_idle = loadImage(\"@asset('zombie1_idle')\"); // Load the idle zombie image\n zombie1_walk1 = loadImage(\"@asset('zombie1_walk1')\"); // Load zombie walk1 image\n zombie1_walk2 = loadImage(\"@asset('zombie1_walk2')\"); // Load zombie walk2 image\n zombie1_jump = loadImage(\"@asset('zombie1_jump')\"); // Load zombie jump image\n zombie1_slide = loadImage(\"@asset('zombie1_slide')\"); // Load zombie slide image\n bigsword = loadImage(\"@asset('bigsword')\"); // Load big sword image\n bow = loadImage(\"@asset('bow')\");\n woodbonearrow = loadImage(\"@asset('woodbonearrow')\");\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n character = new Character(100, height - 100); // Create a new character instance\n}\n\nfunction draw() {\n background(135, 206, 235);\n character.move(); // Call the move function\n character.display(); // Call the display function\n displayInventory(); // Display the inventory\n displayEquippedItems(); // Display the equipped items\n\n // Draw the damage value if applicable\n if (damageDisplay > 0) {\n textSize(25);\n textAlign(CENTER, CENTER);\n text(damageDisplay, 200, height - 100); // Display damage value at the zombie's position\n }\n\n // Define fixed width and height for the health bar\n const healthBarWidth = 100;\n const healthBarHeight = 10;\n\n // Draw the zombie health bar background\n fill(255, 0, 0); // Red color for the health bar background\n rect(200, height - 120, healthBarWidth, healthBarHeight); // Draw the full health bar background\n\n // Calculate and draw the current health bar width only if the zombie is alive\n if (zombieHealth > 0) {\n fill(0, 255, 0); // Green color for the current health\n const currentHealthWidth = (zombieHealth / 25) * healthBarWidth; // Calculate the width for the current health\n rect(200, height - 120, currentHealthWidth, healthBarHeight); // Draw the current health bar\n }\n\n // Check if zombie is still alive\n if (zombieHealth > 0) {\n image(zombie1_idle, 200, height - 100); // Display the idle zombie at a specific position\n } else if (!isRespawning) {\n // Start respawn process\n isRespawning = true;\n setTimeout(() => {\n zombieHealth = 25; // Reset the zombie's health\n isRespawning = false; // Allow for a new respawn\n }, 3000); // Respawn after 3 seconds\n } else {\n // Display the fallen zombie\n push(); // Start a new drawing state\n translate(200 + zombie1_idle.width / 2, height - 100 + zombie1_idle.height / 2); // Move to the center of the zombie\n rotate(-HALF_PI); // Rotate 90 degrees to the left (or -90 degrees)\n image(zombie1_idle, -zombie1_idle.width / 2, -zombie1_idle.height / 2); // Draw the fallen zombie\n pop(); // Restore the previous drawing state\n }\n\n // Check if the 'A' key is pressed for swinging the sword\n if (keyIsDown(65)) { // 'A' key\n character.swingSword(); // Call the swingSword method\n\n // Draw the sword during the swing\n let swordWidth = bigsword.width / 4; // Adjust the scale factor as needed\n let swordHeight = bigsword.height / 4; // Adjust the scale factor as needed\n\n // Update swing angle for animation\n swingAngle = sin(frameCount * swingSpeed) * PI / 6; // Swing back and forth\n\n // Rotate the sword with swing animation\n push();\n translate(character.x + 18 + swordWidth / 2, character.y + 5 + swordHeight / 2); // Move to the sword's center\n rotate(swingAngle); // Apply the swinging rotation\n image(bigsword, -swordWidth / 2, -swordHeight / 2, swordWidth, swordHeight); // Draw the sword\n pop();\n }\n\n // Check for jab input\n if (keyIsDown(90)) { // 'Z' key\n character.jab(); // Call the jab method\n }\n\n // Display item info if an item is hovered\n displayItemInfo(hoveredItem); // Call this function with hoveredItem\n}\n\n// script.js\n// Create an array of 25 slots\ninventory[0] = 'bigsword';\n\ninventory[1] = 'bow';\n\ninventory[2] = 'woodbonearrow';\n\nfunction keyPressed() {\n if (key === 'I' || key === 'i') {\n inventoryVisible = !inventoryVisible; // Toggle inventory visibility\n }\n}\n\nfunction drawWrappedText(text, boxWidth) {\n let words = text.split(' '); // Split the text into words\n let line = ''; // Initialize an empty line\n const lines = []; // Array to hold the lines of text\n\n for (let i = 0; i < words.length; i++) {\n let testLine = line + words[i] + ' '; // Build the line with the next word\n let testWidth = textWidth(testLine); // Get the width of the test line\n\n // Check if the test line exceeds the box width\n if (testWidth > boxWidth && i > 0) {\n lines.push(line); // Store the current line\n line = words[i] + ' '; // Start a new line with the current word\n } else {\n line = testLine; // If it fits, continue building the line\n }\n }\n lines.push(line); // Push the last line into the array\n\n return lines; // Return the array of lines\n}\n\nfunction displayItemInfo(item) {\n // Only display the info box if an item is hovered\n if (item) {\n // Set the position for the item info display\n const infoX = width - 200;\n const infoY = 50;\n\n // Draw a background box for the item info\n fill(255, 255, 255, 200);\n rect(infoX, infoY, 150, 100);\n\n // Set text color to black\n fill(0); // Black color for text\n textSize(14);\n textAlign(LEFT, TOP);\n if (item === 'bigsword') {\n image(bigsword, infoX + 10, infoY + 10, 50, 50); // Display bigsword image\n text(\"Big Sword\", infoX + 70, infoY + 10); // Display item name\n const wrappedText = drawWrappedText(\"A powerful sword.\", 70);\n for (let i = 0; i < wrappedText.length; i++) {\n text(wrappedText[i], infoX + 70, infoY + 30 + (i * 18));\n }\n } else if (item === 'bow') {\n image(bow, infoX + 10, infoY + 10, 50, 50); // Display bow image\n text(\"Bow\", infoX + 70, infoY + 10); // Display item name\n const wrappedText = drawWrappedText(\"A long-range weapon.\", 70);\n for (let i = 0; i < wrappedText.length; i++) {\n text(wrappedText[i], infoX + 70, infoY + 30 + (i * 18));\n }\n } else if (item === 'woodbonearrow') {\n image(woodbonearrow, infoX + 10, infoY + 10, 50, 50); // Display arrow image\n text(\"Arrow\", infoX + 70, infoY + 10); // Display item name\n const wrappedText = drawWrappedText(\"An arrow for the bow.\", 70);\n for (let i = 0; i < wrappedText.length; i++) {\n text(wrappedText[i], infoX + 70, infoY + 30 + (i * 18));\n }\n }\n }\n}\n\nfunction displayInventory() {\n if (inventoryVisible) {\n fill(200, 200, 200, 150); // Semi-transparent gray background\n rect(50, 50, 300, 300); // Inventory box\n\n const slotSize = 50; // Define the size of each slot\n const padding = 10; // Padding between slots\n hoveredItem = null; // Reset hovered item each frame\n\n\n for (let i = 0; i < inventory.length; i++) {\n let x = 60 + (i % 5) * (slotSize + padding); // Calculate x position\n let y = 60 + floor(i / 5) * (slotSize + padding); // Calculate y position\n\n // Draw each slot with a background\n fill(255); // White background for slots\n rect(x, y, slotSize, slotSize); // Draw the slot\n\n // Check if the mouse is hovering over the slot\n if (mouseX > x && mouseX < x + slotSize && mouseY > y && mouseY < y + slotSize) {\n hoveredItem = inventory[i]; // Set hovered item\n console.log(`Hovering over item: ${hoveredItem}`); // Log hovered item\n\n // Check if the mouse is pressed and equip the item\n if (mouseIsPressed) {\n equipItem(inventory[i]); // Equip the item on click\n console.log(`Equipped item: ${inventory[i]}`); // Log equipped item\n }\n }\n\n // Draw the item image if there is an item in the slot\n if (inventory[i] === 'bigsword') {\n image(bigsword, x, y, slotSize, slotSize); // Draw the bigsword image\n } else if (inventory[i] === 'bow') {\n image(bow, x, y, slotSize, slotSize); // Draw the bow image\n } else if (inventory[i] === 'woodbonearrow') {\n image(woodbonearrow, x, y, slotSize, slotSize); // Draw the woodbonearrow image\n }\n }\n }\n}\n\nfunction equipItem(item) {\n // Only equip if the item is not already equipped\n if (!equippedItems.includes(item)) {\n // If less than 2 items are equipped, add the new item\n if (equippedItems.length < 2) {\n equippedItems.push(item); // Add the item to the equipped list\n console.log(`Equipped items after adding: ${equippedItems}`); // Log the current state of equipped items\n } else {\n // Alert the user that they can't equip more than 2 items\n alert(\"You can only equip a maximum of 2 items!\");\n }\n } else {\n console.log(`Item ${item} is already equipped.`); // Log if the item is already equipped\n }\n}\n\nfunction displayEquippedItems() {\n const equipX = 50; // X position for equipped items display\n const equipY = 400; // Y position for equipped items display\n const slotSize = 50; // Size of each equipped item slot\n\n fill(200, 200, 200, 150); // Semi-transparent gray background\n rect(equipX, equipY, 300, slotSize); // Draw background for equipped items\n\n console.log(`Displaying equipped items: ${equippedItems}`); // Log the current equipped items\n\n // Display equipped items\n for (let i = 0; i < equippedItems.length; i++) {\n const item = equippedItems[i];\n \n // Calculate position for each equipped item\n let itemX = equipX + i * (slotSize + 10);\n let itemY = equipY;\n\n // Draw the item based on its type\n if (item === 'bigsword') {\n // Draw bigsword similar to how it is done during swinging\n let swordWidth = bigsword.width / 4; // Adjust the scale factor as needed\n let swordHeight = bigsword.height / 4; // Adjust the scale factor as needed\n \n // Rotate the sword with no swing animation for the inventory display\n push();\n translate(itemX + swordWidth / 2, itemY + swordHeight / 2); // Move to the sword's center\n rotate(0); // No rotation for the inventory display; adjust if needed\n image(bigsword, -swordWidth / 2, -swordHeight / 2, swordWidth, swordHeight); // Draw the sword\n pop();\n } else if (item === 'bow') {\n // Draw bow\n let bowWidth = bow.width / 4; // Scale if needed\n let bowHeight = bow.height / 4; // Scale if needed\n\n push();\n translate(itemX + bowWidth / 2, itemY + bowHeight / 2); // Move to the bow's center\n rotate(0); // No rotation for the inventory display\n image(bow, -bowWidth / 2, -bowHeight / 2, bowWidth, bowHeight); // Draw the bow\n pop();\n } else if (item === 'woodbonearrow') {\n // Draw arrow\n let arrowWidth = woodbonearrow.width / 4; // Scale if needed\n let arrowHeight = woodbonearrow.height / 4; // Scale if needed\n\n push();\n translate(itemX + arrowWidth / 2, itemY + arrowHeight / 2); // Move to the arrow's center\n rotate(0); // No rotation for the inventory display\n image(woodbonearrow, -arrowWidth / 2, -arrowHeight / 2, arrowWidth, arrowHeight); // Draw the arrow\n pop();\n }\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Mini Quest Adventure\n \n \n\n\n\n \n \n\n\n","Character.js":"class Character {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.currentImage = characterIdle;\n this.walkAnimationFrame = 0;\n this.isJumping = false;\n this.isSliding = false;\n this.isPunching = false;\n this.jumpHeight = 0;\n this.jumpSpeed = 100;\n this.direction = 0;\n this.normalSpeed = 5;\n this.sprintSpeed = 10;\n this.slideSpeed = 5;\n this.slideDeceleration = 0.1; // Deceleration rate for sliding\n this.sneakDuration = 1000;\n this.sneakTimer = 0;\n this.punchOffset = 0; // Offset for jab animation\n this.hitZombie = false;\n this.jabDuration = 0;\n this.punchSpeed = 10;\n this.punchOffsetX = 0; // Offset for punch animation\n this.isSwinging = false; // Initialize swinging state\n }\n\n move() {\n let speed = keyIsDown(SHIFT) ? this.sprintSpeed : this.normalSpeed;\n\n if (this.isSliding) {\n speed = this.slideSpeed;\n this.slideSpeed -= this.slideDeceleration; // Reduce speed gradually\n\n if (this.slideSpeed <= 0) {\n this.currentImage = characterIdle; // Reset to idle image when speed reaches 0\n this.isSliding = false; // Stop sliding\n this.slideSpeed = 0; // Ensure slide speed is zero\n }\n }\n\n if (keyIsDown(LEFT_ARROW)) {\n this.x -= speed;\n this.direction = -1;\n }\n if (keyIsDown(RIGHT_ARROW)) {\n this.x += speed;\n this.direction = 1;\n }\n if (keyIsDown(UP_ARROW) && !this.isJumping) {\n this.isJumping = true;\n this.jumpHeight = 30;\n }\n\n if (keyIsDown(DOWN_ARROW) && !this.isSliding) {\n this.slide();\n }\n\n if (this.isJumping) {\n this.y -= this.jumpHeight;\n this.jumpHeight -= 4;\n if (this.jumpHeight <= 0) {\n this.isJumping = false;\n this.y = height - 100;\n }\n }\n\n this.x = constrain(this.x, 0, width - 50);\n\n if (!this.isSliding) {\n if (keyIsDown(LEFT_ARROW) || keyIsDown(RIGHT_ARROW)) {\n this.walkAnimationFrame = (this.walkAnimationFrame + 1) % 20;\n this.currentImage = (this.walkAnimationFrame < 10) ? characterWalk1 : characterWalk2;\n } else {\n this.currentImage = characterIdle;\n this.walkAnimationFrame = 0;\n }\n }\n }\n\n slide() {\n this.isSliding = true;\n this.slideSpeed = 5; // Reset slide speed to initial value\n this.currentImage = characterSlide; // Set image to sliding image\n }\n\n display() {\n let displayY = this.y;\n\n if (this.isJumping) {\n displayY -= this.jumpHeight;\n }\n\n push(); // Start a new drawing state\n\n // Draw the character image based on direction\n if (this.direction === -1) {\n scale(-1, 1); // Flip for left-facing\n image(this.currentImage, -this.x - this.currentImage.width, displayY);\n } else {\n image(this.currentImage, this.x, displayY);\n }\n\n pop(); // Restore the previous drawing state\n\n // Draw the punch emoji\n if (this.isPunching) {\n textSize(25);\n textAlign(CENTER, CENTER);\n\n // Position the punch emoji based on the character's position\n let punchX = this.direction === -1 ? this.x - 20 : this.x + 83; // Adjust position based on direction\n push(); // Start a new drawing state\n if (this.direction === -1) {\n scale(-1, 1); // Flip for left-facing\n text('🤜', -punchX - 15, displayY + 80); // Display punch emoji flipped\n } else {\n text('🤜', punchX, displayY + 80); // Display punch emoji normally\n }\n pop(); // Restore the previous drawing state\n }\n }\n\n jab() {\n const proximityThreshold = 83; // Define the distance within which the jab is effective\n const zombieX = 200; // The x-coordinate of the zombie\n const zombieY = height - 100; // The y-coordinate of the zombie\n const distanceToZombie = dist(this.x, this.y, zombieX, zombieY); // Calculate distance to the zombie\n\n // Always allow the jab, but only deal damage if within proximity\n if (!this.isPunching) {\n this.isPunching = true; // Set punching state\n if (distanceToZombie <= proximityThreshold) {\n this.hitZombie = true; // Trigger hit on the zombie\n zombieHealth -= 1; // Decrease health by 1 when jabbed\n damageDisplay = 1; // Set damage display value to 1\n }\n\n // Reset the punch offset\n this.punchOffsetX = 0; // Reset punch offset to zero\n\n // Reset the damage display after a short delay\n setTimeout(() => {\n damageDisplay = 0; // Clear the damage display\n this.isPunching = false; // Reset punching state\n }, 1000); // Show for 1 second\n }\n }\n\n swingSword() {\n const proximityThreshold = 83; // Define the distance within which the swing is effective\n const zombieX = 200; // The x-coordinate of the zombie\n const zombieY = height - 100; // The y-coordinate of the zombie\n const distanceToZombie = dist(this.x, this.y, zombieX, zombieY); // Calculate distance to the zombie\n\n // Only swing if not already swinging\n if (!this.isSwinging) {\n this.isSwinging = true; // Set swinging state\n if (distanceToZombie <= proximityThreshold) {\n this.hitZombie = true; // Trigger hit on the zombie\n zombieHealth -= 20; // Decrease health by 20 when swung\n damageDisplay = 20; // Set damage display value to 20\n }\n\n // Reset the damage display after a short delay\n setTimeout(() => {\n damageDisplay = 0; // Clear the damage display\n this.isSwinging = false; // Reset swinging state\n }, 1000); // Show for 1 second\n }\n }\n}"},"chat_history":[{"deleted":0,"code_id":220257,"input_tokens":null,"id":120497,"project_id":6489,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-03-23T19:04:40.983308Z","output_tokens":null},{"deleted":0,"code_id":220257,"input_tokens":7554,"id":120498,"project_id":6489,"sender":"ai","message":"Great! Could you tell me a bit more about what you'd like to add or change in your project? Do you have any specific features or ideas in mind that you'd like to work on next?","created_at":"2025-03-23T19:04:40.990107Z","output_tokens":43}],"assets":[{"cloudinary_id":"lqmswcupfioegfeegm6i","project_id":6489,"created_at":"2025-03-23T19:04:33.820103Z","deleted":false,"name":"woodbonearrow","resource_type":"image","id":62594},{"cloudinary_id":"g7lqbgondxyqdtfydlrl","project_id":6489,"created_at":"2025-03-23T19:04:33.817981Z","deleted":false,"name":"bow","resource_type":"image","id":62593},{"cloudinary_id":"bcounlp2ycoyjdtxs5f2","project_id":6489,"created_at":"2025-03-23T19:04:33.816852Z","deleted":false,"name":"zombie1_walk2","resource_type":"image","id":62592},{"cloudinary_id":"ojrctfzhinpdxlceruep","project_id":6489,"created_at":"2025-03-23T19:04:33.813756Z","deleted":false,"name":"dragon","resource_type":"image","id":62591},{"cloudinary_id":"r3hgmkzd37flo6monsj6","project_id":6489,"created_at":"2025-03-23T19:04:33.812516Z","deleted":false,"name":"projectile2","resource_type":"image","id":62590},{"cloudinary_id":"u4brntht7jejtfnpez5o","project_id":6489,"created_at":"2025-03-23T19:04:33.811123Z","deleted":false,"name":"zombie1_jump","resource_type":"image","id":62589},{"cloudinary_id":"fxqzjhwujnmatylkjofm","project_id":6489,"created_at":"2025-03-23T19:04:33.809715Z","deleted":false,"name":"zombie1_walk1","resource_type":"image","id":62588},{"cloudinary_id":"mlssznuz1ymk2xwdnban","project_id":6489,"created_at":"2025-03-23T19:04:33.807663Z","deleted":false,"name":"zombie1_slide","resource_type":"image","id":62587},{"cloudinary_id":"new0cs7s2fzxabqx2pzk","project_id":6489,"created_at":"2025-03-23T19:04:33.798312Z","deleted":false,"name":"bigsword","resource_type":"image","id":62586},{"cloudinary_id":"yiafc9smsssbok6t1ho1","project_id":6489,"created_at":"2025-03-23T19:04:33.794688Z","deleted":false,"name":"aliengoingsupersaiya","resource_type":"image","id":62585},{"cloudinary_id":"jdiwltoqvnimrzln1ipl","project_id":6489,"created_at":"2025-03-23T19:04:33.782298Z","deleted":false,"name":"butt","resource_type":"image","id":62584},{"cloudinary_id":"ayzwz0f5un1fa3ld27gb","project_id":6489,"created_at":"2025-03-23T19:04:33.779194Z","deleted":false,"name":"zombie1_idle","resource_type":"image","id":62583},{"cloudinary_id":"vkluith8qyjdzyviy0zs","project_id":6489,"created_at":"2025-03-23T19:04:33.759488Z","deleted":false,"name":"character1_walk1","resource_type":"image","id":62582},{"cloudinary_id":"zqunumoniygxet2q6ao7","project_id":6489,"created_at":"2025-03-23T19:04:33.740177Z","deleted":false,"name":"character1_idle","resource_type":"image","id":62581},{"cloudinary_id":"sgltu5phf740juy8b4z3","project_id":6489,"created_at":"2025-03-23T19:04:33.738790Z","deleted":false,"name":"character1_jump","resource_type":"image","id":62580},{"cloudinary_id":"jdkajfc9r1jbc5wxtyba","project_id":6489,"created_at":"2025-03-23T19:04:33.719320Z","deleted":false,"name":"character1_slide","resource_type":"image","id":62579},{"cloudinary_id":"vfn8nx23jlr43jnlgjud","project_id":6489,"created_at":"2025-03-23T19:04:33.669993Z","deleted":false,"name":"character1_walk2","resource_type":"image","id":62578},{"cloudinary_id":"n7uxenme7qflarrwnvbc","project_id":6489,"created_at":"2025-03-23T19:04:33.668864Z","deleted":false,"name":"planet05","resource_type":"image","id":62577},{"cloudinary_id":"sjy8ua9nnadyy7uwkcqn","project_id":6489,"created_at":"2025-03-23T19:04:33.667459Z","deleted":false,"name":"planet04","resource_type":"image","id":62576},{"cloudinary_id":"cwzxjrbqsfr1ugcsbbbd","project_id":6489,"created_at":"2025-03-23T19:04:33.645016Z","deleted":false,"name":"planet07","resource_type":"image","id":62575},{"cloudinary_id":"ktholhqmblldss5zwf4c","project_id":6489,"created_at":"2025-03-23T19:04:33.601185Z","deleted":false,"name":"planet08","resource_type":"image","id":62574},{"cloudinary_id":"cnor0d1b0n3n3gkk2gzg","project_id":6489,"created_at":"2025-03-23T19:04:33.539250Z","deleted":false,"name":"woodCrate","resource_type":"image","id":62573}],"messages_sent":0,"comments":[],"steps":[]}