Emoji Adventure Game

{"name":"Intro - Functions Alternate","description":"Day 3 of the Introduction to Programming With Jippity course. \n\nTopic: Functions","photo":"","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-01-30T03:57:04.193525Z","updated_at":"2025-01-30T03:57:04.193528Z","user_id":166,"status":"PRIVATE","parent_id":5486,"id":5677,"user":{"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"/*\n----------------------------------------------------------------------------------------------------------------------------\n\n\n _____ _ _ _____ _ \n |_ _| | | | | | __ \\ (_) \n | | _ __ | |_ _ __ ___ | |_ ___ | |__) | __ ___ __ _ _ __ __ _ _ __ ___ _ __ ___ _ _ __ __ _ \n | | | '_ \\| __| '__/ _ \\ | __/ _ \\ | ___/ '__/ _ \\ / _` | '__/ _` | '_ ` _ \\| '_ ` _ \\| | '_ \\ / _` |\n _| |_| | | | |_| | | (_) | | || (_) | | | | | | (_) | (_| | | | (_| | | | | | | | | | | | | | | | (_| |\n |_____|_| |_|\\__|_| \\___/ \\__\\___/ |_| |_| \\___/ \\__, |_| \\__,_|_| |_| |_|_| |_| |_|_|_| |_|\\__, |\n __/ | __/ |\n |___/ |___/ \n\n __ ___ _ _ _ _ _ _ _____ ____ \n \\ \\ / (_) | | | | (_) (_) | | __ \\ |___ \\ \n \\ \\ /\\ / / _| |_| |__ | |_ _ __ _ __ _| |_ _ _ ______ | | | | __ _ _ _ __) |\n \\ \\/ \\/ / | | __| '_ \\ _ | | | '_ \\| '_ \\| | __| | | | |______| | | | |/ _` | | | | |__ < \n \\ /\\ / | | |_| | | | | |__| | | |_) | |_) | | |_| |_| | | |__| | (_| | |_| | ___) |\n \\/ \\/ |_|\\__|_| |_| \\____/|_| .__/| .__/|_|\\__|\\__, | |_____/ \\__,_|\\__, | |____/ \n | | | | __/ | __/ | \n |_| |_| |___/ |___/ \n\n\n\n----------------------------------------------------------------------------------------------------------------------------\n\n\n _______ _ ______ _ _ \n |__ __| (_) _ | ____| | | (_) \n | | ___ _ __ _ ___(_) | |__ _ _ _ __ ___| |_ _ ___ _ __ ___ \n | |/ _ \\| '_ \\| |/ __| | __| | | | '_ \\ / __| __| |/ _ \\| '_ \\/ __|\n | | (_) | |_) | | (__ _ | | | |_| | | | | (__| |_| | (_) | | | \\__ \\\n |_|\\___/| .__/|_|\\___(_) |_| \\__,_|_| |_|\\___|\\__|_|\\___/|_| |_|___/\n | | \n |_| \n\n\n----------------------------------------------------------------------------------------------------------------------------\n*/\n\n\nlet characterX; // X position of the character\nlet characterY; // Y position of the character\n\n\n\nfunction handleCharacterMovement() {\n\n // Add code here\n\n}\n\n\n\n\n\nlet spriteFrames = []; // Array to hold individual frames\nlet frameWidth; // Width of each frame\nlet frameHeight; // Height of each frame\nlet totalFrames = 4; // Total number of frames (3 rows, only using the rightmost column)\nlet currentFrame = 0; // To keep track of the current frame to display\nlet frameCounter = 0; // Counter for frame updates\nlet characterScaleFactor = 6;\nconst spriteUpdateInterval = 8; // Number of frames to wait before updating sprite\n\n\n//----------------------------------------------------------------------------------------------------------------------------\n// The preload and setup functions are called automatically at the start of the game.\n\nfunction preload() {\n sprite = loadImage(\"@asset('sprite')\");\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n noSmooth(); // Disable image smoothing\n\n // Assuming the sprite sheet is divided into 3 columns and 4 rows\n frameWidth = sprite.width / 3; // Width of each sprite frame\n frameHeight = sprite.height / 4; // Height of each sprite frame\n\n // Initialize characterX to start at the left of the screen\n characterX = frameWidth * characterScaleFactor / 2; // Center the character horizontally\n\n // Initialize characterY to rest on top of the floor\n characterY = height - 20 - (frameHeight * characterScaleFactor); // Adjust for floor height and character height\n\n // Extract frames from the sprite sheet\n for (let i = 0; i < totalFrames; i++) {\n let frame = sprite.get((3 - 1) * frameWidth, i * frameHeight, frameWidth, frameHeight);\n spriteFrames.push(frame); // Store the frames\n }\n\n console.log(\"test\");\n console.log(5);\n}\n\n//----------------------------------------------------------------------------------------------------------------------------\n// The draw function is called automatically 60 times per second.\n\nfunction draw() {\n background(135, 206, 235); // Clear the canvas with the sky blue background\n\n frameCounter++; // Increment the frame counter each frame\n\n // Update the current frame for animation only if the character is moving\n if ((keyIsDown(RIGHT_ARROW) || keyIsDown(LEFT_ARROW)) && frameCounter >= spriteUpdateInterval) {\n currentFrame = (currentFrame + 1) % spriteFrames.length; // Loop through frames\n frameCounter = 0; // Reset the frame counter after updating\n } else if (!keyIsDown(RIGHT_ARROW) && !keyIsDown(LEFT_ARROW)) {\n currentFrame = 0; // Reset to the first frame if not moving\n }\n\n handleCharacterMovement(); // Call the movement function\n\n drawFloor();\n drawCharacter();\n}\n\n//----------------------------------------------------------------------------------------------------------------------------\n// These are more functions that are called from the draw() function\n\nfunction drawCharacter() {\n // Draw the character using the calculated characterY\n image(spriteFrames[currentFrame], characterX - (frameWidth * characterScaleFactor) / 2, characterY, frameWidth * characterScaleFactor, frameHeight * characterScaleFactor);\n}\n\nfunction drawFloor() {\n fill(169, 169, 169); // Set the floor color to dark grey\n rect(0, height - 20, windowWidth, 20); // Draw the floor across the bottom\n}\n\n\n\n\n// function handleCharacterMovement() {\n\n// if (keyIsDown(RIGHT_ARROW)) {\n// characterX += 7; // Move right\n// }\n\n// if (keyIsDown(LEFT_ARROW)) {\n// characterX -= 7; // Move left\n// }\n\n// }","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Emoji Adventure Game\n \n \n\n\n \n\n"},"chat_history":[{"code_id":206098,"deleted":0,"input_tokens":null,"id":105781,"project_id":5677,"sender":"human","message":"look at my code. ","created_at":"2025-01-30T04:20:59.211915Z","output_tokens":null},{"code_id":206098,"deleted":0,"input_tokens":4063,"id":105782,"project_id":5677,"sender":"ai","message":"Sure! I see that you have a project set up with some character movement using a sprite sheet. It looks like you're working on a game where you want to add features like jumping and sprinting to your character.\n\nCould you tell me a bit more about your project? What kind of game are you building, and what other features would you like to include?","created_at":"2025-01-30T04:20:59.264327Z","output_tokens":86},{"code_id":206098,"deleted":0,"input_tokens":null,"id":105783,"project_id":5677,"sender":"human","message":"mirror sprite when moving lef","created_at":"2025-01-30T04:21:09.661669Z","output_tokens":null},{"code_id":206098,"deleted":0,"input_tokens":4063,"id":105784,"project_id":5677,"sender":"ai","message":"To mirror the sprite when moving left, we can use the `push()` and `pop()` functions in p5.js. These functions allow us to save and restore the drawing state, which is useful for transformations like scaling or rotating. Here's how we can achieve this:\n\n1. We'll adjust the `drawCharacter` function to scale the sprite negatively on the x-axis when moving left. This will flip the sprite.\n\n2. We need to determine the direction the character is facing by checking which arrow key is pressed.\n\nLet's update the code:\n\n```javascript\n// Global variable to track character direction (right by default)\nlet isFacingRight = true;\n```\n\n```javascript\nfunction handleCharacterMovement() {\n if (keyIsDown(RIGHT_ARROW)) {\n characterX += 7; // Move right\n isFacingRight = true; // Set direction to right\n }\n\n if (keyIsDown(LEFT_ARROW)) {\n characterX -= 7; // Move left\n isFacingRight = false; // Set direction to left\n }\n}\n```\n\n```javascript\nfunction drawCharacter() {\n // Save the current drawing state\n push();\n\n // Translate to the character's position\n translate(characterX, characterY);\n\n // Scale negatively on x-axis if facing left\n if (!isFacingRight) {\n scale(-1, 1); // Flip horizontally\n }\n\n // Draw the character\n image(spriteFrames[currentFrame], -frameWidth * characterScaleFactor / 2, 0, frameWidth * characterScaleFactor, frameHeight * characterScaleFactor);\n\n // Restore the previous drawing state\n pop();\n}\n```\n\n### Explanation:\n- We added a global variable `isFacingRight` to track the direction the character is facing.\n- In `handleCharacterMovement`, we update `isFacingRight` based on whether the right or left arrow key is pressed.\n- In `drawCharacter`, we use `push()` and `pop()` to save and restore the drawing state. We translate to the character's position and scale the sprite negatively on the x-axis if the character is facing left, effectively mirroring the sprite.\n\nNow, when the character moves left, the sprite will flip horizontally. Replace your existing `handleCharacterMovement` and `drawCharacter` functions with these updates.","created_at":"2025-01-30T04:21:09.668221Z","output_tokens":533}],"assets":[{"project_id":5677,"created_at":"2025-01-30T03:56:05.522148Z","resource_type":"image","id":58704,"cloudinary_id":"lgvrnhkf9stxuyfrxbqc","name":"sprite","deleted":false}],"messages_sent":4,"comments":[],"steps":[]}