Haunted House Adventure

{"name":"Haunted House Adventure","description":"Embark on a spine-chilling adventure as you navigate a haunted house filled with mysterious rooms and eerie sounds. Create a character that can explore the haunted corridors, uncover hidden secrets, and avoid spooky encounters. Will you be able to find the way out or get lost in the shadows forever?","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-07-03T15:49:26.402602Z","updated_at":"2025-07-03T15:49:26.402603Z","user_id":293,"status":"PRIVATE","parent_id":null,"id":8674,"user":{"username":"alphamiami","id":293,"password_hash":"$2b$12$E8wTkQ0i.W4zUOkbcDIS1urhxe8Apt6s/hiGg1wz/duyd8CiARD3C","updated_at":"2025-01-03T16:25:03.588532Z","reset_token_expiry":null,"subscription_status":"canceled","photo":null,"email":"alex.kiser@alpha.school","recess_id":null,"created_at":"2025-01-03T16:25:03.588519Z","reset_token":null,"stripe_customer_id":"cus_RWFweFYyuD7iiO","seats":20},"code":{"script.js":"let character;\n\nfunction preload() {\n\n slimer = loadImage(\"@asset('slimer')\");\n fiery_idle = loadImage(\"@asset('fiery_idle')\");\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n character = new Character(width / 2, height / 2, 50); // Create character at center\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear screen each frame\n character.move();\n character.display();\n}\n\nclass Character {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n this.speed = 5;\n }\n\n move() {\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // Left arrow or 'A'\n this.x -= this.speed;\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // Right arrow or 'D'\n this.x += this.speed;\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // Up arrow or 'W'\n this.y -= this.speed;\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // Down arrow or 'S'\n this.y += this.speed;\n }\n }\n\n display() {\n // Display the slimer image at the character's position\n image(slimer, this.x, this.y, this.size, this.size); // Draw slimer image\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Haunted House Adventure\n \n \n \n\n\n \n\n"},"chat_history":[{"project_id":8674,"message":"create a character that can move in a haunted houseecreate a character that can move in a haun","created_at":"2025-07-03T15:49:27.211381Z","output_tokens":null,"deleted":0,"code_id":258779,"sender":"human","input_tokens":null,"id":153890},{"project_id":8674,"message":"Let's get started!\n Errors:\n","created_at":"2025-07-03T15:50:05.219713Z","output_tokens":null,"deleted":0,"code_id":258779,"sender":"client_script","input_tokens":null,"id":153891},{"project_id":8674,"message":"Great! Let's add a character to your haunted house project. Could you tell me a bit more about the character you have in mind? For example, what should the character look like and how would you like it to move around the haunted house?","created_at":"2025-07-03T15:50:07.327947Z","output_tokens":58,"deleted":0,"code_id":258779,"sender":"ai","input_tokens":2664,"id":153892},{"project_id":8674,"message":"let's make the character a spuare that i could control with wasd or the arrow keys","created_at":"2025-07-03T15:57:11.712724Z","output_tokens":null,"deleted":0,"code_id":258779,"sender":"human","input_tokens":null,"id":153897},{"project_id":8674,"message":"We can definitely create a square character that you can control with the WASD or arrow keys. Let's get started by adding the necessary code to move the square around.\n\nFirst, we'll define the character and its movement logic. We'll add this logic to your `script.js` file.\n\n### Step 1: Define the Character\n\n```javascript\n// script.js\nlet character;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n character = new Character(width / 2, height / 2, 50); // Create character at center\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear screen each frame\n character.move();\n character.display();\n}\n```\n\n### Step 2: Create the Character Class\n\n```javascript\n// script.js\nclass Character {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n this.speed = 5;\n }\n \n move() {\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // Left arrow or 'A'\n this.x -= this.speed;\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // Right arrow or 'D'\n this.x += this.speed;\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // Up arrow or 'W'\n this.y -= this.speed;\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // Down arrow or 'S'\n this.y += this.speed;\n }\n }\n \n display() {\n fill(255, 0, 0); // Red color\n rect(this.x, this.y, this.size, this.size); // Draw square\n }\n}\n```\n\n### Explanation\n\n- **Character Class**: The `Character` class manages the position, size, and movement of the character. It has methods to handle movement and display.\n- **Movement Logic**: The `move` method checks for key presses (WASD or arrow keys) and updates the character's position accordingly.\n- **Display**: The `display` method draws the character as a red square on the canvas.\n\nThis code will allow you to move the square character around the screen using the WASD or arrow keys. Let me know if there's anything else you'd like to add!","created_at":"2025-07-03T15:57:13.330070Z","output_tokens":521,"deleted":0,"code_id":258779,"sender":"ai","input_tokens":2679,"id":153898},{"project_id":8674,"message":"

Load your new image into your code:

\n\n```javascript\nfunction preload() {\n\n\tslimer = loadImage(\"@asset('slimer')\");\n}\n```","created_at":"2025-07-03T16:09:22.750943Z","output_tokens":null,"deleted":0,"code_id":258787,"sender":"server_script","input_tokens":null,"id":153899},{"project_id":8674,"message":"let's use slimer as the character","created_at":"2025-07-03T16:10:18.536138Z","output_tokens":null,"deleted":0,"code_id":258789,"sender":"human","input_tokens":null,"id":153900},{"project_id":8674,"message":"Perfect! We'll use the \"slimer\" image as the character instead of the red square. I'll update the `display` method of the `Character` class to draw the slimer image instead. Here's how to do it:\n\n### Step 1: Update the Character Class to Use the Slimer Image\n\nFirst, we will adjust the `display` method to show the slimer image.\n\n```javascript\n// script.js\nclass Character {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n this.speed = 5;\n }\n\n move() {\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // Left arrow or 'A'\n this.x -= this.speed;\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // Right arrow or 'D'\n this.x += this.speed;\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // Up arrow or 'W'\n this.y -= this.speed;\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // Down arrow or 'S'\n this.y += this.speed;\n }\n }\n\n display() {\n // Display the slimer image at the character's position\n image(slimer, this.x, this.y, this.size, this.size); // Draw slimer image\n }\n}\n```\n\n### Explanation\n\n- **Image Display**: The `display` method now uses `image(slimer, this.x, this.y, this.size, this.size)` to draw the slimer image at the character's current position.\n- **Size**: The slimer image will be drawn with the specified size.\n\n### Step 2: Ensure the Image is Loaded\n\nYou already have the slimer image loading in the `preload` function, which is great! Just make sure that it is loaded before the `setup` function runs.\n\nWith these changes, your character will now move around the screen as the slimer image! Let me know if you'd like to add anything else or make further adjustments!","created_at":"2025-07-03T16:10:20.471354Z","output_tokens":445,"deleted":0,"code_id":258789,"sender":"ai","input_tokens":3118,"id":153901},{"project_id":8674,"message":"

Load your new image into your code:

\n\n```javascript\nfunction preload() {\n\n slimer = loadImage(\"@asset('slimer')\");\n\tfiery_idle = loadImage(\"@asset('fiery_idle')\");\n}\n```","created_at":"2025-07-03T16:14:41.439459Z","output_tokens":null,"deleted":0,"code_id":258791,"sender":"server_script","input_tokens":null,"id":153907}],"assets":[{"created_at":"2025-07-03T16:14:38.995596Z","name":"fiery_idle","resource_type":"image","tags":null,"project_id":8674,"creator":"","cloudinary_id":"ynpm5rkyfeftz06gmaf2","deleted":false,"id":78724},{"created_at":"2025-07-03T16:09:20.228524Z","name":"slimer","resource_type":"image","tags":null,"project_id":8674,"creator":"","cloudinary_id":"yr84u4khmfg7bljc0shp","deleted":false,"id":78723}],"messages_sent":3,"comments":[],"steps":[]}