Virtual Pet

{"name":"[TEMPLATE] Virtual Pet","description":"Care for your virtual pet with changing mood tints! Interact with your pet, feed, play, and take them on adventures in this interactive color-changing pet game with cute sprite animations.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/ytyp245jcwinvkouaqp9","view_count":12,"fork_count":66,"expires_at":null,"created_at":"2024-05-14T00:03:35.699686Z","updated_at":"2024-08-03T16:56:15.788648Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":1420,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"Pet.js":"// This class defines what a Pet object is, and contains methods for pet actions. \nclass Pet {\n constructor(sprites, x, y) {\n this.allSprites = sprites; // Store all sprites categorized by action\n this.currentAction = 'idle'; // Initialize the pet's current action to 'idle'\n this.sprites = this.allSprites[this.currentAction]; // Current sprites based on the pet's action\n this.currentSpriteIndex = 0; // Index of the current sprite to display\n this.x = x; // The pet's current x position\n this.y = y; // The pet's current y position\n\n this.animationInterval = 500; // Time in milliseconds between frames\n this.lastAnimationTime = 0; // Last timestamp an animation frame was updated\n this.health = 5; // Initialize health with max value 5\n this.mood = moodEmojis.happy; // Initialize mood as happy\n this.hunger = 50; // Initialize hunger, range 1-100\n\n this.lastHungerTime = 0;\n this.poops = []; // Initialize an empty array to store poop positions\n this.lastMealTime = 0; // Track when the pet last ate\n this.lastHealthDecreaseTimeDueToPoop = 0; // Initialize the time tracker\n this.lastExerciseTime = 0; // Initialize with 0, meaning the pet hasn't been walked yet\n this.lastWakeTime = 0; // Initialize with the start time of the sketch\n this.walkCountSinceSleep = 0; // Initialize the walk count\n\n this.showPettingHand = false;\n this.pettingHandX = 0;\n this.pettingHandY = 0;\n this.showFood = false;\n this.foodX = 0;\n this.foodY = 0;\n this.foodEmoji = '🍔'; // Initialize with a default value, though it will be overwritten\n\n this.isTalking = false; // Track whether the pet is currently talking\n this.dialogue = \"\"; // Store the current dialogue\n this.lastTalkTime = 0; // Track when the last dialogue was shown\n }\n\n setAction(action) {\n if (this.currentAction !== action) {\n if (action === 'walk' && this.currentAction !== 'walk') {\n this.walkCountSinceSleep++;\n this.checkTiredness();\n }\n if (this.currentAction === 'sleep' && action !== 'sleep') {\n // Update last wake time when the pet wakes up from sleep\n this.lastWakeTime = millis();\n }\n\n this.currentAction = action;\n this.sprites = this.allSprites[action]; // Update sprites based on the new action\n this.currentSpriteIndex = 0; // Reset sprite index for the new animation\n this.lastAnimationTime = millis(); // Reset the animation timer\n\n // Handling for when the pet starts walking\n if (action === 'walk') {\n // Increment walk count only if changing to walk from another action\n this.lastExerciseTime = millis(); // Update last exercise time when the pet walks\n setTimeout(() => {\n if (this.currentAction === 'walk') { // Check if it's still walking\n this.setAction('idle'); // Set to idle after 5 seconds\n }\n }, 5000); // 5000 milliseconds = 5 seconds\n }\n\n // Handling for when the pet goes to sleep\n if (action === 'sleep') {\n // Reset walk count when the pet goes to sleep\n this.walkCountSinceSleep = 0;\n setTimeout(() => {\n if (this.currentAction === 'sleep') { // Check if the pet is still sleeping\n this.setAction('idle'); // Wake up the pet after 30 seconds\n this.mood = moodEmojis.happy; // Optionally, set the pet's mood to happy upon waking\n }\n }, 30000); // 30000 milliseconds = 30 seconds\n }\n }\n }\n\n animate() {\n if (millis() - this.lastAnimationTime >= this.animationInterval) {\n this.currentSpriteIndex = (this.currentSpriteIndex + 1) % this.sprites.length;\n this.lastAnimationTime = millis();\n }\n }\n\n display() {\n image(this.sprites[this.currentSpriteIndex], this.x, this.y, 32, 32);\n }\n\n talk() {\n const dialogues = [\"add some pet dialogue...\"]; // Example dialogues\n this.dialogue = dialogues[Math.floor(Math.random() * dialogues.length)]; // Select a random dialogue\n this.isTalking = true;\n this.lastTalkTime = millis(); // Update the time the dialogue was initiated\n\n setTimeout(() => {\n this.isTalking = false; // Stop showing the dialogue after 3 seconds\n }, 3000);\n }\n\n increaseHunger() {\n if (this.lastHungerTime === 0) {\n this.lastHungerTime = millis();\n }\n if (millis() - this.lastHungerTime >= 30000) { // 30 seconds\n this.hunger += 5;\n if (this.hunger > 100) this.hunger = 100; // Cap hunger at 100\n this.lastHungerTime = millis(); // Reset the timer\n }\n }\n\n eat() {\n if (this.hunger === 0) {\n // The pet is not hungry and gets mad if you try to feed it\n this.mood = moodEmojis.angry;\n } else {\n this.hunger -= 10;\n if (this.hunger < 0) this.hunger = 0;\n this.mood = moodEmojis.happy;\n this.lastMealTime = millis(); // Update the last meal time\n }\n }\n\n checkForPoop() {\n if (this.lastMealTime > 0 && millis() - this.lastMealTime >= 8000) { // 8 seconds after eating\n // Generate a random position within the 'room' for the new poop\n let poopX = random(120, 280); // Assuming the room is from x=100 to x=300, with 20px margin\n let poopY = random(170, 230); // Assuming the room is from y=150 to y=250, with 20px margin\n this.poops.push({ x: poopX, y: poopY }); // Add the new poop position to the array\n this.lastMealTime = 0; // Reset last meal time so it doesn't keep pooping\n }\n }\n\n checkTiredness() {\n const awakeDuration = millis() - this.lastWakeTime;\n if (awakeDuration > 120000 || this.walkCountSinceSleep >= 5) { // 120000 milliseconds = 2 minutes\n this.mood = moodEmojis.sleepy; // Update mood to sleepy\n }\n }\n\n clean() {\n this.poops = []; // Clear the poops array\n this.mood = moodEmojis.happy; // Pet is happy when cleaned\n }\n\n displayPoops() {\n for (let poop of this.poops) {\n text('💩', poop.x, poop.y); // Display each poop at its position\n }\n }\n\n decreaseHealthDueToPoop() {\n // Check if there are any poops and it's been more than 2 seconds since the last health decrease\n if (this.poops.length > 0 && (millis() - this.lastHealthDecreaseTimeDueToPoop >= 2000)) {\n this.health -= 1; // Decrease health by 1\n if (this.health < 0) this.health = 0; // Ensure health does not go below 0\n this.lastHealthDecreaseTimeDueToPoop = millis(); // Reset the timer\n }\n }\n\n decreaseHealthDueToLackOfExercise() {\n if (millis() - this.lastExerciseTime >= 30000) { // 30 seconds\n this.health -= 1;\n if (this.health < 1) this.health = 1; // Ensure health does not go below 1\n this.lastExerciseTime = millis(); // Reset the timer to prevent continuous health decrease\n }\n }\n\n startPettingAnimation() {\n this.showPettingHand = true;\n this.pettingHandX = this.x; // Starting position\n this.pettingHandY = this.y + 10; // Slightly above the pet\n\n const animationDuration = 250; // Change total duration of the animation to 1000ms\n const frames = 20; // Increase number of steps/frames to create a smoother animation over the longer duration\n const msPerFrame = animationDuration / frames; // Recalculate milliseconds per frame\n const totalDistance = 10; // Total distance the hand should move\n const distancePerFrame = totalDistance / frames; // Recalculate distance to move per frame to ensure smooth animation\n\n const animateHandMove = (frame) => {\n if (frame <= frames) {\n this.pettingHandX += distancePerFrame; // Move the hand\n setTimeout(() => animateHandMove(frame + 1), msPerFrame); // Schedule next frame update\n } else {\n this.showPettingHand = false; // Animation done, hide hand\n }\n };\n\n animateHandMove(1); // Start the animation with the first frame\n }\n\n startFeedingAnimation() {\n const foodEmojis = ['🍔', '🍕', '🍟', '🌭', '🍿', '🍩', '🍪']; // Array of food emojis\n const randomFoodEmoji = foodEmojis[Math.floor(Math.random() * foodEmojis.length)]; // Select a random food emoji\n\n this.showFood = true;\n this.foodEmoji = randomFoodEmoji; // Use the randomly selected food emoji for this feeding\n this.foodX = this.x + 7.5; // Start near the pet, adjust as needed\n this.foodY = this.y + 7.5;\n setTimeout(() => { this.showFood = false; }, 1000); // Food disappears after 1 second\n }\n\n displayPettingHand() {\n if (this.showPettingHand) {\n text('🖐️', this.pettingHandX, this.pettingHandY);\n }\n }\n\n displayFood() {\n if (this.showFood) {\n text(this.foodEmoji, this.foodX, this.foodY); // Use the current food emoji\n }\n }\n\n play() {\n // TODO: Implement me! How does playing change the pet's mood, health, boredom?\n console.log('PLAY is not implemented yet! How does playing change the pets mood, health, boredom')\n }\n\n customizeAppearance() {\n // TODO: Give the pet a random hat emoji, change the tint color, or something else!\n console.log('CUSTOMIZE APPEARANCE is not implemented yet! Give the pet a random hat emoji, change the tint color, or something else!')\n }\n}","script.js":"// NEXT STEPS:\n// Idea 1: There are no dialogues for talking to the pet yet. Add at least 3 dialogue options to the talk() function in the Pet class.\n// Idea 2: The PLAY button doesn't do anything yet. Add a new meter for pet boredom. Implement the play button to manage the pet's boredom.\n// Idea 3: The CUSTOMIZE APPEARANCE button doesn't do anything yet. Implement it to give the pet a random hat emoji, change the tint color, or something else!\n// Idea 4: The sad mood is never used yet. Make the pet get sad if you don't pet it for too long. \n// Idea 5: The poopy emoji is never used yet. Make the pet in the poopy mood if there is more than 1 poop in it's room.\n// Idea 6: Add more moods and mood emojis! Use the new moods you add under certain conditions.\n\n// VIRTUAL PET TEMPLATE\n// ————— by Kristen —————\n// Assets by Kenney -- https://kenney.nl/assets/1-bit-platformer-pack\n\nlet moodEmojis = {\n happy: '😊',\n sad: '😢',\n angry: '😠',\n sleepy: '😴',\n excited: '😃',\n poopy: '💩'\n};\n\nlet petSprites = {};\nlet currentPetSprite = 'pet_idle1';\n\n// Here we load and store assets on our list.\nfunction preload() {\n petSprites['pet_idle1'] = loadImage(\"@asset('pet_idle1')\");\n petSprites['pet_idle2'] = loadImage(\"@asset('pet_idle2')\");\n petSprites['pet_walk1'] = loadImage(\"@asset('pet_walk1')\");\n petSprites['pet_walk2'] = loadImage(\"@asset('pet_walk2')\");\n petSprites['pet_walk3'] = loadImage(\"@asset('pet_walk3')\");\n petSprites['pet_sleep1'] = loadImage(\"@asset('pet_sleep1')\");\n}\n\n\n// A pet variable. We will make this a richer object in the Pet class.\nlet pet;\n\nfunction setup() {\n createCanvas(400, 400);\n noSmooth(); // Disable smoothing for pixel art\n let actionSprites = {\n 'idle': [petSprites['pet_idle1'], petSprites['pet_idle2']],\n 'walk': [petSprites['pet_walk1'], petSprites['pet_walk2'], petSprites['pet_walk3']],\n 'sleep': [petSprites['pet_sleep1']]\n };\n pet = new Pet(actionSprites, 200 - 16, 200 - 16);\n\n // Button for feeding the pet\n createButton('🍽️').position(10, 275).mousePressed(() => {\n pet.eat(); // Use the eat method\n pet.startFeedingAnimation(); // Trigger feeding animation\n });\n\n // Button for cleaning\n createButton('🧼').position(60, 275).mousePressed(() => {\n pet.clean(); // Use the clean method\n });\n\n // Button for putting the pet to bed or waking up\n createButton('🛏️').position(110, 275).mousePressed(() => {\n if (pet.currentAction === 'sleep') {\n pet.setAction('idle'); // Wake up the pet\n pet.mood = moodEmojis.happy; // Assume the pet is happy after a nap\n } else {\n pet.setAction('sleep'); // Put the pet to sleep\n pet.mood = moodEmojis.sleepy; // Change mood to sleepy\n }\n });\n\n // Button for petting\n createButton('🖐️').position(160, 275).mousePressed(() => {\n pet.health += 1;\n if (pet.health > 5) pet.health = 5;\n pet.mood = moodEmojis.excited;\n pet.startPettingAnimation(); // Trigger petting animation\n });\n\n // Button for walking the pet\n createButton('👟').position(210, 275).mousePressed(() => {\n if (pet.currentAction === 'walk') {\n pet.setAction('idle'); // Set the pet's action to idle if it's already walking\n pet.mood = moodEmojis.happy; // Set the pet's mood to happy\n } else {\n pet.setAction('walk'); // Set the pet's action to walk if it's idle or in any other state\n pet.hunger += 5; // Increase hunger because of walking\n if (pet.hunger > 100) pet.hunger = 100; // Ensure hunger does not exceed 100\n pet.mood = moodEmojis.excited; // Set the pet's mood to excited\n }\n });\n\n // Button for talking to the pet\n createButton('💬 Talk').position(260, 275).mousePressed(() => {\n pet.talk(); // Trigger the talking action\n });\n\n createButton('🎾 Play').position(10, 310).mousePressed(() => {\n pet.play(); // Implement the play method in the Pet class\n });\n\n createButton('🎨 Customize').position(80, 310).mousePressed(() => {\n pet.customizeAppearance(); // Implement the customizeAppearance method in the Pet class\n });\n}\n\n// This function runs over and over (every frame) to draw the game\nfunction draw() {\n background(220);\n fill(0);\n textSize(16);\n textFont('Arial');\n\n rect(100, 150, 200, 100);\n\n pet.animate();\n pet.display();\n pet.increaseHunger(); // Increase hunger over time\n pet.checkForPoop(); // Check if it's time to poop\n pet.displayPoops(); // Display any poops\n pet.decreaseHealthDueToPoop(); // Decrease health due to poop\n pet.decreaseHealthDueToLackOfExercise(); // Check and decrease health due to lack of exercise\n pet.displayPettingHand(); // Check if the petting action is happening and show the hand if so\n pet.displayFood(); // Check if the pet is eating food and show the food if so\n pet.checkTiredness(); // Check and update mood based on tiredness\n if (pet.isTalking) {\n fill(255); // White fill for the dialogue box\n rect(100, 225, 200, 40); // Draw the dialogue box\n fill(0); // Black fill for the text\n textSize(10);\n text(pet.dialogue, 110, 250); // Display the pet's dialogue\n textSize(16);\n }\n\n // UI for Health\n let healthDisplay = 'Health: ' + '❤️'.repeat(pet.health);\n text(healthDisplay, 100, 90);\n\n // UI for Mood\n let moodDisplay = 'Mood: ' + pet.mood;\n text(moodDisplay, 100, 110);\n\n // UI for Hunger\n let hungerDisplay = 'Hunger: ' + pet.hunger + '/100';\n text(hungerDisplay, 100, 130);\n}\n\n","style.css":"","index.html":"\n\n\n\n \n \n Virtual Pet\n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"project_id":1420,"sender":"server_script","message":"In order to use your new JavaScript files, add them to the index.html file with the following code:\n```html\n\n\t\n\t\n\t\n\n```","deleted":0,"created_at":"2025-03-22T22:03:34.486042Z","output_tokens":null,"code_id":219504,"input_tokens":null,"id":119770}],"assets":[{"cloudinary_id":"ytyp245jcwinvkouaqp9","name":"gifThumbnail","deleted":false,"id":16259,"created_at":"2024-08-03T16:56:05.171771Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"c6ozdphv1nd5wxgvzyah","name":"coverimg","deleted":false,"id":15771,"created_at":"2024-07-30T14:39:37.510206Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"hkpwwvtoa28khq3ziudn","name":"pet_sleep1","deleted":false,"id":4114,"created_at":"2024-05-14T00:05:13.855462Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"r43a1v8u9mpxtg58wxqk","name":"pet_idle2","deleted":false,"id":4113,"created_at":"2024-05-14T00:04:57.506673Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"hhrmjodttbf6eq8cmf3d","name":"pet_walk4","deleted":false,"id":4112,"created_at":"2024-05-14T00:04:42.283276Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"gxvmekglihlymbrh3rlx","name":"pet_walk3","deleted":false,"id":4111,"created_at":"2024-05-14T00:04:31.627376Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"pfb4axw2qpddinljxloh","name":"pet_walk2","deleted":false,"id":4110,"created_at":"2024-05-14T00:04:16.774706Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"bqvqvtxxviftn8nklzoy","name":"pet_walk1","deleted":false,"id":4109,"created_at":"2024-05-14T00:04:06.397224Z","project_id":1420,"resource_type":"image"},{"cloudinary_id":"xaeiwiez5ajdeyrs6qgx","name":"pet_idle1","deleted":false,"id":4108,"created_at":"2024-05-14T00:03:53.473366Z","project_id":1420,"resource_type":"image"}],"messages_sent":32,"comments":[],"steps":[]}