Emoji Adventure

{"name":"Intro to Programming With Jippity - Variables","description":"Day 2 of the Introduction to Programming With Jippity course. \n\nTopic: Variables","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/abege60jnjrgx9pivnyg","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-05-02T15:12:22.173285Z","updated_at":"2025-05-02T15:12:22.173286Z","user_id":346,"status":"PRIVATE","parent_id":5372,"id":7775,"user":{"photo":null,"email":null,"recess_id":"e9bb4a6b-9622-45af-ae3d-f3340eb2d0bf","created_at":"2025-02-17T04:12:32.787941Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"SuperShark","id":346,"password_hash":null,"updated_at":"2025-02-17T04:12:32.787947Z","reset_token_expiry":null,"subscription_status":null},"code":{"Cloud.js":"class Cloud {\r\n constructor() {\r\n this.x = random(windowWidth, windowWidth + 100); // Start just off the right edge\r\n this.y = random(50, 200); // Random vertical position\r\n this.size = random(50, 150) * cloudScaleFactor; // Base size for each cloud\r\n this.speed = random(0.5, 1.5) * cloudSpeedFactor; // Random speed for each cloud\r\n this.color = color(255, random(180, 255)); // Add slight color variation and transparency\r\n }\r\n\r\n update() {\r\n this.x -= this.speed; // Move cloud left by its speed\r\n\r\n // Check if the cloud has moved completely off the left edge\r\n if (this.x < -this.size) {\r\n this.x = random(windowWidth, windowWidth + 100); // Reset to the right side\r\n this.size = random(50, 100); // New size\r\n this.speed = random(1, 3); // New speed\r\n }\r\n }\r\n\r\n draw() {\r\n noStroke();\r\n fill(this.color); // Use the cloud's color for fill\r\n\r\n // Draw cloud as overlapping ellipses\r\n ellipse(this.x, this.y, this.size, this.size / 2);\r\n ellipse(this.x + this.size * 0.3, this.y + this.size * 0.1, this.size * 0.8, this.size * 0.4);\r\n ellipse(this.x - this.size * 0.3, this.y + this.size * 0.1, this.size * 0.8, this.size * 0.4);\r\n }\r\n}","script.js":"/*\r\n----------------------------------------------------------------------------------------------------------------------------\r\n\r\n\r\n _____ _ _ _____ _ \r\n |_ _| | | | | | __ \\ (_) \r\n | | _ __ | |_ _ __ ___ | |_ ___ | |__) _ __ ___ __ _ _ __ __ _ _ __ ___ _ __ ___ _ _ __ __ _ \r\n | | | '_ \\| __| '__/ _ \\ | __/ _ \\ | ___| '__/ _ \\ / _` | '__/ _` | '_ ` _ \\| '_ ` _ \\| | '_ \\ / _` |\r\n _| |_| | | | |_| | | (_) | | || (_) | | | | | | (_) | (_| | | | (_| | | | | | | | | | | | | | | | (_| |\r\n |_____|_| |_|\\__|_| \\___/ \\__\\___/ |_| |_| \\___/ \\__, |_| \\__,_|_| |_| |_|_| |_| |_|_|_| |_|\\__, |\r\n __/ | __/ |\r\n |___/ |___/ \r\n __ ___ _ _ _ _ _ _ _____ ___ \r\n \\ \\ / (_| | | | | (_) (_| | | __ \\ |__ \\ \r\n \\ \\ /\\ / / _| |_| |__ | |_ _ __ _ __ _| |_ _ _ ______ | | | | __ _ _ _ ) |\r\n \\ \\/ \\/ / | | __| '_ \\ _ | | | '_ \\| '_ \\| | __| | | | |______| | | | |/ _` | | | | / / \r\n \\ /\\ / | | |_| | | | | |__| | | |_) | |_) | | |_| |_| | | |__| | (_| | |_| | / /_ \r\n \\/ \\/ |_|\\__|_| |_| \\____/|_| .__/| .__/|_|\\__|\\__, | |_____/ \\__,_|\\__, | |____|\r\n | | | | __/ | __/ | \r\n |_| |_| |___/ |___/ \r\n\r\n\r\n\r\n----------------------------------------------------------------------------------------------------------------------------\r\n\r\n\r\n _______ _ __ __ _ _ _ \r\n |__ __| (_) _ \\ \\ / / (_) | | | | \r\n | | ___ _ __ _ ___ (_) \\ \\ / __ _ _ __ _ __ _| |__ | | ___ ___ \r\n | |/ _ \\| '_ \\| |/ __| \\ \\/ / _` | '__| |/ _` | '_ \\| |/ _ / __|\r\n | | (_) | |_) | | (__ _ \\ | (_| | | | | (_| | |_) | | __\\__ \\\r\n |_|\\___/| .__/|_|\\___| (_) \\/ \\__,_|_| |_|\\__,_|_.__/|_|\\___|___/\r\n | | \r\n |_| \r\n\r\n----------------------------------------------------------------------------------------------------------------------------\r\n*/\r\n\r\n\r\n/*\r\n\r\nA variable is simply a single piece of information, like a number or a word.\r\n\r\nVariables are used all the time in programming. When you want to create a variable in Jippity, you need to do 3 things:\r\n\r\n1. Start with the word \"let\". This tells the computer that you are creating a new variable.\r\n2. Then, give your variable a name. This tells the computer what to call your new variable.\r\n3. Finally, give your variable a value. This is the actual piece of information that you want to store.\r\n\r\nTake a look at these examples:\r\n\r\nlet height = 100\r\nlet word = \"program\"\r\n\r\nWhat are the names and values of those two variables?\r\nWhat small difference is there in the second variable?\r\n\r\nGo ahead and hit \"run\" in the top right now.\r\n\r\n*/\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/*\r\n\r\n----------------------------------------------------------Level 2----------------------------------------------------------\r\n\r\n\r\nThe variable called 'Level2WallHeight' controls the height of the wall in level 2.\r\n\r\nChange the value of the variable to make the wall shorter, then run the code again!\r\n\r\n*/\r\n\r\n\r\n//--------------------------------\r\n// edit this part!\r\n// |\r\n// ▼\r\nlet level2WallHeight = 3;\r\n//\r\n//\r\n//\r\n//--------------------------------\r\n\r\n\r\n\r\n\r\n\r\n\r\n/*\r\n\r\n----------------------------------------------------------Level 3----------------------------------------------------------\r\n\r\nTo get through the transparent wall, we need to change it's color to green!\r\nWe also have another regular wall that we need to lower, just like in the last level.\r\n\r\nIn programming, colors are often represented as a mix of Red, Green and Blue - RGB\r\nFor each of the three colors, we use a number between 0 and 255 to represent how much of that color to use.\r\nThe three numbers correspond to the three colors in order: Red first, then Green and finally Blue.\r\nDown below, we have a variable called characterColor. We need to edit this so our character is green.\r\n\r\nCan you figure out how to change the two variables below to get through the obstacles?\r\n\r\nIf you're stuck, ask Jippity how to represent the color green using a variable!\r\n\r\n*/\r\n\r\n//--------------------------------\r\nlet level3WallColor;\r\n//\r\n//\r\n// edit these parts!\r\n// | | |\r\n// ▼ ▼ ▼\r\nlevel3WallColor = [0, 255,0]; // Notice how there is no 'let' on this line.\r\n// That's because the variable was defined up on\r\n// line 108, and here we are changing only the *value*\r\n// and the variable with the *name* level3WallColor.\r\n//\r\n//\r\nlet level3WallHeight = 1 // How do we give this variable a value?\r\n// Hint: Look at line 84\r\n//\r\n//\r\n//\r\n//--------------------------------\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/*\r\n\r\n----------------------------------------------------------Level 4----------------------------------------------------------\r\n\r\nNow we are going to practice everything we've learned so far. \r\n\r\nTo pass level4WallHeightlevel 4, we need to create some new variables. These are the variables we need:\r\n1.\r\n2. level4WallColor\r\n\r\n\r\nEach variable needs to be created from scratch. Try it out in the space below.\r\n\r\nIf you are stuck, ask Jippity for help!\r\n\r\nHint: make sure you follow all the steps of creating a new variable. Instructions are on line 46.\r\n\r\n*/\r\n\r\n\r\n//--------------------------------\r\n// Add all your new variables here\r\n// | | | | | | | | | | | | | | | | \r\n// ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ \r\nlet level4WallHeight = 0;\r\nlet level4WallColor =[0,255,0];\r\n\r\n\r\n\r\n//--------------------------------\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/*\r\n\r\n----------------------------------------------------------Level 5----------------------------------------------------------\r\n\r\nCongratulations! Now that you're on the final level, play around with the variables you see below.\r\n\r\nSee how each variable affects what you see in the game.\r\n\r\n*/\r\n\r\nlet characterScaleFactor = 1;\r\n\r\nlet jumpStrength = 100;\r\n\r\nlet movementSpeed = 100;\r\n\r\nlet cloudScaleFactor = 50;\r\n\r\nlet cloudSpeedFactor = 100;\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/*\r\n----------------------------------------------------------------------------------------------------------------------------\r\n-----------------------------------The code below is the under-the-hood stuff-----------------------------------------------\r\n-----------------------------------------------Proceed with caution!--------------------------------------------------------\r\n----------------------------------------------------------------------------------------------------------------------------\r\n*/\r\n\r\n\r\n//--------------------------------------------------------------------------------------------------------------------------\r\n// A bunch more variables!\r\n//--------------------------------------------------------------------------------------------------------------------------\r\n\r\nlet wallHeight = 500;\r\nlet redWallHeight = 600;\r\nlet characterX; // X position of the character\r\nlet characterY; // Y position of the character\r\nlet showCollisionMessage = false; // To track if the collision message should be shown\r\nlet isJumping = false; // To track if the character is jumping\r\nlet gravity = 0.5; // Gravity effect\r\nlet velocityY = 0; // Vertical velocity\r\nlet showSecondMessage = false; // message flag\r\nlet currentLevel = 1; // To track the current level\r\nlet showLevel2Message = false; // To track if Level 2 message should be shown\r\nlet level2MessageDisplayed = false; // To track if the Level 2 message has already been displayed\r\nlet showLevel2SecondMessage = false;\r\nlet charChoice; //var to change character\r\nlet sprite1; // character 1 choice\r\nlet sprite2; // character 2 choice\r\nlet hitboxSizeY; // Height of the hitbox based on scaled height\r\nlet hitboxSize; // Hitbox size based on character size and scale factor\r\nlet spriteFrames = []; // Array to hold individual frames\r\nlet frameWidth; // Width of each frame\r\nlet frameHeight; // Height of each frame\r\nlet totalFrames = 4; // Total number of frames (3 rows, only using the rightmost column)\r\nlet currentFrame = 0; // To keep track of the current frame to display\r\nlet frameCounter = 0; // Counter for frame updates\r\nconst spriteUpdateInterval = 8; // Number of frames to wait before updating sprite\r\nlet timeSinceLastSpawn = 0; // Variable to track time since last cloud spawn\r\nlet spawnInterval; // Variable to hold the current spawn interval\r\nlet showHitbox = false; // Toggle to show or hide the hitbox\r\nlet clouds = []; // Array to hold cloud objects\r\n\r\n//--------------------------------------------------------------------------------------------------------------------------\r\n// This is a class - we will get to this concept later in the course\r\n//--------------------------------------------------------------------------------------------------------------------------\r\n\r\n\r\n\r\n\r\n//--------------------------------------------------------------------------------------------------------------------------\r\n// These are functions - another concept coming up soon!\r\n//--------------------------------------------------------------------------------------------------------------------------\r\n\r\nfunction preload() {\r\n // Load the sprite sheet\r\n sprite1 = loadImage(\"@asset('GreenSprite')\");\r\n sprite2 = loadImage(\"@asset('PurpleSprite')\");\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(windowWidth, windowHeight - 40); // Create canvas\r\n noSmooth(); // Disable image smoothing\r\n charChoice = sprite1;\r\n\r\n // Assuming the sprite sheet is divided into 3 columns and 4 rows\r\n frameWidth = charChoice.width / 3; // Width of each sprite frame\r\n frameHeight = charChoice.height / 4; // Height of each sprite frame\r\n\r\n // Extract frames from the sprite sheet\r\n for (let i = 0; i < totalFrames; i++) {\r\n let frame = charChoice.get((3 - 1) * frameWidth, i * frameHeight, frameWidth, frameHeight);\r\n spriteFrames.push(frame); // Store the frames\r\n }\r\n\r\n // Initialize hitbox size based on frame dimensions\r\n hitboxSizeX = frameWidth * characterScaleFactor; // Width of the hitbox\r\n hitboxSizeY = frameHeight * characterScaleFactor; // Height of the hitbox\r\n\r\n // Set the character's initial Y position to align with the floor\r\n characterX = 50; // Spawn the character on the left\r\n characterY = height - hitboxSizeY - 20; // Align with the top of the floor\r\n\r\n // Add event listener to the input field\r\n document.getElementById('heightInput').addEventListener('input', updateHeight);\r\n\r\n // Set the initial spawn interval\r\n spawnInterval = random(120, 240); // Set a random initial spawn interval\r\n\r\n // Add initial clouds\r\n for (let i = 0; i < 3; i++) {\r\n clouds.push(new Cloud());\r\n }\r\n\r\n wallRGB = color(level3WallColor[0], level3WallColor[1], level3WallColor[2]);\r\n\r\n // Level progression check\r\n if (level2WallHeight < 10) {\r\n currentLevel = 2; // Skip to level 2\r\n wallHeight = level2WallHeight * 50; // Set wall height for level 2\r\n }\r\n\r\n // Check if L3Wall is 'red' and update accordingly\r\n if (wallRGB.levels[0] === 0 && wallRGB.levels[1] === 255 && wallRGB.levels[2] === 0) {\r\n currentLevel = 3; // Move directly to level 3\r\n if (level3WallHeight) {\r\n wallHeight = level3WallHeight * 50;\r\n }\r\n else {\r\n wallHeight = 500; // Set wall height for level 3\r\n }\r\n }\r\n\r\n if ((!(wallRGB.levels[0] === 0 && wallRGB.levels[1] === 255 && wallRGB.levels[2] === 0)) && level3WallHeight) {\r\n l4WallColor = color(level4WallColor[0], level4WallColor[1], level4WallColor[2]);\r\n currentLevel = 4;\r\n }\r\n console.log(`Current Level: ${currentLevel}`)\r\n}\r\n\r\nfunction draw() {\r\n background(173, 216, 230);\r\n\r\n // Update and draw each cloud\r\n for (let i = clouds.length - 1; i >= 0; i--) {\r\n let cloud = clouds[i];\r\n cloud.update();\r\n cloud.draw();\r\n\r\n // Remove cloud if it has moved completely off the left edge\r\n if (cloud.x < -cloud.size) {\r\n clouds.splice(i, 1);\r\n }\r\n }\r\n\r\n // Increment the time since last spawn\r\n timeSinceLastSpawn++;\r\n\r\n // Check if it's time to spawn a new cloud\r\n if (timeSinceLastSpawn >= spawnInterval) {\r\n clouds.push(new Cloud()); // Add a new cloud\r\n spawnInterval = random(120, 240); // Set a new random spawn interval\r\n timeSinceLastSpawn = 0; // Reset the timer\r\n }\r\n\r\n // Increment the frame counter\r\n frameCounter++;\r\n\r\n // Update the current frame for animation only if the character is moving\r\n if ((keyIsDown(RIGHT_ARROW) || keyIsDown(LEFT_ARROW)) && frameCounter >= spriteUpdateInterval) {\r\n currentFrame = (currentFrame + 1) % spriteFrames.length; // Loop through frames\r\n frameCounter = 0; // Reset the frame counter after updating\r\n } else if (!keyIsDown(RIGHT_ARROW) && !keyIsDown(LEFT_ARROW)) {\r\n currentFrame = 0; // Reset to the first frame if not moving\r\n }\r\n drawFloor();\r\n drawObstacle();\r\n drawCharacter();\r\n\r\n // Draw hitbox for debugging\r\n if (showHitbox) {\r\n fill(0, 255, 0, 100); // Semi-transparent green color for the hitbox\r\n // Draw the hitbox starting from the character's Y position\r\n rect(characterX - hitboxSizeX / 2, characterY, hitboxSizeX, hitboxSizeY); // Draw hitbox correctly\r\n }\r\n\r\n // Display Level 1 messages\r\n if (currentLevel === 1) {\r\n fill(0);\r\n textSize(24);\r\n text(\"Move with arrow keys!\", windowWidth * 0.01, windowHeight * 0.05);\r\n text(\"Jump with spacebar!\", windowWidth * 0.01, windowHeight * 0.1);\r\n }\r\n\r\n // Show Level 2 messages\r\n if (currentLevel === 2 && showLevel2Message && level2WallHeight === 10) {\r\n fill(255, 0, 0);\r\n textSize(24);\r\n text(\"Another wall is in the way 😠\", windowWidth * 0.5, windowHeight * 0.05);\r\n text(\"But there's no input box this time 🤔\", windowWidth * 0.5, windowHeight * 0.1);\r\n text(\"We need to fix the code!\", windowWidth * 0.5, windowHeight * 0.15);\r\n\r\n // Show the second Level 2 message after 2 seconds\r\n if (showLevel2SecondMessage) {\r\n text(\"Close the game, and find the variable\", windowWidth * 0.4, windowHeight * 0.5);\r\n text(\"called 'Level2WallHeight' in the code!\", windowWidth * 0.4, windowHeight * 0.55);\r\n }\r\n }\r\n\r\n if (currentLevel === 2 && level2WallHeight < 5) {\r\n fill(0, 155, 100);\r\n textSize(36);\r\n text(\"You did it! Let's keep going.\", windowWidth * 0.1, windowHeight * 0.5);\r\n }\r\n\r\n if (currentLevel === 3) {\r\n if (!(wallRGB.levels[0] === 0 && wallRGB.levels[1] === 255 && wallRGB.levels[2] === 0)) {\r\n fill(255, 0, 0);\r\n textSize(24);\r\n text(\"This wall is transparent.\", windowWidth * 0.03, windowHeight * 0.5);\r\n text(\"If it's green, it'll let us through.\", windowWidth * 0.03, windowHeight * 0.55);\r\n text(\"Find the variable called\", windowWidth * 0.03, windowHeight * 0.60);\r\n text(\"'level3WallColor' in the code!\", windowWidth * 0.03, windowHeight * 0.65);\r\n\r\n }\r\n else {\r\n fill(0, 155, 100);\r\n textSize(36);\r\n text(\"Right on!\", windowWidth * 0.03, windowHeight * 0.5);\r\n }\r\n }\r\n\r\n // Show collision message if applicable\r\n if (showCollisionMessage) {\r\n fill(255, 0, 0);\r\n textSize(24);\r\n text(\"This wall is in the way 😢\", windowWidth * 0.5, windowHeight * 0.5);\r\n }\r\n\r\n // Show second message with input box\r\n if (showSecondMessage) {\r\n document.getElementById('heightInput').style.display = 'block';\r\n document.getElementById('message').style.display = 'block'; // Show the message\r\n }\r\n\r\n // Jump logic\r\n if (isJumping) {\r\n characterY += velocityY; // Update character position based on velocity\r\n velocityY += gravity; // Apply gravity\r\n\r\n // Prevent character from sinking below the floor\r\n if (characterY >= height - hitboxSizeY - 20) { // Adjust for the floor height\r\n characterY = height - hitboxSizeY - 20; // Align character on the floor\r\n isJumping = false; // Reset jumping state\r\n velocityY = 0; // Reset vertical velocity\r\n }\r\n }\r\n\r\n // Character movement\r\n if (keyIsDown(RIGHT_ARROW)) {\r\n characterX += movementSpeed;\r\n checkCollision();\r\n }\r\n if (keyIsDown(LEFT_ARROW) && characterX > hitboxSizeX / 2) { // Use hitboxSizeX for collision\r\n characterX -= movementSpeed;\r\n checkCollision();\r\n }\r\n\r\n // Prevent character from sinking below the floor\r\n if (characterY >= height - hitboxSizeY) {\r\n characterY = height - hitboxSizeY; // Align character on the floor\r\n isJumping = false; // Reset jumping state\r\n velocityY = 0; // Reset vertical velocity\r\n }\r\n\r\n // Progress to next level\r\n if (characterX > windowWidth - 50) {\r\n progressToNextLevel();\r\n }\r\n}\r\n\r\nfunction keyPressed() {\r\n if (key === ' ' && !isJumping) { // Spacebar to jump\r\n isJumping = true; // Start jumping\r\n velocityY = -jumpStrength; // Set initial jump velocity\r\n }\r\n}\r\n\r\nfunction updateHeight() {\r\n let heightInput = document.getElementById('heightInput');\r\n let newHeight = parseInt(heightInput.value);\r\n\r\n if (!isNaN(newHeight)) {\r\n wallHeight = newHeight * 75;\r\n }\r\n}\r\n\r\nfunction drawCharacter() {\r\n // Draw the character using the calculated characterY\r\n image(spriteFrames[currentFrame], characterX - (frameWidth * characterScaleFactor) / 2, characterY, frameWidth * characterScaleFactor, frameHeight * characterScaleFactor);\r\n}\r\n\r\nfunction drawFloor() {\r\n fill(169, 169, 169); // Set the floor color to dark grey\r\n rect(0, height - 20, windowWidth, 20); // Draw the floor across the bottom\r\n}\r\n\r\nfunction drawObstacle() {\r\n fill(255, 0, 0); // Set the color for the first wall to red\r\n let obstacleX = windowWidth - 300; // Position the first wall towards the right side\r\n rect(obstacleX, height - wallHeight, 50, wallHeight); // Draw the first obstacle\r\n\r\n // Always draw the second wall for level 3\r\n if (currentLevel === 3) {\r\n fill(wallRGB.levels[0], wallRGB.levels[1], wallRGB.levels[2], 50); // Set the color based on wallRGB\r\n let secondObstacleX = windowWidth - 800; // Position the second wall closer to the right side\r\n rect(secondObstacleX, height - redWallHeight, 50, redWallHeight); // Draw the second obstacle\r\n }\r\n\r\n if (currentLevel === 4) {\r\n fill(l4WallColor.levels[0], l4WallColor.levels[1], l4WallColor.levels[2], 50); // Set the color for the second wall to green and semi-transparent\r\n let secondObstacleX = windowWidth - 800; // Position the second wall closer to the right side\r\n rect(secondObstacleX, height - wallHeight, 50, wallHeight); // Draw the second obstacle\r\n }\r\n}\r\n\r\nfunction checkCollision() {\r\n let obstacleX = windowWidth - 300; // Position of the first wall\r\n let obstacleTopY = height - wallHeight; // Top Y position of the first wall\r\n\r\n // Check collision with the red wall using hitbox size\r\n if (characterX + hitboxSizeX / 2 > obstacleX && // Right edge of the hitbox\r\n characterX - hitboxSizeX / 2 < obstacleX + 50 && // Left edge of the hitbox\r\n characterY + hitboxSizeY >= obstacleTopY) { // Bottom edge of the hitbox must be above the wall height\r\n\r\n if (characterX < obstacleX + 25) {\r\n characterX = obstacleX - hitboxSizeX / 2; // Push character back\r\n } else {\r\n characterX = obstacleX + 50 + hitboxSizeX / 2; // Push character forward\r\n }\r\n\r\n // Level 1 collision handling\r\n if (currentLevel === 1) {\r\n showCollisionMessage = true;\r\n if (!showSecondMessage) {\r\n setTimeout(() => {\r\n showSecondMessage = true;\r\n document.getElementById('heightInput').style.display = 'block';\r\n }, 2000);\r\n }\r\n }\r\n\r\n // Level 2 collision handling\r\n if (currentLevel === 2 && !level2MessageDisplayed) {\r\n showLevel2Message = true;\r\n level2MessageDisplayed = true;\r\n setTimeout(() => {\r\n showLevel2SecondMessage = true;\r\n }, 4000);\r\n }\r\n }\r\n\r\n // Check collision with the green wall in level 3\r\n if (currentLevel === 3) {\r\n let secondObstacleX = windowWidth - 800; // Updated position of the second wall\r\n let secondObstacleTopY = height - redWallHeight; // Top Y position of the second wall\r\n\r\n if (characterX + hitboxSizeX / 2 > secondObstacleX && // Right edge of the hitbox\r\n characterX - hitboxSizeX / 2 < secondObstacleX + 50 && // Left edge of the hitbox\r\n characterY + hitboxSizeY >= secondObstacleTopY) { // Bottom edge of the hitbox must be above the wall height\r\n\r\n // Only pass through if the wall is green\r\n if (!(wallRGB.levels[0] === 0 && wallRGB.levels[1] === 255 && wallRGB.levels[2] === 0)) {\r\n if (characterX < secondObstacleX + 25) {\r\n characterX = secondObstacleX - hitboxSizeX / 2; // Push character back\r\n } else {\r\n characterX = secondObstacleX + 50 + hitboxSizeX / 2; // Push character forward\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentLevel === 4) {\r\n let secondObstacleX = windowWidth - 800; // Updated position of the second wall\r\n let secondObstacleTopY = height - redWallHeight; // Top Y position of the second wall\r\n\r\n if (characterX + hitboxSizeX / 2 > secondObstacleX && // Right edge of the hitbox\r\n characterX - hitboxSizeX / 2 < secondObstacleX + 50 && // Left edge of the hitbox\r\n characterY + hitboxSizeY >= secondObstacleTopY) { // Bottom edge of the hitbox must be above the wall height\r\n\r\n // Only pass through if the wall is not red\r\n if (!(l4WallColor.levels[0] === 0 || l4WallColor.levels[1] === 255 || l4WallColor.levels[2] === 0)) {\r\n if (characterX < secondObstacleX + 25) {\r\n characterX = secondObstacleX - hitboxSizeX / 2; // Push character back\r\n } else {\r\n characterX = secondObstacleX + 50 + hitboxSizeX / 2; // Push character forward\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\nfunction progressToNextLevel() {\r\n // Increment currentLevel for all other cases\r\n currentLevel++;\r\n\r\n if (currentLevel > 5) {\r\n currentLevel = 1; // Reset to level 1 after the last level\r\n }\r\n\r\n // Log the current level to the console\r\n console.log(`Current Level: ${currentLevel}`);\r\n\r\n // Reset character position\r\n characterX = 50;\r\n characterY = height - hitboxSizeY - 20;\r\n // Reset other variables\r\n showCollisionMessage = false;\r\n showSecondMessage = false;\r\n document.getElementById('heightInput').style.display = 'none'; // Hide input box\r\n\r\n // Level-specific setup\r\n switch (currentLevel) {\r\n case 1:\r\n wallHeight = 500; // Set wall height for level 1\r\n break;\r\n case 2:\r\n document.getElementById('message').style.display = 'none';\r\n wallHeight = level2WallHeight * 50; // Set wall height for level 2\r\n break;\r\n case 3:\r\n if (level3WallHeight) {\r\n wallHeight = level3WallHeight * 50; // Set wall height for level 3\r\n }\r\n else {\r\n wallHeight = 500; // Set wall height for level 3\r\n }\r\n break;\r\n case 4:\r\n if (level4WallHeight) {\r\n wallHeight = level4WallHeight * 50; // Set wall height for level 4\r\n }\r\n if (level4WallColor) {\r\n l4WallColor = color(level4WallColor[0], level4WallColor[1], level4WallColor[2]);\r\n }\r\n break;\r\n case 5:\r\n wallHeight = 0;\r\n break;\r\n default:\r\n wallHeight = 500;\r\n break;\r\n }\r\n}\r\n","style.css":"body {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}\n\n#heightInput {\n width: 100px;\n position: absolute;\n left: 50%;\n top: 60px;\n /* Position of the input box */\n transform: translateX(-50%);\n padding: 5px;\n font-size: 16px;\n display: none;\n /* Hide the input initially */\n -moz-appearance: textfield;\n}\n\n#heightInput::-webkit-inner-spin-button,\n#heightInput::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n#message {\n position: absolute;\n left: 50%;\n top: 30px;\n /* Adjust this value to position above the input box */\n transform: translateX(-50%);\n font-size: 24px;\n font-family: Arial, sans-serif; /* Set the font family */\n color: black;\n /* Change the color if needed */\n text-align: center;\n display: none;\n /* Hide the message initially */\n}","index.html":"\n\n\n\n \n \n Emoji Adventure\n \n \n\n\n\n

Try typing a number here!

\n \n \n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":7775,"created_at":"2025-05-02T15:12:32.166519Z","output_tokens":null,"sender":"client_script","code_id":239657,"deleted":0,"input_tokens":null,"id":140028},{"message":"Great! Tell me a bit more about your project idea. What kind of project are you building, and what would you like to accomplish with it?","project_id":7775,"created_at":"2025-05-02T15:12:32.498607Z","output_tokens":34,"sender":"ai","code_id":239657,"deleted":0,"input_tokens":9178,"id":140029},{"message":"","project_id":7775,"created_at":"2025-05-02T15:28:12.035412Z","output_tokens":null,"sender":"client_script","code_id":239703,"deleted":0,"input_tokens":null,"id":140030},{"message":"","project_id":7775,"created_at":"2025-05-02T16:03:05.581093Z","output_tokens":null,"sender":"client_script","code_id":239797,"deleted":0,"input_tokens":null,"id":140040}],"assets":[{"project_id":7775,"creator":null,"cloudinary_id":"abege60jnjrgx9pivnyg","deleted":false,"id":73256,"created_at":"2025-05-02T15:12:22.201495Z","name":"GreenSprite","resource_type":"image","tags":null},{"project_id":7775,"creator":null,"cloudinary_id":"bgxhnexncsixuoisq0ha","deleted":false,"id":73255,"created_at":"2025-05-02T15:12:22.187791Z","name":"PurpleSprite","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}