Romeo and Juliet RPG Adventure

{"name":"Game Jam Feb2025 Template","description":"Fork this project!\n\nWASD/arrows to move.\n\nSpace to interact with Juliet and choose a dialogue option.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/kgcvushe7cmyzn7xjgdf","view_count":17,"fork_count":2,"expires_at":null,"created_at":"2025-02-14T18:00:39.108604Z","updated_at":"2025-02-14T18:00:39.108609Z","user_id":60,"status":"PUBLIC","parent_id":null,"id":5811,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"let person1;\n\nlet person2;\n\nlet romeo;\n\nlet juliet;\n\nlet isDialogueActive = false;\n\nlet selectedChoice = 0;\n\nlet isDialogueOpen = false;\n\nlet roseObject;\n\nlet loveMeter = 50;\n\nlet trees = [];\n\nlet goodOptions = [\n \"My bounty is as boundless as the sea; my love as deep.\",\n \"With love's light wings did I o'er-perch these walls.\",\n \"One fairer than my love? the all-seeing sun ne'er saw her match since first the world begun.\",\n \"But, soft! what light through yonder window breaks?\",\n \"See how she leans her cheek upon her hand, O that I were a glove upon that hand that I might touch that cheek!\",\n \"Parting is such sweet sorrow, that I shall say good night till it be morrow.\"\n\n];\n\nlet badOptions = [\n \"Thou detestable maw, thou womb of death!\",\n \"Thou wilt fall backward when thou hast more wit.\",\n \"Small grey-coated gnat!\",\n \"Thou art not half so big as a round little worm.\",\n \"Thou cut'st my head off with a golden axe and smilest upon the stroke that murders me.\",\n \"Scurvy knave!\"\n];\n\nlet dialogueMessage = \"\";\n\nlet bgMusic;\n\nlet hasPlayedMwah = false;\n\nlet heartsImage;\n\nfunction preload() {\n person1 = loadImage(\"@asset('person1')\");\n person2 = loadImage(\"@asset('person2')\");\n darkGrass = loadImage(\"@asset('darkGrass')\");\n rose = loadImage(\"@asset('rose')\");\n tree = loadImage(\"@asset('tree')\");\n bgMusic = loadSound(\"@asset('RJMusic')\");\n mwah = loadSound(\"@asset('mwah')\");\n mwah.setVolume(1.0);\n heartsImage = loadImage(\"@asset('hearts')\");\n}\n\nfunction setup() {\n bgMusic.setVolume(0.5);\n bgMusic.loop();\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n romeo = new Romeo(100, 100);\n juliet = new Juliet(random(-175, 175), random(-175, 175));\n roseObject = new Rose(random(-1000, 1000), random(-1000, 1000));\n\n for (i = 0; i < 20; i++) {\n trees.push(new Tree(random(-2000, -200), random(-2000, -200)))\n }\n\n for (i = 0; i < 20; i++) {\n trees.push(new Tree(random(200, 2000), random(200, 2000)))\n }\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n // Translate the canvas to follow the romeo\n push(); // Start a new drawing state\n translate(width / 2 - romeo.x, height / 2 - romeo.y);\n\n // Tile the ground with darkGrass\n for (let x = -4000; x < 4000; x += darkGrass.width) {\n for (let y = -2250; y < 2250; y += darkGrass.height) {\n image(darkGrass, x, y); // Draw the grass image\n }\n }\n\n // Draw trees with lower y-coordinate first\n trees\n .filter(tree => (tree.y + 30) < romeo.y) // Filter trees with y less than romeo y\n .forEach(tree => {\n tree.display();\n tree.checkCollision(romeo);\n });\n\n\n juliet.update();\n juliet.display(); // Display juliet\n romeo.display();\n displayDialogueBubble();\n\n // Draw trees with higher y-coordinate afterward\n trees\n .filter(tree => (tree.y + 30) >= romeo.y) // Filter trees with y greater than or equal to romeo y\n .forEach(tree => {\n tree.display();\n });\n\n // Update romeo movement only if dialogue is not active\n if (!isDialogueActive) {\n romeo.update();\n }\n\n displayLoveMeter();\n roseObject.checkCollision(); // Check for collision with the rose\n roseObject.display(); // Display the rose\n pop(); // Restore original drawing state\n\n // Check for proximity to the juliet\n if (dist(romeo.x, romeo.y, juliet.x, juliet.y) < 100) {\n if (isDialogueActive) {\n showDialogue(); // Show dialogue box with choices\n }\n } else {\n isDialogueActive = false; // dialogue is not active if far from juliet\n }\n}\n\nclass Romeo {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 5;\n }\n\n update() {\n if (isDialogueActive) return; // Prevent movement if dialogue is active\n\n // Prevent movement beyond walls\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) {\n if (this.x > -4000 + 30) { // Check left wall\n this.x -= this.speed;\n }\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) {\n if (this.x < 4000 - 30) { // Check right wall\n this.x += this.speed;\n }\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) {\n if (this.y > -2250 + 30) { // Check top wall\n this.y -= this.speed;\n }\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) {\n if (this.y < 2250 - 30) { // Check bottom wall\n this.y += this.speed;\n }\n }\n }\n\n\n display() {\n // Determine if the romeo should face left or right based on x positions\n let facingDirection = this.x < juliet.x ? 1 : -1; // Face right if romeo is left of juliet, otherwise face left\n\n push();\n scale(facingDirection, 1); // Flip the sprite based on direction\n image(person1, facingDirection === 1 ? this.x : -this.x - person1.width * 4, this.y, person1.width * 4, person1.height * 4); // Adjust x position for flipped image\n pop();\n }\n}\n\nclass Rose {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.equipped = false;\n }\n\n display() {\n if (this.equipped) {\n // If equipped, position the rose next to the romeo\n this.x = romeo.x + (romeo.x < juliet.x ? 30 : -30);\n this.y = romeo.y + 20;\n }\n image(rose, this.x, this.y, 50, 50);\n }\n\n checkCollision() {\n // Check for collision with the romeo\n if (!this.equipped && dist(this.x, this.y, romeo.x, romeo.y) < 30) {\n this.equipped = true;\n }\n }\n}\n\nclass Tree {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.width = tree.width / 2;\n this.height = tree.height / 2;\n }\n\n display() {\n image(tree, this.x, this.y, this.width, this.height);\n }\n\n checkCollision(romeo) {\n // Simple collision detection \n if (romeo.x + person1.width * 2 > this.x + this.width / 4 &&\n romeo.x < this.x + this.width * 3 / 4 &&\n romeo.y + person1.height * 2 > this.y + this.height / 4 &&\n romeo.y < this.y + this.height * 3 / 4) {\n\n // Determine the overlap on each axis\n let overlapX = Math.min(this.x + this.width * 3 / 4 - romeo.x, romeo.x + person1.width * 2 - (this.x + this.width / 4));\n let overlapY = Math.min(this.y + this.height * 3 / 4 - romeo.y, romeo.y + person1.height * 2 - (this.y + this.height / 4));\n\n // Resolve the smallest overlap\n if (overlapX < overlapY) {\n // Horizontal collision\n if (romeo.x < this.x + this.width / 2) {\n romeo.x -= overlapX; // Move romeo back to the left\n } else {\n romeo.x += overlapX; // Move romeo back to the right\n }\n } else {\n // Vertical collision\n if (romeo.y < this.y + this.height / 2) {\n romeo.y -= overlapY; // Move romeo back up\n } else {\n romeo.y += overlapY; // Move romeo back down\n }\n }\n }\n }\n}\n\nclass Juliet {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.hearts = [];\n }\n\n update() {\n if (isDialogueActive) return;\n\n let distance = dist(this.x, this.y, romeo.x, romeo.y);\n\n // Check if distance is less than or equal to 50 pixels and love meter is greater than 50\n if (distance <= 50 && loveMeter > 50) {\n if (!hasPlayedMwah) {\n mwah.play(); // Play the mwah sound effect\n hasPlayedMwah = true; // Ensure the sound only plays once\n\n this.hearts.push(new Heart(this.x, this.y));\n\n }\n } else {\n hasPlayedMwah = false; // Reset if conditions are not met\n }\n\n // Update hearts\n this.hearts.forEach((heart, index) => {\n heart.update(); // Update each heart's position and alpha\n if (heart.isFinished()) {\n this.hearts.splice(index, 1); // Remove heart if its lifetime is over\n }\n });\n\n if (distance > 50 || loveMeter < 50) {\n let speed = abs(loveMeter - 50) * 0.1;\n if (loveMeter < 50) {\n this.x += (this.x - romeo.x) / distance * speed;\n this.y += (this.y - romeo.y) / distance * speed;\n } else if (loveMeter > 50) {\n this.x -= (this.x - romeo.x) / distance * speed;\n this.y -= (this.y - romeo.y) / distance * speed;\n }\n }\n }\n\n display() {\n let facingDirection = romeo.x < this.x ? -1 : 1;\n push();\n scale(facingDirection, 1);\n image(person2, facingDirection === 1 ? this.x : -this.x - person2.width * 4, this.y, person2.width * 4, person2.height * 4);\n pop();\n\n\n this.hearts.forEach(heart => heart.display());\n }\n}\n\nclass Heart {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.alpha = 255; // Opacity for fading\n this.lifetime = 2000; // Duration before fading away (in milliseconds)\n this.startTime = millis(); // Record the start time\n }\n\n update() {\n this.y -= 1; // Move the heart upwards\n const elapsed = millis() - this.startTime; // Time since the heart was created\n if (elapsed < this.lifetime) {\n this.alpha = map(elapsed, 0, this.lifetime, 255, 0); // Fade out the heart\n }\n }\n\n display() {\n push(); // Save the current drawing state\n tint(255, this.alpha); // Apply the alpha for transparency\n image(heartsImage, this.x, this.y, heartsImage.width / 18, heartsImage.width / 18); // Draw the heart image\n pop(); // Restore the drawing state\n }\n\n isFinished() {\n return millis() - this.startTime > this.lifetime; // Check if the heart should fade away\n }\n}\n\nfunction displayLoveMeter() {\n let meterWidth = 100;\n let meterHeight = 10;\n let x = juliet.x - meterWidth / 2 + person2.width / 2; // Center above juliet\n let y = juliet.y - 30; // Position above juliet\n\n // Draw black background bar\n fill(0);\n rect(x, y, meterWidth, meterHeight);\n\n // Draw pink filled bar based on love meter\n fill(255, 105, 180); // Pink \n rect(x, y, (loveMeter / 100) * meterWidth, meterHeight);\n}\n\nfunction keyPressed() {\n // If romeo is close enough to juliet and the space bar is pressed, activate dialogue\n if (!isDialogueActive && dist(romeo.x, romeo.y, juliet.x, juliet.y) < 100 && key === ' ') {\n isDialogueActive = true; // Activate dialogue\n selectedChoice = 0; // Reset selection when opening dialogue\n\n // Randomly select one good option and one bad option\n let randomGood = goodOptions[Math.floor(Math.random() * goodOptions.length)];\n let randomBad = badOptions[Math.floor(Math.random() * badOptions.length)];\n\n choices = [randomGood, randomBad]; // Update the choices array with the selected options\n } else if (isDialogueActive) {\n // Handle choice navigation\n if (key === 'w' || key === 'ArrowUp') { // W or Up Arrow\n selectedChoice = (selectedChoice - 1 + choices.length) % choices.length; // Move up\n }\n if (key === 's' || key === 'ArrowDown') { // S or Down Arrow\n selectedChoice = (selectedChoice + 1) % choices.length; // Move down\n }\n // If space is pressed, select the current choice\n if (key === ' ') {\n handleChoice(selectedChoice); // Handle the selected choice\n isDialogueActive = false; // Close dialogue after selection\n }\n }\n}\n\nfunction showDialogue() {\n fill('#ffeacb'); // sepia\n let dialogueWidth = width;\n let maxHeight = 300;\n let textHeight = 0; // Initialize text height\n\n // Calculate the height needed for the text\n for (let i = 0; i < choices.length; i++) {\n textSize(24);\n textAlign(LEFT);\n textHeight += textAscent() + textDescent(); // Add height for each line of text\n }\n\n // Set the dialogue box height based on text height, but limit it to maxHeight\n let dialogueHeight = min(textHeight + 100, maxHeight); // Add some padding\n\n rect(0, height - dialogueHeight, dialogueWidth, dialogueHeight); // Draw rectangle for dialogue box\n\n\n\n textAlign(CENTER);\n\n // Display choices with word wrapping\n for (let i = 0; i < choices.length; i++) {\n // Highlight the selected choice\n if (i === selectedChoice) {\n textSize(24);\n fill(255, 105, 180); // Pink for the selected choice\n } else {\n textSize(22);\n fill(100); // gray for unselected choices\n }\n\n let yOffset = height - dialogueHeight + 30 + (i * (textAscent() + textDescent() + 35)); // Calculate y position for each line\n text(choices[i], 0, yOffset, dialogueWidth); // Display each choice centered within the dialogue box\n }\n}\n\nfunction displayDialogueBubble() {\n if (dialogueMessage !== \"\") {\n let bubbleX = juliet.x + person2.width / 2;\n let bubbleY = juliet.y - 55; // Position the bubble above juliet\n\n\n fill('#ffeacb');\n rect(bubbleX - 40, bubbleY - 20, 80, 40, 10); // Draw a rectangle with rounded corners\n\n fill(0)\n textAlign(CENTER, CENTER);\n textSize(16);\n text(dialogueMessage, bubbleX, bubbleY);\n }\n}\n\nfunction handleChoice(choiceIndex) {\n let impact = roseObject.equipped ? 30 : 15; // Double the impact if the rose is equipped\n\n if (choiceIndex === 0) {\n // Action for Option 1\n console.log(\"You selected Option 1\");\n loveMeter = min(loveMeter + impact, 100); // Increase love meter\n dialogueMessage = \"omg!\"; // Set the message for a good choice\n } else if (choiceIndex === 1) {\n // Action for Option 2\n console.log(\"You selected Option 2\");\n loveMeter = max(loveMeter - impact, 0); // Decrease love meter\n dialogueMessage = \"ew!\"; // Set the message for a bad choice\n }\n isDialogueActive = false; // Close the dialogue after selection\n selectedChoice = 0; // Reset selection\n\n // Set a timer to clear the dialogue message after 2 seconds\n setTimeout(() => {\n dialogueMessage = \"\";\n }, 2000);\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Romeo and Juliet RPG Adventure\n \n \n \n \n\n\n\n \n\n\n"},"chat_history":[],"assets":[{"name":"hearts","cloudinary_id":"cfiograstguv4hrixopv","resource_type":"image","id":59559,"project_id":5811,"created_at":"2025-02-13T21:32:49.172893Z","deleted":false},{"name":"mwah","cloudinary_id":"ltudvrd0lzy2xcchufxd","resource_type":"video","id":59558,"project_id":5811,"created_at":"2025-02-13T21:25:37.988862Z","deleted":false},{"name":"RJMusic","cloudinary_id":"nnoqmtexilebnz8lreuv","resource_type":"video","id":59557,"project_id":5811,"created_at":"2025-02-13T21:22:17.514823Z","deleted":false},{"name":"tree","cloudinary_id":"uklrn4hxxxdmn43kiy2l","resource_type":"image","id":59556,"project_id":5811,"created_at":"2025-02-13T18:36:55.780393Z","deleted":false},{"name":"darkGrass","cloudinary_id":"h2m4ngh5ocxlk9xketn8","resource_type":"image","id":59555,"project_id":5811,"created_at":"2025-02-13T17:14:02.500346Z","deleted":false},{"name":"rose","cloudinary_id":"kgcvushe7cmyzn7xjgdf","resource_type":"image","id":59554,"project_id":5811,"created_at":"2025-02-13T17:08:10.902715Z","deleted":false},{"name":"person2","cloudinary_id":"mpauopelwt5ycnqzevsh","resource_type":"image","id":59552,"project_id":5811,"created_at":"2025-02-13T16:21:56.388053Z","deleted":false},{"name":"person1","cloudinary_id":"sthoa13c2wcsz7wrfyyo","resource_type":"image","id":59551,"project_id":5811,"created_at":"2025-02-13T16:16:19.423482Z","deleted":false}],"messages_sent":65,"comments":[],"steps":[]}