Ice Slide Adventure

{"name":"dave","description":"ice","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/ucf4ks1inabmwr12tlqu","view_count":9,"fork_count":0,"expires_at":null,"created_at":"2025-01-04T22:09:51.999003Z","updated_at":"2025-01-04T22:09:51.999006Z","user_id":2,"status":"PRIVATE","parent_id":5263,"id":5371,"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 player;\n\nlet crabs = [];\n\nlet canvaswith = 768;\n\nlet canvas_hit = 365;\n\nlet floorImage;\n\nlet wheelImage;\nlet headImage;\n\nconst damageColor = '#d95763'; // Color for damaging elements\nconst iceColor = '#5fcde4'; // Color for ice\n\nlet hary_hrald_hrmn_hark;\n\nlet octiHappy;\n\nlet octiAttackImage; // Define a variable for the octopus attack image\n\nlet inkbug; // the octis ink bullets\n\nlet heartbotimg; // heartbot img\n\nfunction preload() {\n floorImage = loadImage(\"@asset('ice_grass_damage')\"); // Load the floor image\n wheelImage = loadImage(\"@asset('wheel')\"); // Load the wheel image\n headImage = loadImage(\"@asset('head')\"); // Load the head image\n headLeftImage = loadImage(\"@asset('headleft')\"); // Load the left-facing head image\n damager = loadImage(\"@asset('damager')\");\n hary_hrald_hrmn_hark = loadImage(\"@asset('hary_hrald_hrmn_hark')\"); // Load the crab image\n octiHappy = loadImage(\"@asset('octo_hapy')\"); // Load the octopus image\n octiAttackImage = loadImage(\"@asset('octo_attacky')\"); // Load the octopus attack image\n inkbug = loadImage(\"@asset('octo_ink_bullet_bug')\"); // octis ink bullets\n heartbotimg = loadImage(\"@asset('heartbot')\"); // load the heartbot img\n coolfloor = loadImage(\"@asset('cool_level')\");\n}\n\nclass HeartBot {\n constructor(x, y) {\n this.position = createVector(x, y); // Initial position of the heart bot\n this.size = 30; // Size of the heart bot\n this.isAlive = true; // Track if the heart bot is still alive\n }\n\n update() {\n // Apply gravity to the heart bot to make it fall\n this.position.y += 2; // Falling speed\n\n // Check for collision with the ground\n let halfSize = this.size / 2; // Calculate half the size of the heart bot\n let groundY = this.position.y + halfSize; // Position at the bottom of the heart bot\n\n // Check for collision with ground colors\n for (let i = -halfSize; i <= halfSize; i++) {\n let floorColor = get(this.position.x + i - (player.position.x - width / 2), groundY);\n\n // Check for grass color\n if (floorColor[0] === 51 && floorColor[1] === 146 && floorColor[2] === 107) {\n this.position.y = groundY - halfSize; // Adjust position to be on top of the ground\n this.isAlive = false; // Mark as not alive since it landed\n return; // Exit after finding a collision\n }\n\n // Check for ice color\n if (floorColor[0] === 95 && floorColor[1] === 205 && floorColor[2] === 228) {\n this.position.y = groundY - halfSize; // Adjust position to be on top of the ground\n this.isAlive = false; // Mark as not alive since it landed\n return; // Exit after finding a collision\n }\n }\n\n // Check if the heart bot has fallen below the canvas\n if (this.position.y > height) {\n this.isAlive = false; // Mark as dead if it goes off-screen\n }\n }\n\n display() {\n if (this.isAlive) {\n image(heartbotimg, this.position.x, this.position.y, this.size, this.size); // Draw heart bot image\n }\n }\n\n checkCollision(player) {\n // Define the heart bot hitbox as a square\n let heartBotHitbox = {\n x: this.position.x - this.size / 2, // Center the hitbox\n y: this.position.y - this.size / 2, // Center the hitbox\n size: this.size // Width and height of the square hitbox\n };\n\n // Calculate the distance between the player and the heart bot\n let d = dist(player.position.x, player.position.y, this.position.x, this.position.y);\n // Check if the distance is less than the sum of their sizes\n if (d < (player.size / 2 + heartBotHitbox.size / 2) && this.isAlive) {\n player.health += 1; // Heal the player\n this.isAlive = false; // Mark the heart bot as collected\n console.log(`Player picked up the heart bot!`);\n }\n }\n}\n\nclass Octopus {\n constructor(x, y) {\n this.position = createVector(x, y); // Position of the octopus\n this.isAlive = true; // Track if the octopus is alive\n this.attackCooldown = 0; // Cooldown timer for attacks\n this.attackInterval = 180; // Time until the octopus attacks again (in frames)\n this.isAttacking = false; // Track if the octopus is in attack mode\n this.attackWarningDuration = 40; // Duration of the attack warning state\n this.isWarning = false; // Track if the octopus is showing the attack warning\n }\n\n update() {\n if (!this.isAlive) return; // Stop updating if the octopus is dead\n\n // Check if it's time to attack\n if (!this.isAttacking && !this.isWarning) {\n this.attackCooldown += 1;\n if (this.attackCooldown >= this.attackInterval) {\n this.attackCooldown = 0; // Reset cooldown\n this.isWarning = true; // Start the attack warning\n setTimeout(() => {\n this.isWarning = false; // Reset warning state after duration\n this.isAttacking = true; // Start the attack\n this.shootInk(); // Shoot an ink bullet\n this.moveAwayFromPlayer(); // Move away from player after shooting\n setTimeout(() => {\n this.isAttacking = false; // Reset attack state after duration\n }, this.attackWarningDuration * 16.67); // Duration of the attack\n }, this.attackWarningDuration * 16.67); // Show warning for a brief moment\n }\n }\n }\n\n shootInk() {\n if (!this.isAlive) return; // Do not shoot if the octopus is dead\n\n // Calculate the direction to the player\n let direction = createVector(player.position.x - this.position.x, player.position.y - this.position.y);\n direction.normalize(); // Normalize the direction vector to get a unit vector\n\n // Create a new ink bullet in the direction of the player\n inkBullets.push(new InkBullet(this.position.x, this.position.y, direction)); // Pass the direction vector\n\n // Move the octopus in the opposite direction of the ink bullet\n this.moveAwayFromPlayer(direction); // Pass the direction to move away\n }\n\n moveAwayFromPlayer() {\n let direction = this.position.x < player.position.x ? 1 : -1; // Determine direction to move (away from player)\n this.position.x -= direction * 2; // Move away from player\n }\n\n display() {\n if (this.isAlive) {\n // Calculate the angle to the player\n let angle = atan2(player.position.y + 25 - this.position.y, player.position.x - this.position.x);\n\n push(); // Save the current drawing state\n translate(this.position.x, this.position.y); // Move the origin to the octopus's position\n rotate(angle - 90); // Rotate to face the player\n\n // Draw the octopus image centered at (0, 0) after rotation\n if (this.isWarning) {\n image(octiAttackImage, -25, -25, 50, 50); // Use attack warning image\n } else {\n image(octiHappy, -25, -25, 50, 50); // Use normal image\n }\n\n pop(); // Restore the previous drawing state\n }\n }\n\n checkCollision(player) {\n if (this.isAlive) {\n // Calculate the distance between the crab and the player\n let d = dist(this.position.x, this.position.y, player.position.x, player.position.y);\n // Check if the distance is less than the sum of their sizes (hitbox sizes)\n if (d < (player.size / 2 + 20)) { // Assuming the crab has a small size (20)\n // Check if the player is midair or moving fast\n if (player.isJumping || abs(player.velocity.x) > 15 || abs(player.velocity.y) > 10) { // Adjust the speed threshold as necessary\n this.isAlive = false; // The crab dies\n heartBots.push(new HeartBot(this.position.x, this.position.y)); // Drop a heart bot at the crab's position\n console.log(`Crab dropped a heart bot!`);\n } else {\n player.takeDamage(); // Player takes damage\n console.log(`Player touched the crab!`);\n }\n }\n }\n }\n}\n\nclass InkBullet {\n constructor(x, y, direction) {\n this.position = createVector(x, y); // Initial position of the ink bullet\n this.direction = direction; // Store the direction vector\n this.speed = 5; // Speed of the bullet\n this.isAlive = true; // Track if the bullet is alive\n }\n\n update() {\n this.position.add(p5.Vector.mult(this.direction, this.speed)); // Move the bullet in the specified direction\n if (this.position.x < 0 || this.position.x > width || this.position.y < 0 || this.position.y > height) { // Check if out of bounds\n this.isAlive = false; // Mark the bullet as dead if it goes off-screen\n }\n }\n\n display() {\n if (this.isAlive) {\n fill(255, 0, 0); // Color for the ink bullet\n image(inkbug, this.position.x, this.position.y, 30, 30); // Use normal image\n }\n }\n\n checkCollision(player) {\n // Define the ink bullet hitbox as a square\n let bulletHitbox = {\n x: this.position.x - 15, // Adjust based on size\n y: this.position.y - 15, // Adjust based on size\n size: 30 // Width and height of the square hitbox\n };\n\n // Calculate the distance from the player's center to the ink bullet's hitbox\n let d = dist(player.position.x, player.position.y, this.position.x, this.position.y);\n console.log(`Distance to ink bullet: ${d}`);\n\n // Check collision if the distance is less than the radius of the player + half the bullet size\n if (d < (player.size / 2 + bulletHitbox.size / 2)) {\n player.takeDamage(); // Apply damage to the player\n this.isAlive = false; // Mark the bullet as dead after collision\n console.log(`Player hit by ink bullet!`);\n }\n }\n}\n\nclass Crab {\n constructor(x, y) {\n this.position = createVector(x, y); // Position of the crab\n this.isAlive = true; // Track if the crab is alive\n this.respawnTime = 10; // Respawn time in seconds\n this.respawnTimer = 0; // Timer for respawning\n this.velocity = createVector(0, 0); // Initialize velocity for falling\n this.startX = x; // Store starting X position\n this.boundaries = 100; // How far the crab can move from its starting position\n this.slipFactor = 0.5; // Factor for slippery movement on ice\n this.targetX = x; // Target position for the crab\n this.isPaused = false; // To track if the crab is paused\n this.pauseTimer = 0; // Timer for pause duration\n this.pauseDuration = random(30, 120); // Random pause duration between frames\n this.direction = random([-1, 1]); // Random direction to start\n this.speed = 2; // Speed of the crab movement\n }\n\n update() {\n if (!this.isAlive) {\n this.respawnTimer++; // Increment the respawn timer\n if (this.respawnTimer >= this.respawnTime * 60) { // Convert seconds to frames (assuming 60fps)\n this.isAlive = true; // Respawn the crab\n this.respawnTimer = 0; // Reset the timer\n this.position.y = random(0, height); // Respawn at random height\n }\n } else {\n this.velocity.y += 0.5; // Apply gravity to the crab\n this.position.add(this.velocity); // Update the crab's position based on its velocity\n\n // Calculate the ground level based on the player's position\n let groundLevel = height - floorImage.height + 55; // Assuming the ground is at the bottom of the canvas\n\n // Check if the crab is below the ground level\n if (this.position.y > groundLevel) {\n this.position.y = groundLevel; // Set crab's position to ground level\n this.velocity.y = 0; // Reset vertical velocity\n }\n\n this.checkCollision(player);\n\n // If the crab is not paused, move towards the target position\n if (!this.isPaused) {\n if (abs(this.position.x - this.targetX) < 2) {\n // If close to the target, randomly choose a new target within boundaries\n this.targetX = random(this.startX - this.boundaries, this.startX + this.boundaries);\n this.pauseDuration = random(30, 120); // Set a new random pause duration\n this.isPaused = true; // Start pause\n } else {\n // Move towards the target position\n let direction = this.targetX > this.position.x ? 1 : -1;\n this.position.x += direction * this.speed; // Move crab towards the target\n }\n } else {\n // If paused, count down the pause timer\n this.pauseTimer++;\n if (this.pauseTimer >= this.pauseDuration) {\n this.isPaused = false; // Resume movement after pause\n this.pauseTimer = 0; // Reset pause timer\n }\n }\n\n // Add slippery effect if on ice\n if (this.isOnIce()) {\n this.position.x += random(-this.slipFactor, this.slipFactor); // Add randomness for slippery movement\n }\n }\n }\n\n isOnIce() {\n let halfWidth = 10; // Assuming the crab has a small width\n let groundY = this.position.y + halfWidth; // Position at the bottom of the crab\n\n // Check for ice color collision\n for (let i = -halfWidth; i <= halfWidth; i++) {\n let floorColor = get(this.position.x + i - (player.position.x - width / 2), groundY);\n if (floorColor[0] === 95 && floorColor[1] === 205 && floorColor[2] === 228) {\n return true; // The crab is on ice\n }\n }\n return false; // The crab is not on ice\n }\n\n display() {\n if (this.isAlive) {\n image(hary_hrald_hrmn_hark, this.position.x, this.position.y, 30, 30); // Draw crab image at its position with a specified size\n }\n }\n\n checkCollision(player) {\n if (this.isAlive) {\n // Calculate the distance between the crab and the player\n let d = dist(this.position.x, this.position.y, player.position.x, player.position.y);\n // Check if the distance is less than the sum of their sizes (hitbox sizes)\n if (d < (player.size / 2 + 20)) { // Assuming the crab has a small size (10)\n // Check if the player is midair or moving fast\n if (player.isJumping || abs(player.velocity.x) > 15 || abs(player.velocity.y) > 10) { // Adjust the speed threshold as necessary\n this.isAlive = false; // The crab dies\n //player.takeDamage(); // Player takes damage\n console.log(`Player hit the crab while midair or moving fast!`);\n }\n else {\n this.isAlive = true; // The crab dies\n player.takeDamage(); // Player takes damage\n console.log(`Checking color at oof`); // Log color at each pixel\n }\n }\n }\n }\n}\n\nclass Player {\n constructor() {\n this.position = createVector(2, 50); // Starting position\n this.velocity = createVector(0, 0); // Initial velocity\n this.acceleration = 1.5; // Base acceleration\n this.maxSpeed = 50; // Maximum speed\n this.jumpForce = -10; // Jumping force\n this.size = 40; // Size of the wheel\n this.isJumping = false; // To track if the player is already jumping\n this.health = 10; // Initialize health\n this.facingDirection = 'right'; // Initialize facing direction to 'right'\n\n this.wheelRotation = 0; // Initialize wheel rotation\n\n // Friction values\n this.grassFriction = 0.90; // Friction when on grass\n this.iceFriction = 0.999999; // No friction on ice (initially)\n this.midairFriction = 1.0; // No friction when midair\n\n // New variables for ice movement\n this.holdTime = 0; // Time the button is held down\n this.isOnIce = false; // Track if the player is on ice\n this.currentSpeed = 0; // Current speed\n }\n\n update() {\n this.position.add(this.velocity); // Update position based on velocity\n this.velocity.y += 0.5; // Gravity effect\n\n // Apply friction based on whether the player is jumping or not\n if (this.isJumping) {\n this.velocity.x *= this.midairFriction; // No friction midair\n } else if (this.isOnIce) {\n // If on ice, maintain the current speed\n this.velocity.x = this.currentSpeed; // Maintain current speed\n } else {\n this.velocity.x *= this.grassFriction; // Friction when on grass\n }\n\n // Limit the velocity to maxSpeed\n this.velocity.x = constrain(this.velocity.x, -this.maxSpeed, this.maxSpeed);\n\n // Update the wheel rotation based on speed\n this.wheelRotation += this.velocity.x * 0.01; // Adjust the multiplier for rotation speed\n }\n\n move(direction) {\n // Check if the player is on ice\n let halfWidth = this.size / 2;\n let groundY = this.position.y + halfWidth; // Position at the bottom of the player circle\n\n // Check for ice color collision\n this.isOnIce = false; // Assume the player is not on ice\n /*for (let i = -halfWidth; i <= halfWidth; i++) {\n let floorColor = get(this.position.x + i - (player.position.x - width / 2), groundY);\n if (floorColor[0] === 95 && floorColor[1] === 205 && floorColor[2] === 228) {\n this.isOnIce = true; // The player is on ice\n break; // Exit the loop if ice is detected\n }\n }*/\n\n // If on ice, do not move until the button is released\n //if (this.isOnIce) {\n // Increment hold time if the button is held down\n //if (direction === 'left' || direction === 'right') {\n //this.holdTime += 1; // Increase hold time\n //}\n //} else {\n // Normal movement outside of ice\n if (direction === 'left') {\n this.velocity.x -= this.acceleration; // Increase leftward velocity\n this.facingDirection = 'left'; // Update facing direction to left\n } else if (direction === 'right') {\n this.velocity.x += this.acceleration; // Increase rightward velocity\n this.facingDirection = 'right'; // Update facing direction to right\n }\n //}\n\n // Check if the button was just released\n /*if (!keyIsDown(LEFT_ARROW) && !keyIsDown(RIGHT_ARROW)) {\n // Apply the speed boost based on hold time if the button was released\n if (this.isOnIce) {\n if (this.facingDirection === 'left') {\n this.currentSpeed = -this.acceleration * (this.holdTime / 60); // Speed boost to the left\n } else if (this.facingDirection === 'right') {\n this.currentSpeed = this.acceleration * (this.holdTime / 60); // Speed boost to the right\n }\n this.velocity.x = this.currentSpeed; // Set the player's velocity to the new speed\n }\n // Reset hold time after the button is released\n this.holdTime = 0; // Reset hold time\n }*/\n }\n\n jump() {\n if (!this.isJumping) {\n this.velocity.y = this.jumpForce; // Apply jump force\n this.isJumping = true; // Set jumping state\n }\n }\n\n display() {\n push(); // Save the current drawing state\n translate(this.position.x, this.position.y + 25); // Move the origin to the player's position\n\n // Draw a circle for the hitbox\n stroke(0, 0, 0, 0);\n fill(100, 150, 250, 0); // Set fill color (light blue)\n ellipse(0, 0, this.size, this.size); // Draw a circle at player's position\n\n // Calculate head position for floating effect and vertical speed\n let floatingEffectY = sin(frameCount * 0.1) * 5; // Vertical floating effect based on sine function\n let floatingEffectX = 0; // Initialize horizontal floating effect\n\n // Only apply horizontal floating effect if moving\n if (abs(this.velocity.x) > 1) { // Check if horizontal velocity is greater than 1\n floatingEffectX = sin(frameCount * 0.1 + this.velocity.x * 0.1) * 5; // Horizontal floating effect\n }\n\n // Calculate target head Y position based on vertical speed\n let targetHeadY;\n\n if (this.velocity.y < 0) { // Moving up\n targetHeadY = -this.size / 2 - 60 + (-this.velocity.y * 4.5) + floatingEffectY; // Larger multiplier for upward movement with floating\n } else { // Moving down or stationary\n targetHeadY = -this.size / 2 - 60 + (-this.velocity.y * 2.5) + floatingEffectY; // Smaller multiplier for downward movement with floating\n }\n\n let headY = lerp(this.headY || targetHeadY, targetHeadY, 0.1); // Easing effect\n\n // Update stored headY for future reference\n this.headY = headY;\n\n // Calculate head X position with floating effect\n let headXOffset = -this.velocity.x * 1.5 + floatingEffectX; // Move head in the opposite direction of player movement and add floating effect\n\n // Determine if the head is under the wheel\n let isUnderWheel = headY > 0; // Assuming the wheel position is at Y=0\n\n // Draw head image\n this.headExpression = this.facingDirection === 'right' ? headImage : headLeftImage; // Swap head image based on direction\n push(); // Save the state for transformations\n if (isUnderWheel) {\n scale(1, -1); // Flip the head image vertically if under the wheel\n image(this.headExpression, headXOffset - this.size / 2, -headY, this.size, this.size); // Draw head image flipped\n } else {\n image(this.headExpression, headXOffset - this.size / 2, headY, this.size, this.size); // Draw head normally\n }\n pop(); // Restore the previous drawing state\n\n // Draw a line connecting the circle to the head\n stroke(0, 0, 0, 255); // Set line color to black\n if (isUnderWheel) {\n line(0, 10, headXOffset, headY - this.size + 3); // Connect to the top of the wheel\n } else {\n line(0, 10, headXOffset, headY + this.size - 3); // Connect circle to head normally\n }\n\n // Draw the wheel\n rotate(this.wheelRotation); // Apply rotation to the wheel\n image(wheelImage, -this.size / 2, -this.size / 2, this.size, this.size); // Draw wheel image centered\n\n pop(); // Restore the previous drawing state\n }\n\n\n checkDamageCollision() {\n if (this.invincible) {\n return; // Exit if the player is invincible\n }\n\n let halfWidth = this.size / 2; // Half the size of the player hitbox\n\n // Check for collision with octopus\n for (let octopus of octopuses) {\n if (octopus.isAlive) {\n let d = dist(this.position.x, this.position.y, octopus.position.x, octopus.position.y);\n if (d < (halfWidth + 25)) { // Assuming the octopus has a size of 25\n this.takeDamage(); // Apply damage to the player\n console.log(`Player hit by octopus!`);\n return; // Exit after finding a collision\n }\n }\n }\n\n // Check each ink bullet for collisions\n for (let bullet of inkBullets) {\n let d = dist(this.position.x, this.position.y, bullet.position.x, bullet.position.y);\n if (d < (halfWidth + 15)) { // Assuming the bullet has a size of 15\n this.takeDamage(); // Apply damage to the player\n bullet.isAlive = false; // Remove the bullet after collision\n console.log(`Player hit by ink bullet!`);\n return; // Exit after finding a collision\n }\n }\n }\n\n // Create a separate method to handle damage logic\n takeDamage() {\n this.health -= 1; // Decrease health by 1\n this.headExpression = loadImage(\"@asset('headOWWWW')\"); // Change head expression to headOWWWW\n\n // Apply upward force and knockback based on facing direction\n this.velocity.y = this.jumpForce; // Apply upward force\n this.velocity.x = this.facingDirection === 'right' ? -this.maxSpeed / 2 : this.maxSpeed / 2; // Knockback in the opposite direction\n\n this.invincible = true; // Set invincibility\n this.invincibilityTimer = 0; // Reset timer for invincibility\n this.isJumping = false; // Reset jump state\n }\n\n resetJump() {\n let halfWidth = this.size / 2; // Calculate half the size of the player hitbox\n let groundY = this.position.y + halfWidth - 25; // Position at the bottom of the player circle\n\n // Check for collision with the floor\n for (let i = -halfWidth; i <= halfWidth; i++) {\n let floorColor = get(this.position.x + i - (player.position.x - width / 2), groundY);\n\n console.log(`Detected color at (${this.position.x + i}, ${groundY}): ${floorColor}`);\n\n // Check for grass color\n if (floorColor[0] === 51 && floorColor[1] === 146 && floorColor[2] === 107) {\n this.isJumping = false; // Reset jump state\n this.velocity.y = 0; // Stop downward movement\n return; // Exit after finding a collision\n }\n\n // Check for ice color\n if (floorColor[0] === 95 && floorColor[1] === 205 && floorColor[2] === 228) {\n this.isJumping = false; // Reset jump state\n this.velocity.y = 0; // Stop downward movement\n return; // Exit after finding a collision\n }\n }\n }\n\n displayHealth() {\n fill(0, 0, 0, 255); // Set text color to black\n textSize(20); // Set text size\n text(`Health: ${this.health}`, this.position.x - width / 2 + 10, this.position.y - height / 2 + 30); // Display health\n }\n}\n\nfunction spawnCrabs() {\n const crabs = []; // Initialize the crab array\n\n // Check every pixel in the canvas\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n let c = get(x, y);\n // Check for the color #ac3232\n if (c[0] === 172 && c[1] === 50 && c[2] === 50) { // Check for #ac3232\n crabs.push(new Crab(x, y)); // Spawn a crab\n console.log(`Crab spawned at: (${x}, ${y})`); // Log the position where the crab is spawned\n }\n }\n }\n\n console.log(`Total crabs spawned: ${crabs.length}`); // Log the total number of crabs spawned\n return crabs; // Return the array of crabs\n}\n\nlet octopuses = []; // Array to store octopus enemies\n\nfunction setup() {\n noSmooth();\n createCanvas(canvaswith, canvas_hit);\n player = new Player(); // Initialize player\n\n // Place a crab at specific coordinates (100, 200)\n const specificCrab = new Crab(100, 0); // Create a crab at (100, 200)\n const unspecificCrab = new Crab(200, 0);\n crabs.push(specificCrab); // Assign the crab to the player's crabs array\n //crabs.push(unspecificCrab);\n\n // Add button event listeners\n document.getElementById('leftBtn').addEventListener('click', () => player.move('left'));\n document.getElementById('rightBtn').addEventListener('click', () => player.move('right'));\n document.getElementById('jumpBtn').addEventListener('click', () => player.jump());\n document.getElementById('leftJumpBtn').addEventListener('click', () => {\n player.move('left'); // Move left\n player.jump(); // Jump\n });\n document.getElementById('rightJumpBtn').addEventListener('click', () => {\n player.move('right'); // Move right\n player.jump(); // Jump\n });\n\n\n // Create octopus enemies\n octopuses.push(new Octopus(220, 170)); // Add octopuses at random positions\n\n}\n\nlet inkBullets = []; // Array to store ink bullets\n\nlet heartBots = []; // Array to store heart bots\n\nfunction draw() {\n // Clear the background\n background(135, 206, 235); // Set a solid background color (sky blue)\n\n // Center the canvas on the player\n let offsetX = player.position.x - width / 2;\n let offsetY = player.position.y - height / 2;\n translate(-offsetX, -offsetY); // Move the entire canvas based on the player's position\n\n noSmooth();\n\n // Draw the floor image\n image(floorImage, 0, height - floorImage.height, width * 25, floorImage.height);\n\n // Handle input for movement\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // A key for left\n player.move('left');\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // D key for right\n player.move('right');\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87) || keyIsDown(32)) { // W key or Space key for jump\n player.jump();\n }\n\n player.update(); // Update player position\n player.display(); // Draw player\n player.resetJump(); // Reset jump state when on ground\n player.displayHealth(); // Display health\n\n // Update and display each crab\n for (let crab of crabs) {\n crab.update(); // Update each crab's state\n crab.display(); // Draw each crab\n }\n\n // Update and display each octopus\n for (let octopus of octopuses) {\n octopus.update(); // Update each octopus's state\n octopus.display(); // Draw each octopus\n\n // Check for collision with the player\n octopus.checkCollision(player);\n }\n\n // Update and display each ink bullet\n for (let bullet of inkBullets) {\n bullet.update(); // Update bullet position\n bullet.display(); // Draw bullet\n\n // Check for collision with the player\n bullet.checkCollision(player);\n }\n\n // Remove bullets that are no longer alive\n inkBullets = inkBullets.filter(bullet => bullet.isAlive);\n\n // Update and display each heart bot\n for (let heartBot of heartBots) {\n heartBot.update(); // Update heart bot position\n heartBot.display(); // Draw heart bot\n heartBot.checkCollision(player); // Check if player picks it up\n }\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Ice Slide Adventure\n \n \n\n\n\n \n\n \n

\n $\"Left\"$ \n $\"Right\"$ \n $\"Jump\"$ \n $\"Left$ \n $\"Right$ \n

\n\n \n\n\n"},"chat_history":[],"assets":[{"project_id":5371,"creator":null,"cloudinary_id":"ucf4ks1inabmwr12tlqu","deleted":false,"id":56637,"name":"chucko","created_at":"2025-01-04T22:09:52.352163Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"hra4terrq4yrwydizpcy","deleted":false,"id":56636,"name":"head","created_at":"2025-01-04T22:09:52.346294Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"ntmsqsbenflxsxcch7pt","deleted":false,"id":56635,"name":"wheel","created_at":"2025-01-04T22:09:52.343439Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"uqrdxcstvrlpm2tlgzft","deleted":false,"id":56634,"name":"sharkysheldon","created_at":"2025-01-04T22:09:52.341165Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"othcqbfomnmhejoyp1fu","deleted":false,"id":56633,"name":"level","created_at":"2025-01-04T22:09:52.336767Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"x90r1cytaeixamtbha5r","deleted":false,"id":56632,"name":"squarelevel","created_at":"2025-01-04T22:09:52.299789Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"h7nj9bgryclouyavy7tp","deleted":false,"id":56631,"name":"damager","created_at":"2025-01-04T22:09:52.279846Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"gqv07rpe7gl3nyoxhafw","deleted":false,"id":56630,"name":"corectsquare","created_at":"2025-01-04T22:09:52.278662Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"o8oscmafvz1fvjdxe3kb","deleted":false,"id":56629,"name":"headleft","created_at":"2025-01-04T22:09:52.277497Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"rlefmgc4tziw67mz206j","deleted":false,"id":56628,"name":"ice_grass_damage","created_at":"2025-01-04T22:09:52.276147Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"dgbgzfkllsgd7n1qyixt","deleted":false,"id":56627,"name":"headOWWWW","created_at":"2025-01-04T22:09:52.272237Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"pdkeyzj3ggk6tkre54bb","deleted":false,"id":56626,"name":"hary_hrald_hrmn_hark","created_at":"2025-01-04T22:09:52.258785Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"z0ic0brkswaupjxvjg0z","deleted":false,"id":56625,"name":"heartbot","created_at":"2025-01-04T22:09:52.242865Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"aabu9ytcwtktiwlzdctl","deleted":false,"id":56624,"name":"icegrassdamagecrab","created_at":"2025-01-04T22:09:52.217589Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"kvtyzkxorvsvy83kmtmc","deleted":false,"id":56623,"name":"genuis","created_at":"2025-01-04T22:09:52.178640Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"c06yggm8etj9mgzgye6t","deleted":false,"id":56622,"name":"octo_ink_bullet_bug","created_at":"2025-01-04T22:09:52.168896Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"rigiajdfpcim7fp28dij","deleted":false,"id":56621,"name":"octo_hapy","created_at":"2025-01-04T22:09:52.159280Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"tg5oamgmw1vg19y1dxvg","deleted":false,"id":56620,"name":"octo_attacky","created_at":"2025-01-04T22:09:52.150045Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"v0aykr91brkrrx078m9c","deleted":false,"id":56619,"name":"octo_angy","created_at":"2025-01-04T22:09:52.134066Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"t81gcwxweljakxctdfm6","deleted":false,"id":56618,"name":"Right_button","created_at":"2025-01-04T22:09:52.132489Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"cfwfzjcazauwjc1ux80l","deleted":false,"id":56617,"name":"Right_button_press","created_at":"2025-01-04T22:09:52.130874Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"yq8k1muocbpxhylwr74q","deleted":false,"id":56616,"name":"Left_button_box","created_at":"2025-01-04T22:09:52.117202Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"b4qotukjqhqvc4kzns5d","deleted":false,"id":56615,"name":"Left_button_box_pres","created_at":"2025-01-04T22:09:52.103149Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"k4xayv9eszqkivsjbh4h","deleted":false,"id":56614,"name":"Left_button_play","created_at":"2025-01-04T22:09:52.100001Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"vua8sfwpwabw7ynw26i8","deleted":false,"id":56613,"name":"Left_buton_play_pres","created_at":"2025-01-04T22:09:52.094729Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"acaliwb86zo6uyer4rpr","deleted":false,"id":56612,"name":"Jump_switch","created_at":"2025-01-04T22:09:52.092661Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"o3vqylxgpkcm7jdf8oms","deleted":false,"id":56611,"name":"Jump_switch_press","created_at":"2025-01-04T22:09:52.071603Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"yg6f6hgeohcztub9fbnr","deleted":false,"id":56610,"name":"Jeftjump_play","created_at":"2025-01-04T22:09:52.059123Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"nwahsrajqtxbru4ap970","deleted":false,"id":56609,"name":"Jeftjump_play_press","created_at":"2025-01-04T22:09:52.043636Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"fzws3xx5o6t48qmlr1tj","deleted":false,"id":56608,"name":"Rightjump_button","created_at":"2025-01-04T22:09:52.038542Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"hhg8kvgxf2eskegd3x7l","deleted":false,"id":56607,"name":"Rightjump_buton_pres","created_at":"2025-01-04T22:09:52.029651Z","resource_type":"image","tags":null},{"project_id":5371,"creator":null,"cloudinary_id":"c1kdalngjkoeo16ca4mm","deleted":false,"id":56606,"name":"cool_level","created_at":"2025-01-04T22:09:52.024384Z","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}