Emoji Adventure Game

{"name":"Intro to Programming With Jippity - Arrays","description":"Day 4 of the Introduction to Programming With Jippity course. \n\nTopic: Arrays","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/zpbspydqczejffiauttp","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-05-16T15:40:35.993252Z","updated_at":"2025-05-16T15:40:35.993254Z","user_id":346,"status":"PRIVATE","parent_id":5851,"id":7974,"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":{"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\n\n\n\n\nlet spriteFrames = [];\n\n// Array to hold individual frames of the sprite\nlet frameWidth;\n\n// Width of each sprite frame\nlet frameHeight;\n\n// Height of each sprite frame\nlet totalFrames = 4;\n\n// Total number of frames in the sprite sheet\nlet currentFrame = 0;\n\n// To keep track of the current frame to display\nlet frameCounter = 0;\n\n// Counter for frame updates\nlet characterScaleFactor = 6;\n\n// Scale factor for the character size\nconst spriteUpdateInterval = 8;\n\n// Interval for sprite frame updates\nlet velocityY = 0;\n\n// Global variable for vertical velocity\nconst gravity = 0.8;\n\n// Global variable for gravity\nconst jumpStrength = -15;\n\n// Global variable for jump strength\nlet bouncingObjects = [];\n\n// Array to hold bouncing objects\nlet spawnRate = 240;\n\n// Number of frames to wait before spawning a new object\nlet frameCountForSpawning = 0;\n\n// Counter to track spawn timing\nlet gameRunning = false;\n\n// Boolean to track if the game is running\nlet lives = 3;\n\n// Player's lives count\nlet score = 0;\n\n// Player's score\nlet level = 1;\n\n// Current game level\nlet elapsedTime = 0;\n\nlet idx = 0;\n\n\n//----------------------------------------------------------------------------------------------------------------------------\n//----------------------------------------------------------------------------------------------------------------------------\n\nlet fruit = ['🍎', '🍌', '🍒', '🍇', '🍉', '🍊', '🍍', '🍓'];\n\n//----------------------------------------------------------------------------------------------------------------------------\n//----------------------------------------------------------------------------------------------------------------------------\n\n\nfunction preload() {\n sprite = loadImage(\"@asset('sprite')\");\n spritePunch = loadImage(\"@asset('spritePunch')\");\n sprite2 = loadImage(\"@asset('sprite2')\");\n sprite2Punch = loadImage(\"@asset('sprite2Punch')\");\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 // Set up the start button\n const startButton = document.getElementById('startButton');\n startButton.addEventListener('click', startGame);\n\n // Set up the restart button\n const restartButton = document.getElementById('restartButton');\n restartButton.addEventListener('click', restartGame);\n\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear the canvas with the sky blue background\n\n // Only execute game logic if the game is running\n if (gameRunning) {\n frameCounter++; // Increment the frame counter each frame\n frameCountForSpawning++; // Increment the spawn frame counter\n\n // Calculate elapsed time in seconds\n if (frameCounter % 60 === 0) {\n elapsedTime++;\n updateSpawnRate();\n }\n\n //----------------------------------------------------------------------------------------------------------------------------\n // Lets add some more functionality that uses\n // array methods combined with elapsed time.\n //----------------------------------------------------------------------------------------------------------------------------\n\n animateCharacter();\n handleCharacterMovement(); // Call the movement function\n spawnFruit();\n updateObjects();\n\n // Draw the floor and character\n drawFloor(); // Draw the floor\n drawCharacter(); // Draw the character\n drawLives(); // Draw the lives in the top left corner\n drawScore(); // Draw the score in the middle of the screen\n\n // Check for game over condition\n if (lives <= 0) {\n gameRunning = false; // Set game state to false\n }\n }\n\n // Display game over message if the game is not running and lives are 0\n if (!gameRunning && lives <= 0) {\n displayGameOver(); // Call the function to display game over message\n }\n}\n\nfunction getRandomFruit() {\n\n // Select fruit in order of array\n if (idx < fruit.length) {\n let selection = fruit[idx];\n idx++;\n return selection;\n }\n else {\n idx = 0;\n return fruit[fruit.length];\n }\n\n // Random selection from array\n\n // let randomIndex = Math.floor(Math.random() * fruit.length); // Get a random index\n // return fruit[randomIndex]; // Return the random fruit emoji\n\n}\n\nfunction spawnFruit() {\n // Only spawn new bouncing objects if the spawn rate is met\n if (frameCountForSpawning >= spawnRate) {\n bouncingObjects.push(new BouncingObject()); // Add a new bouncing object\n frameCountForSpawning = 0; // Reset spawn frame counter\n }\n}\n\nfunction updateObjects() {\n // Update and draw bouncing objects\n for (let obj of bouncingObjects) {\n obj.update(); // Update the object's position\n obj.draw(); // Draw the object\n\n // Check for collision with the character\n if (dist(characterX, characterY, obj.x, obj.y) < (frameHeight * characterScaleFactor / 2 + obj.size / 1000)) {\n // Collision detected, reduce lives\n lives--;\n // Remove the object on collision\n const index = bouncingObjects.indexOf(obj);\n if (index > -1) {\n bouncingObjects.splice(index, 1); // Remove the object\n }\n }\n }\n}\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 animateCharacter() {\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\nfunction handleCharacterMovement() {\n // Move right\n if (keyIsDown(RIGHT_ARROW)) {\n characterX += 6;\n }\n\n // Move left\n if (keyIsDown(LEFT_ARROW)) {\n characterX -= 6;\n }\n\n // Jump\n if (keyIsDown(32) && characterY >= height - 20 - (frameHeight * characterScaleFactor)) {\n velocityY = jumpStrength;\n }\n\n // Apply gravity\n characterY += velocityY;\n velocityY += gravity;\n\n // Prevent falling below the floor\n if (characterY > height - 20 - (frameHeight * characterScaleFactor)) {\n characterY = height - 20 - (frameHeight * characterScaleFactor);\n velocityY = 0;\n }\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 drawLives() {\n const heartEmoji = '❤️'; // Heart emoji to represent a life\n const heartSize = 30; // Size of the heart emoji\n const heartSpacing = 35; // Adjust this value to increase spacing\n\n for (let i = 0; i < lives; i++) {\n textSize(heartSize);\n text(heartEmoji, heartSpacing * i + 20, heartSize); // Position hearts in the top left corner with spacing\n }\n}\n\nfunction startGame() {\n // Hide the start button\n const startButton = document.getElementById('startButton');\n startButton.style.display = 'none'; // Hide button\n\n // Reset variables and start spawning objects\n bouncingObjects = []; // Clear existing objects\n frameCountForSpawning = 0; // Reset the spawn frame counter\n gameRunning = true; // Set game state to running\n}\n\nfunction displayGameOver() {\n fill(255, 0, 0); // Set text color to red\n textSize(50); // Set the size of the text\n textAlign(CENTER); // Center the text\n text('Game Over!', width / 2, height / 2 - 30); // Display the message at the center of the canvas\n\n // Display the score on the game over screen\n textSize(32); // Set text size for the score\n fill(0); // Set text color to black\n text('Score: ' + score, width / 2, height / 2 + 20); // Display the score below the game over message\n\n // Show the restart button\n const restartButton = document.getElementById('restartButton');\n restartButton.style.display = 'block'; // Show the restart button\n}\n\nfunction restartGame() {\n // Reset game variables\n lives = 3; // Reset lives\n gameRunning = true; // Set game state to running\n bouncingObjects = []; // Clear existing objects\n frameCountForSpawning = 0; // Reset the spawn frame counter\n\n // Hide the restart button and show the start button\n const restartButton = document.getElementById('restartButton');\n restartButton.style.display = 'none'; // Hide restart button\n\n const startButton = document.getElementById('startButton');\n startButton.style.display = 'none'; // Hide start button during the game\n}\n\nfunction drawScore() {\n fill(0); // Set text color to black\n textSize(32); // Set text size\n textAlign(CENTER); // Center the text\n text('Score: ' + score, width / 2, windowHeight * 0.1); // Display the score at 10% of the window height\n}\n\nfunction updateSpawnRate() {\n // Gradually decrease the maximum frames over time to prevent sharp spikes in difficulty\n let maxFrames = Math.max(30, 240 - Math.floor(elapsedTime / 10) * 2); // Decrease every 5 seconds\n spawnRate = Math.floor(Math.random() * (maxFrames - 20)) + 20; // Keep spawnRate between 20 and maxFrames\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Emoji Adventure Game\n \n \n\n\n\n \n \n \n \n\n\n","BouncingObject.js":"class BouncingObject {\n constructor() {\n this.x = random(width - 30, width); // Random X position from the right edge\n this.y = 0; // Start at the top of the canvas\n this.size = 30; // Constant size\n this.speedY = random(3, 5); // Initial falling speed (vertical)\n this.speedX = random(2, 7); // Random horizontal speed\n this.gravity = 0.2; // Gravity effect on the object\n this.bounceFactor = 0.8; // Factor to reduce speed after each bounce\n this.emoji = getRandomFruit();\n }\n\n update() {\n this.speedY += this.gravity; // Always apply gravity\n this.y += this.speedY; // Move downwards\n this.x += this.speedX; // Move horizontally\n\n // Bounce off the bottom\n if (this.y > height - this.size) { // Check for floor collision\n this.y = height - this.size; // Reset to floor level\n this.speedY *= -this.bounceFactor; // Reverse and reduce speed for bounce effect\n }\n\n // Remove the object if it goes off the left side of the screen\n if (this.x < 0) {\n // Increment the score when an object goes off the left side\n score++; // Increase score by 1\n\n // Remove this object from the bouncingObjects array\n const index = bouncingObjects.indexOf(this);\n if (index > -1) {\n bouncingObjects.splice(index, 1); // Remove the object\n }\n }\n\n // Keep the bouncing object within the canvas width\n if (this.x > width) {\n this.speedX *= -1; // Reverse direction if hitting side\n }\n }\n\n // Draw the bouncing object\n draw() {\n textSize(this.size);\n text(this.emoji, this.x, this.y); // Draw the object as an emoji\n }\n}"},"chat_history":[],"assets":[{"project_id":7974,"creator":null,"cloudinary_id":"cd6glzfh87nhtirdeger","deleted":false,"id":74102,"created_at":"2025-05-16T15:40:36.002779Z","name":"spritePunch","resource_type":"image","tags":null},{"project_id":7974,"creator":null,"cloudinary_id":"zpbspydqczejffiauttp","deleted":false,"id":74101,"created_at":"2025-05-16T15:40:36.001520Z","name":"sprite2Punch","resource_type":"image","tags":null},{"project_id":7974,"creator":null,"cloudinary_id":"btaav7wu1acxwwmyptoa","deleted":false,"id":74100,"created_at":"2025-05-16T15:40:36.000094Z","name":"sprite2","resource_type":"image","tags":null},{"project_id":7974,"creator":null,"cloudinary_id":"lgvrnhkf9stxuyfrxbqc","deleted":false,"id":74099,"created_at":"2025-05-16T15:40:35.998736Z","name":"sprite","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}