Emoji Adventure

{"name":"FrameSizeWrong","description":"Day 6 of the Introduction to Programming With Jippity course. \n\nTopic: Advanced Conditionals","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/a11hexheur1a5fvpdz5b","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-02-26T16:53:49.076245Z","updated_at":"2025-02-26T16:53:49.076248Z","user_id":246,"status":"PRIVATE","parent_id":5899,"id":5904,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"const punchUpdateInterval = 10;\n\nlet punchFrameCounter = 0;\n\nlet characterX;\n\nlet characterY;\n\nlet stamina = 120;\n\nlet staminaRegenRate = 0.2;\n\nlet spriteFrames = [];\n\nlet idleFrames = [];\n\nlet punchFrames = [];\n\nlet backwardFrames = [];\n\nlet frameWidth;\n\nlet frameHeight;\n\nlet totalFrames = 4;\n\nlet currentFrame = 0;\n\nlet frameCounter = 0;\n\nlet characterScaleFactor = 6;\n\nlet characterVelocityY = 0;\n\nlet currentState = 'idle';\n\nconst spriteUpdateInterval = 8;\n\nlet idleFrameCounter = 0;\n\nconst idleSpriteUpdateInterval = 60;\n\nlet currentIdleFrame = 0;\n\nlet currentPunchFrame = 0;\n\nlet totalBackwardFrames = 4;\n\nlet currentBackwardFrame = 0;\n\nlet backwardFrameCounter = 0;\n\nfunction preload() {\n sprite = loadImage(\"@asset('sprite')\"); // Load the sprite sheet\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 4 columns and 4 rows\n let totalColumns = 4; // Number of columns in the sprite sheet\n let totalRows = 4; // Number of rows in the sprite sheet\n console.log(`width ${sprite.width}/totalColumns`)\n frameWidth = sprite.width / totalColumns + 3; // Width of each frame\n frameHeight = sprite.height / totalRows; // Height of each 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 for walking from the sprite sheet (full for left movement)\n for (let i = 0; i < totalFrames; i++) {\n let frame = sprite.get(i * frameWidth, 0, frameWidth, frameHeight); // Full frames for left movement\n spriteFrames.push(frame); // Store the walking frames\n }\n\n // Extract only the rightmost column frames for right movement\n for (let i = 0; i < totalFrames; i++) {\n let frame = sprite.get((totalColumns - 1) * frameWidth, i * frameHeight, frameWidth, frameHeight); // Rightmost column\n backwardFrames.push(frame); // Store backward frames\n }\n\n // Extract frames for idle from the sprite sheet\n for (let i = 0; i < 2; i++) { // Assuming idle frames are in the second row\n let frame = sprite.get(i * frameWidth, frameHeight, frameWidth, frameHeight);\n idleFrames.push(frame); // Store the idle frames\n }\n\n // Extract frames for punching from the sprite sheet\n for (let i = 0; i < 4; i++) { // Assuming punch frames are in the third row\n let frame = sprite.get(i * frameWidth, frameHeight * 2, frameWidth, frameHeight);\n punchFrames.push(frame); // Store the punch frames\n }\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear the canvas with the sky blue background\n frameCounter++; // Increment the frame counter each frame\n\n drawFloor(); // Call the movement function\n drawCharacter(); // Call the movement function\n animateCharacter(); // Call the movement function\n handleCharacterMovement(); // Call the movement function\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\nfunction idle() {\n // Ensure currentIdleFrame is valid for idle\n if (currentIdleFrame < 0 || currentIdleFrame >= idleFrames.length) {\n console.error('Invalid currentIdleFrame for idle:', currentIdleFrame);\n currentIdleFrame = 0; // Reset to 0 if invalid\n }\n image(idleFrames[currentIdleFrame], characterX - (idleFrames[0].width * characterScaleFactor) / 2, characterY, idleFrames[0].width * characterScaleFactor, idleFrames[0].height * characterScaleFactor);\n}\n\nfunction punch() {\n // Ensure currentPunchFrame is valid\n if (currentPunchFrame < 0 || currentPunchFrame >= punchFrames.length) {\n console.error('Invalid currentPunchFrame for punching:', currentPunchFrame);\n currentPunchFrame = 0; // Reset to 0 if invalid\n }\n\n // Calculate Y position to ensure character is above the floor\n let floorY = height - 20; // Floor position\n let punchHeight = punchFrames[0].height * characterScaleFactor; // Height of the punch sprite\n\n // Draw the punching sprite at a balanced position above the floor\n image(punchFrames[currentPunchFrame], characterX - (punchFrames[0].width * characterScaleFactor) / 2, floorY - (punchHeight * 0.7) - 10, punchFrames[0].width * characterScaleFactor, punchHeight);\n}\n\nfunction walk() {\n // Ensure currentFrame is valid\n if (currentFrame < 0 || currentFrame >= spriteFrames.length) {\n console.error('Invalid currentFrame for walking:', currentFrame);\n currentFrame = 0; // Reset to 0 if invalid\n }\n\n // Draw the character normally, without flipping horizontally\n image(spriteFrames[currentFrame], characterX - (frameWidth * characterScaleFactor) / 2, characterY, frameWidth * characterScaleFactor, frameHeight * characterScaleFactor);\n}\n\nfunction drawCharacter() {\n switch (currentState) {\n case 'walking':\n walk();\n break;\n case 'walkingBackward': // New case for backward movement (right)\n drawBackward();\n break;\n case 'idle':\n idle();\n break;\n case 'punching':\n punch();\n break;\n }\n}\n\nfunction drawBackward() {\n // Ensure currentBackwardFrame is valid\n if (currentBackwardFrame < 0 || currentBackwardFrame >= backwardFrames.length) {\n console.error('Invalid currentBackwardFrame for walking backward:', currentBackwardFrame);\n currentBackwardFrame = 0; // Reset to 0 if invalid\n }\n image(backwardFrames[currentBackwardFrame], characterX - (frameWidth * characterScaleFactor) / 2, characterY, frameWidth * characterScaleFactor, frameHeight * characterScaleFactor);\n\n // Update the frame counter for backward animation\n backwardFrameCounter++;\n if (backwardFrameCounter >= spriteUpdateInterval) {\n currentBackwardFrame = (currentBackwardFrame + 1) % backwardFrames.length; // Loop through backward frames\n backwardFrameCounter = 0; // Reset the frame counter\n }\n}\n\nfunction handleCharacterMovement() {\n let floorY = height - 20 - (frameHeight * characterScaleFactor); // Calculate the floor position\n\n // Horizontal movement logic\n if (keyIsDown(68) || keyIsDown(RIGHT_ARROW)) { // 'D' key or Right Arrow key for moving right\n characterX += 5; // Move right\n currentState = 'walkingBackward'; // Set state to walking backward\n }\n\n if (keyIsDown(65) || keyIsDown(LEFT_ARROW)) { // 'A' key or Left Arrow key for moving left\n if (characterX > (frameWidth * characterScaleFactor) / 2) { // Check if not at the left wall\n characterX -= 5; // Move left\n currentState = 'walking'; // Set state to walking\n }\n }\n\n // Punching logic\n if (mouseIsPressed && characterY === floorY && currentState !== 'punching') {\n currentState = 'punching'; // Update state to punching\n }\n\n // Jumping logic\n if (keyIsDown(32) && characterY === floorY) { // 'Space' key\n characterVelocityY = -10; // Set an upward velocity\n currentState = 'jumping'; // Set state to jumping\n }\n\n // Apply gravity\n characterVelocityY += 0.5; // Gravity effect\n characterY += characterVelocityY; // Update position with velocity\n\n // Ensure the character doesn't fall through the floor\n if (characterY > height - 20 - (frameHeight * characterScaleFactor)) {\n characterY = height - 20 - (frameHeight * characterScaleFactor);\n characterVelocityY = 0; // Reset vertical velocity when on the ground\n }\n}\n\nfunction animateCharacter() {\n // Animate the punch state\n if (currentState === 'punching') {\n punchFrameCounter++; // Increment the punch frame counter\n if (punchFrameCounter >= punchUpdateInterval) { // Check against the punch interval\n currentPunchFrame = (currentPunchFrame + 1) % punchFrames.length; // Loop through punch frames\n punchFrameCounter = 0; // Reset punch frame counter\n\n // If the last frame has been displayed, switch back to idle or walking\n if (currentPunchFrame === 0) {\n currentState = 'idle'; // Return to idle after punch\n }\n }\n } else if (currentState === 'jumping') {\n // Use the rightmost column frame for jumping when moving right\n currentBackwardFrame = (currentBackwardFrame + 1) % backwardFrames.length; // Loop through rightmost column frames\n } else {\n // Update the current frame for animation only if the character is moving\n if ((keyIsDown(68) || keyIsDown(65)) && frameCounter >= spriteUpdateInterval) { // 'D' or 'A' key\n if (keyIsDown(68)) { // Moving right\n currentBackwardFrame = (currentBackwardFrame + 1) % backwardFrames.length; // Loop through rightmost column frames\n currentState = 'walkingBackward'; // Set state to walking backward\n } else { // Moving left\n currentFrame = (currentFrame + 1) % spriteFrames.length; // Loop through walking frames\n currentState = 'walking'; // Set state to walking\n }\n frameCounter = 0; // Reset the frame counter after updating\n } else if (!keyIsDown(68) && !keyIsDown(65)) { // Neither 'D' nor 'A' key\n currentState = 'idle'; // Update state to idle\n // Animate the idle state\n idleFrameCounter++; // Increment the idle frame counter\n if (idleFrameCounter >= idleSpriteUpdateInterval) { // Check against the idle interval\n currentIdleFrame = (currentIdleFrame + 1) % idleFrames.length; // Loop through idle frames\n idleFrameCounter = 0; // Reset idle frame counter\n }\n }\n }\n}\n\n","style.css":"body { \n margin: 0; \n} \ncanvas { \n display: block; \n}\n","index.html":"\n\n\n \n \n Emoji Adventure\n \n \n\n\n \n\n"},"chat_history":[],"assets":[{"creator":null,"project_id":5904,"cloudinary_id":"dxnlvxgwqk1ikspw97g7","deleted":false,"id":59912,"name":"spritePunch","created_at":"2025-02-26T16:53:36.950784Z","resource_type":"image","tags":null},{"creator":null,"project_id":5904,"cloudinary_id":"sbgcztvyzjacm2i7n0tw","deleted":false,"id":59911,"name":"spriteIdle","created_at":"2025-02-26T16:53:36.949110Z","resource_type":"image","tags":null},{"creator":null,"project_id":5904,"cloudinary_id":"a11hexheur1a5fvpdz5b","deleted":false,"id":59910,"name":"sprite","created_at":"2025-02-26T16:53:36.947293Z","resource_type":"image","tags":null},{"creator":null,"project_id":5904,"cloudinary_id":"dsn2uszud1wc2g8d9yjf","deleted":false,"id":59909,"name":"Michael","created_at":"2025-02-26T16:53:36.945196Z","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}