Circular Adventure Quest

{"name":"NotStickRPG","description":"Embark on a circular adventure quest, where you navigate a winding path, collect treasures, and overcome obstacles. Can you master the circular path and achieve victory?","photo":null,"view_count":10,"fork_count":3,"expires_at":null,"created_at":"2024-02-15T22:25:16.489428Z","updated_at":"2024-02-20T18:13:16.386563Z","user_id":2,"status":"PUBLIC","parent_id":null,"id":645,"user":{"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let gameOverlay = document.getElementById('gameOverlay');\r\nfunction updateGameOverlay(content, x, y) {\r\n gameOverlay.innerHTML = content; // Update the content\r\n gameOverlay.style.transform = `translate(${x}px, ${y}px)`; // Position the overlay\r\n}\r\n// When the player interacts with an NPC:\r\nfunction showNPCDialogue(text) {\r\n gameOverlay.innerHTML = `

${text}

`;\r\n // Position it at the bottom center of the screen\r\n gameOverlay.style.bottom = '10%';\r\n gameOverlay.style.left = '50%';\r\n gameOverlay.style.transform = 'translate(-50%, 0)';\r\n gameOverlay.style.pointerEvents = 'none'; // Ensure it doesn't block canvas interactions\r\n}\r\nclass NPC {\r\n constructor(x, y, imgURL) {\r\n this.x = x;\r\n this.y = y;\r\n this.img = loadImage(imgURL, img => {\r\n console.log('Image loaded successfully');\r\n }, err => {\r\n console.error('Error loading image: ', err);\r\n }); // Load the image for the NPC\r\n }\r\n\r\n display() {\r\n if (this.img) { // Make sure the image is loaded before trying to display it\r\n image(this.img, this.x, this.y, 50, 50); // Display the NPC\r\n }\r\n }\r\n}\r\nwindow.addEventListener('resize', resizeModal);\r\n\r\nfunction resizeModal() {\r\n let modal = document.getElementById('npcDialog');\r\n modal.style.width = window.innerWidth * 0.8 + 'px'; // 80% of window width\r\n modal.style.height = window.innerHeight * 0.8 + 'px'; // 80% of window height\r\n}\r\nlet easterEgg; // Declare a variable for the Easter egg\r\nclass EasterEgg {\r\n constructor(x, y, imgURL) {\r\n this.x = x;\r\n this.y = y;\r\n this.img = loadImage(imgURL, img => {\r\n console.log('Easter Egg loaded successfully');\r\n }, err => {\r\n console.error('Error loading Easter egg: ', err);\r\n }); // Load the image for the Easter egg\r\n\r\n }\r\n\r\n display() {\r\n if (this.img) { // Make sure the image is loaded before trying to display it\r\n image(this.img, this.x, this.y, 50, 50); // Display the Easter egg\r\n }\r\n text(\"You found our easter egg. Comment 'Old Man the Wise' on this project\", this.x, this.y + 60);\r\n\r\n }\r\n\r\n\r\n}\r\nlet npc; // Declare a variable for the NPC\r\n\r\nclass Player {\r\n constructor() {\r\n this.x = 50;\r\n this.y = 50;\r\n this.speed = 2;\r\n this.sprintSpeed = 3; // Additional speed when sprinting\r\n this.heading = 0; // New variable to track the player's direction\r\n this.size = 40; // Updated size for the player\r\n }\r\n\r\n display() {\r\n push(); // Save the current transformation\r\n translate(this.x, this.y); // Move the origin to the player's position\r\n rotate(this.heading); // Rotate the canvas by the player's direction\r\n imageMode(CENTER); // Draw the image centered at the origin\r\n image(playerImg, 0, 0, this.size, this.size); // Draw the player's image at the new origin with updated size\r\n pop(); // Restore the transformation\r\n }\r\n move() {\r\n // Store the old player position\r\n let oldX = this.x;\r\n let oldY = this.y;\r\n let currentSpeed = keyIsDown(SHIFT) ? this.sprintSpeed : this.speed;\r\n\r\n if ((keyIsDown(LEFT_ARROW) || keyIsDown(65)) && this.x - currentSpeed > 0) {\r\n this.x -= currentSpeed;\r\n this.heading = -HALF_PI; // Left direction\r\n }\r\n if ((keyIsDown(RIGHT_ARROW) || keyIsDown(68)) && this.x + currentSpeed < width) {\r\n this.x += currentSpeed;\r\n this.heading = HALF_PI; // Right direction\r\n }\r\n if ((keyIsDown(UP_ARROW) || keyIsDown(87)) && this.y - currentSpeed > 0) {\r\n this.y -= currentSpeed;\r\n this.heading = 0; // Up direction\r\n }\r\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) {\r\n this.y += currentSpeed;\r\n this.heading = PI; // Down direction\r\n }\r\n\r\n // If the player has moved, tell the car that it can move again\r\n if (this.x !== oldX || this.y !== oldY) {\r\n car.canMove = true;\r\n }\r\n }\r\n}\r\n\r\nlet houses = [];\r\nfunction addHouse(x, y, imgURL, link, width = 50, height = 50) {\r\n let img = loadImage(imgURL); // load the image\r\n houses.push(new House(x, y, img, link, width, height));\r\n}\r\nclass House {\r\n constructor(x, y, img, link, width = 50, height = 50) {\r\n this.x = x;\r\n this.y = y;\r\n this.img = img;\r\n this.link = link;\r\n this.width = width; // Use the provided width parameter or default to 50\r\n this.height = height; // Use the provided height parameter or default to 50\r\n }\r\n display() {\r\n image(this.img, this.x, this.y, this.width, this.height);\r\n }\r\n}\r\nlet player;\r\nlet building;\r\nlet playerImg;\r\nlet buildingImg;\r\nlet modal; // Declare 'modal' in the global scope\r\nlet span;\r\nlet townBg; // Declare a variable for the town background image\r\nlet car;\r\n\r\nfunction preload() {\r\n townBg = loadImage('https://media.discordapp.net/attachments/1178847227762982932/1209233255832752229/pixil-frame-0_1.png?ex=65e62d3a&is=65d3b83a&hm=67e58e08414e2b48d984deef8c54d5a6647bc67dcec305f30d979ee4e2338a24&=&format=webp&quality=lossless');\r\n bgImg = loadImage('https://media.discordapp.net/attachments/1178846400491040821/1209561423496216618/pixil-frame-0_3.png?ex=65e75edb&is=65d4e9db&hm=e2ad0f5df1eb3062b900d710d56f646bab9dfccf429069ac499d963c50b0e810&=&format=webp&quality=lossless'); // replace 'bgImg.jpg' with your actual image path\r\n\r\n playerImg = loadImage('https://media.discordapp.net/attachments/1172012862194073744/1207817841244372992/get_attachment_url.png?ex=65e10705&is=65ce9205&hm=9c14ac17d51e7d625acbb80d70e08ec2100274506b335852c4d83bfe3163fe8a&=&format=webp&quality=lossless'); // replace with path to your player image\r\n}\r\nlet npc2; // Declare a variable for the second NPC\r\n\r\nclass Car {\r\n constructor(x, y, imgURL) {\r\n this.x = x;\r\n this.y = y;\r\n this.speed = 0; // Current speed of the car\r\n this.maxSpeed = 5; // Maximum speed\r\n this.acceleration = 0.2; // Acceleration rate\r\n this.friction = 0.05; // Friction rate, simulating braking and natural slowing down\r\n this.angle = 0; // Angle of the car, for turning\r\n this.img = loadImage(imgURL, img => {\r\n console.log('Car image loaded successfully');\r\n }, err => {\r\n console.error('Error loading car image: ', err);\r\n });\r\n this.isControlled = false;\r\n }\r\n\r\n display() {\r\n push();\r\n translate(this.x, this.y);\r\n rotate(this.angle);\r\n rotate(this.angle + HALF_PI); // Rotate by the car's angle plus 90 degrees (PI/2 radians)\r\n\r\n imageMode(CENTER);\r\n image(this.img, 0, 0, 50, 50);\r\n pop();\r\n }\r\n\r\n move() {\r\n if (this.isControlled) {\r\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // Accelerate\r\n this.speed += this.acceleration;\r\n } else if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // Brake\r\n this.speed -= this.acceleration; // Braking is faster than accelerating\r\n } else {\r\n // Apply friction to slow down gradually when no acceleration/brake is applied\r\n if (this.speed - this.friction > 0) {\r\n this.speed -= this.friction;\r\n } else if (this.speed + this.friction < 0) {\r\n this.speed += this.friction;\r\n } else {\r\n this.speed = 0;\r\n }\r\n }\r\n\r\n // Limit speed to maximum\r\n this.speed = constrain(this.speed, -this.maxSpeed, this.maxSpeed);\r\n\r\n // Turning\r\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) {\r\n this.angle -= 0.05;\r\n }\r\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) {\r\n this.angle += 0.05;\r\n }\r\n\r\n // Move the car based on its speed and angle\r\n this.x += this.speed * cos(this.angle);\r\n this.y += this.speed * sin(this.angle);\r\n }\r\n }\r\n}\r\nlet bgImg; // Declare a variable for the background image\r\n\r\nfunction setup() {\r\n pixelDensity(1); // Set pixel density to 1\r\n\r\n createCanvas(400, 400);\r\n\r\n player = new Player();\r\n car = new Car(width / 2 + 55, 55, 'https://media.discordapp.net/attachments/1178846400491040821/1209554265631232050/get_attachment_url.png?ex=65e75831&is=65d4e331&hm=d133300a4a4d14e921bc2300532533095f6328f857d8ab319ad78dbf66ddba15&=&format=webp&quality=lossless');\r\n addHouse(40, 85, 'https://media.discordapp.net/attachments/1178846400491040821/1209553021109927986/get_attachment_url.png?ex=65e75708&is=65d4e208&hm=31ce7e9a4f6d57563c12b1e522382037c4a0e5cef0a98847fa8ab85928e22823&=&format=webp&quality=lossless', 'https://www.jippity.pro/646', 100, 100);\r\n\r\n // Add a second house\r\n addHouse(115, 100, 'https://media.discordapp.net/attachments/1178846400491040821/1209559089412313128/pixil-frame-0_2.png?ex=65e75caf&is=65d4e7af&hm=362fbe55a10f67c6befbe02145fc6b57b3cce926971175ec0a58138e60f43dd6&=&format=webp&quality=lossless', 'https://www.jippity.pro/648', 65, 65);\r\n addHouse(15, 325, 'https://media.discordapp.net/attachments/1172012862194073744/1208084212507217970/unnamed_10.png?ex=65e1ff19&is=65cf8a19&hm=174609b188358c62832f106baafceaca4b6362e41c90000e7518e50ecbb7ff52&=&format=webp&quality=lossless', 'https://www.jippity.pro/662', 100, 100);\r\n addHouse(325, 175, 'https://media.discordapp.net/attachments/1172012862194073744/1208084212507217970/unnamed_10.png?ex=65e1ff19&is=65cf8a19&hm=174609b188358c62832f106baafceaca4b6362e41c90000e7518e50ecbb7ff52&=&format=webp&quality=lossless', 'https://www.jippity.pro/665', 100, 100);\r\n addHouse(325, 95, 'https://media.discordapp.net/attachments/1172012862194073744/1208084212507217970/unnamed_10.png?ex=65e1ff19&is=65cf8a19&hm=174609b188358c62832f106baafceaca4b6362e41c90000e7518e50ecbb7ff52&=&format=webp&quality=lossless', 'https://www.jippity.pro/669', 100, 100);\r\n addHouse(325, 0, 'https://media.discordapp.net/attachments/1172012862194073744/1208084212507217970/unnamed_10.png?ex=65e1ff19&is=65cf8a19&hm=174609b188358c62832f106baafceaca4b6362e41c90000e7518e50ecbb7ff52&=&format=webp&quality=lossless', 'https://www.jippity.pro/671', 100, 100);\r\n addHouse(325, 255, 'https://media.discordapp.net/attachments/1172012862194073744/1208084212507217970/unnamed_10.png?ex=65e1ff19&is=65cf8a19&hm=174609b188358c62832f106baafceaca4b6362e41c90000e7518e50ecbb7ff52&=&format=webp&quality=lossless', 'https://www.jippity.pro/681', 100, 100);\r\n addHouse(325, 325, 'https://media.discordapp.net/attachments/1172012862194073744/1208084212507217970/unnamed_10.png?ex=65e1ff19&is=65cf8a19&hm=174609b188358c62832f106baafceaca4b6362e41c90000e7518e50ecbb7ff52&=&format=webp&quality=lossless', 'https://www.jippity.pro/692', 100, 100);\r\n\r\n npc = new NPC(120, 355, 'https://media.discordapp.net/attachments/1172012862194073744/1208876761778233357/pixil-frame-0_6_1.png?ex=65e4e137&is=65d26c37&hm=77e3b4385b22a80b0262c42ec92117df2df21a1929c784497a83e50dfead87dd&=&format=webp&quality=lossless');\r\n modal = document.getElementById(\"npcDialog\");\r\n span = document.getElementsByClassName(\"close\")[0];\r\n npc2 = new NPC(135, 25, 'https://media.discordapp.net/attachments/1178847227762982932/1209239045104730233/pixil-frame-0_2.png?ex=65e6329e&is=65d3bd9e&hm=7fae2fbee8f314fc506f5fc1fee99a3d4bc6b0d3cda508117e6115b9a9e9b068&=&format=webp&quality=lossless');\r\n easterEgg = new EasterEgg(0, 755, 'https://media.discordapp.net/attachments/1178846400491040821/1209241896665481257/pixil-frame-0_29.png?ex=65e63546&is=65d3c046&hm=c16c396bf929ffc87d8cbe33ab7350ee19e6547714402be81b08486b82bd2408&=&format=webp&quality=lossless'); // replace with path to your Easter egg image\r\n noSmooth();\r\n\r\n span.onclick = function () {\r\n modal.style.display = \"none\";\r\n }\r\n\r\n window.onclick = function (event) {\r\n if (event.target == modal) {\r\n modal.style.display = \"none\";\r\n }\r\n }\r\n}\r\n\r\nfunction draw() {\r\n background(0); // set background color to black\r\n if (car.isControlled) {\r\n translate(-car.x + width / 2, -car.y + height / 2); // Make camera follow the car\r\n document.getElementById('carControlsInfo').style.display = 'block'; // Show car controls info\r\n } else {\r\n translate(-player.x + width / 2, -player.y + height / 2); // Make camera follow the player\r\n document.getElementById('carControlsInfo').style.display = 'none'; // Hide car controls info\r\n } background(bgImg); // Set the background to the loaded image\r\n textSize(6 * 3); // Scale text size\r\n\r\n image(townBg, 0, 0, width, height);\r\n car.display();\r\n\r\n if (!car.isControlled) { // Only allow the player to move if they are not controlling the car\r\n player.move();\r\n player.display();\r\n\r\n }\r\n else {\r\n car.move()\r\n }\r\n if (dist(player.x, player.y, car.x, car.y) < 50 && !car.isControlled) {\r\n fill(255);\r\n text(\"Press Space to Drive\", car.x, car.y - 10);\r\n if (keyIsDown(32)) { // If the spacebar is pressed\r\n car.isControlled = true; // The car is now under player control\r\n }\r\n }\r\n for (let house of houses) {\r\n house.display();\r\n }\r\n\r\n easterEgg.display();\r\n npc2.display(); // Display the second NPC\r\n if (dist(player.x, player.y, npc2.x, npc2.y) < 50) {\r\n fill(255);\r\n text(\"Press Space to Talk\", npc2.x, npc2.y - 10);\r\n if (keyIsDown(32)) {\r\n document.getElementById('npcText').src = \"https://www.jippity.pro/683\";\r\n modal.style.display = \"block\";\r\n modal.style.left = npc2.x + 'px';\r\n modal.style.top = npc2.y + 'px';\r\n }\r\n }\r\n npc.display(); // Display the NPC\r\n if (dist(player.x, player.y, npc.x, npc.y) < 50) {\r\n fill(255);\r\n text(\"Press Space to Talk\", npc.x, npc.y - 10);\r\n if (keyIsDown(32)) {\r\n document.getElementById('npcText').src = \"https://www.jippity.pro/676\";\r\n modal.style.display = \"block\";\r\n modal.style.left = npc.x + 'px';\r\n modal.style.top = npc.y + 'px';\r\n }\r\n }\r\n\r\n for (let house of houses) {\r\n house.display();\r\n\r\n if (dist(player.x, player.y, house.x + house.width / 2, house.y + house.height / 2) < 50) {\r\n fill(255);\r\n text(\"Press Space to Enter\", house.x, house.y - 10);\r\n\r\n\r\n if (keyIsDown(32)) {\r\n window.location.href = house.link;\r\n }\r\n\r\n\r\n }\r\n }\r\n\r\n}\r\n\r\n// Event listener for keydown event\r\ndocument.addEventListener('keydown', function (event) {\r\n if (event.keyCode === 27) { // 27 is the keycode for the ESC key\r\n modal.style.display = \"none\";\r\n }\r\n});\r\nfunction keyPressed() {\r\n if (car.isControlled && (keyCode === ESCAPE || keyCode === 69)) { // Check if the car is controlled and either Escape or E is pressed\r\n car.isControlled = false; // Return control to the player\r\n\r\n // Calculate the player's position when exiting the car\r\n // Assuming the player should appear to the right of the car when they exit\r\n player.x = car.x + cos(car.angle + HALF_PI) * 30;\r\n player.y = car.y + sin(car.angle + HALF_PI) * 30;\r\n }\r\n}","style.css":"","index.html":"\n\n\n\n \n \n Circular Adventure Quest\n \n \n\n\n\n

Car Controls: Use WASD or Arrow Keys to move, E or esc to exit\n

\n \n\n\n\n\n"},"chat_history":[{"project_id":645,"sender":"human","message":"center canvasmake text under canvas ","deleted":0,"created_at":"2024-02-22T18:03:09.178059Z","output_tokens":null,"code_id":43818,"input_tokens":null,"id":24424},{"project_id":645,"sender":"ai","message":"To center the canvas and place explanatory text directly under it, we'll adjust the HTML structure and CSS styles accordingly. These changes will ensure that your canvas is centered both vertically and horizontally on the page, and any text intended to be displayed below the canvas is positioned correctly.\n\nFirst, let's modify your HTML structure to include a container that will center the canvas and a dedicated element for the text that should appear below the canvas. Then, we'll adjust the CSS to achieve the desired layout.\n\nHere are the changes:\n\n**index_html:**\n","deleted":0,"created_at":"2024-02-22T18:03:09.184942Z","output_tokens":null,"code_id":43818,"input_tokens":null,"id":24425},{"project_id":645,"sender":"human","message":"no canvas element","deleted":0,"created_at":"2024-02-22T18:03:20.514324Z","output_tokens":null,"code_id":43820,"input_tokens":null,"id":24426},{"project_id":645,"sender":"ai","message":"Given that there's no explicit `