Firefly Catcher

{"name":"Firefly Catcher","description":"Embark on a magical adventure to catch glowing fireflies in a virtual jar! Use simple controls to navigate your jar and capture as many fireflies as you can before time runs out. Watch as the jar lights up with each firefly you catch. It's a delightful and interactive way to learn programming while creating a visually enchanting game. Can you catch them all?","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-08-29T06:59:55.032126Z","updated_at":"2025-08-29T06:59:55.032127Z","user_id":413,"status":"PRIVATE","parent_id":null,"id":9782,"user":{"photo":null,"email":null,"recess_id":"083b1e15-88e8-4fe7-963d-5fcc296701bf","created_at":"2025-03-11T16:09:42.743745Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"Iver","id":413,"password_hash":null,"updated_at":"2025-03-11T16:09:42.743750Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let Engine = Matter.Engine;\n\nlet World = Matter.World;\n\nlet Bodies = Matter.Bodies;\n\nlet engine;\n\nlet world;\n\nlet fireflies = [];\n\nlet flyswatter;\n\nlet flySound;\n\nconst minSpawnTime = 1000;\n\nconst maxSpawnTime = 2500;\n\nconst easingFactor = 0.05;\n\nfunction preload() {\n flySound = loadSound(\"@asset('fly')\"); // Load the fly sound\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0); // Set background to black\n\n // Initialize Matter.js engine and world\n engine = Engine.create();\n world = engine.world;\n\n // Set gravity to zero to prevent falling\n engine.world.gravity.y = 0;\n\n // Create boundaries around the screen\n let options = { isStatic: true };\n let ground = Bodies.rectangle(width / 2, height + 10, width, 20, options);\n let leftWall = Bodies.rectangle(-10, height / 2, 20, height, options);\n let rightWall = Bodies.rectangle(width + 10, height / 2, 20, height, options);\n let ceiling = Bodies.rectangle(width / 2, -10, width, 20, options);\n\n World.add(world, [ground, leftWall, rightWall, ceiling]);\n\n // Create the flyswatter\n flyswatter = new Flyswatter();\n\n // Start spawning fireflies at random intervals\n spawnFirefly(); // Call the function to start spawning fireflies\n}\n\nfunction draw() {\n background(0); // Set background to black\n Engine.update(engine); // Update Matter.js engine\n\n for (let firefly of fireflies) {\n // Check for collision with the flyswatter\n let fireflyPos = firefly.body.position;\n if (flyswatter.x < fireflyPos.x + firefly.size / 2 &&\n flyswatter.x + flyswatter.swatterWidth > fireflyPos.x - firefly.size / 2 &&\n flyswatter.y < fireflyPos.y + firefly.size / 2 &&\n flyswatter.y + flyswatter.swatterHeight > fireflyPos.y - firefly.size / 2) {\n // If the flyswatter touches the firefly, mark it as caught\n firefly.caught = true;\n }\n\n firefly.update(); // Update the firefly's movement\n firefly.show(); // Display each firefly\n }\n\n flyswatter.update(); // Update flyswatter position\n flyswatter.show(); // Display the flyswatter\n}\n\nclass Firefly {\n constructor(x, y) {\n this.body = Bodies.rectangle(x, y, 15, 15, { restitution: 0.8 }); // Firefly size\n this.size = 15; // Size for display\n this.caught = false; // Track if the firefly is caught\n this.soundPlayed = false; // Flag to check if sound has been played\n World.add(world, this.body); // Add firefly to the Matter.js world\n\n // Initialize current velocity and target velocity\n this.currentVelocity = { x: 0, y: 0 };\n this.setRandomVelocity();\n }\n\n setRandomVelocity() {\n this.targetVelocity = {\n x: random(-4, 4), // Random horizontal speed\n y: random(-2, 2) // Random vertical speed\n };\n }\n\n update() {\n // If caught, apply a faster downward velocity\n if (this.caught) {\n if (!this.soundPlayed) { // Check if sound hasn't been played yet\n flySound.play(); // Play the fly sound\n this.soundPlayed = true; // Set flag to avoid replaying\n }\n Matter.Body.setVelocity(this.body, { x: 0, y: 10 }); // Apply a faster downward velocity\n flyswatter.stopMoving(); // Stop the flyswatter movement\n\n // Make the swatter darker\n flyswatter.isStunned = true;\n setTimeout(() => {\n flyswatter.isStunned = false; // Reset stun state after 1 second\n }, 1000); // 1 second\n } else {\n // Easing effect\n this.currentVelocity.x += (this.targetVelocity.x - this.currentVelocity.x) * easingFactor;\n this.currentVelocity.y += (this.targetVelocity.y - this.currentVelocity.y) * easingFactor;\n\n // Set the new velocity of the firefly\n Matter.Body.setVelocity(this.body, {\n x: this.currentVelocity.x,\n y: this.currentVelocity.y\n });\n\n // Randomly change the target velocity\n if (random() < 0.02) { this.setRandomVelocity(); }\n }\n\n // Check if the firefly is touching the ground\n if (this.body.position.y >= height - 10 && this.caught) { // Assuming ground is at height - 10\n World.remove(world, this.body); // Remove firefly from the world\n fireflies = fireflies.filter(f => f !== this); // Remove from the array\n }\n }\n\n show() {\n const pos = this.body.position;\n push();\n translate(pos.x, pos.y);\n noStroke();\n fill(255, 255, 0, 150); // Yellow glow effect\n rectMode(CENTER);\n rect(0, 0, this.size, this.size, 5); // Rounded corners\n pop();\n }\n}\n\nFlyswatter.prototype.stopMoving = function () {\n this.moving = false; // Stop moving the swatter\n this.isStunned = true; // Set stunned flag\n this.stickWidth = this.originalStickWidth; // Increase stick length\n this.swatterWidth = this.originalSwatterWidth * 0.8; // Decrease swatter width\n this.swatterHeight = this.originalSwatterHeight * 0.8; // Decrease swatter height\n\n // Set a timeout to reset the swatter position and size after 500 milliseconds\n setTimeout(() => {\n this.moving = true; // Resume moving\n this.x = mouseX - this.swatterWidth / 2; // Center again\n this.y = mouseY - this.stickHeight - this.swatterHeight / 2; // Position again\n\n // Revert sizes back after the stun\n this.stickWidth = this.originalStickWidth;\n this.swatterWidth = this.originalSwatterWidth;\n this.swatterHeight = this.originalSwatterHeight;\n\n this.isStunned = false; // Reset stunned flag\n }, 500); // 500 milliseconds\n};\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Firefly Catcher\n \n \n \n \n \n \n\n\n\n \n \n\n\n","Flyswatter.js":"class Flyswatter {\n constructor() {\n this.originalStickWidth = 10; // Original width of the stick\n this.originalStickHeight = 80; // Original height of the stick\n this.originalSwatterWidth = 50; // Original width of the swatter part\n this.originalSwatterHeight = 45; // Original height of the swatter part\n this.stickWidth = this.originalStickWidth; // Current width of the stick\n this.stickHeight = this.originalStickHeight; // Current height of the stick\n this.swatterWidth = this.originalSwatterWidth; // Current width of the swatter part\n this.swatterHeight = this.originalSwatterHeight; // Current height of the swatter part\n this.cornerRadius = 10; // Radius for rounded corners\n this.moving = true; // Flag to check if the swatter is moving\n this.isStunned = false; // Flag to check if the swatter is stunned\n this.stunColor = color(255, 70, 70); // Darker color when stunned\n this.defaultColor = color(255, 99, 71); // Default color for the swatter\n this.rotation = 0; // Initialize rotation angle\n this.rotationSpeed = 3; // Speed of rotation when space is pressed\n }\n\n update() {\n // Update flyswatter position to follow the mouse only if it's moving\n if (this.moving) {\n this.x = mouseX - this.swatterWidth / 2; // Center the swatter on the mouse\n this.y = mouseY - this.stickHeight - this.swatterHeight / 2; // Position above the mouse\n }\n\n // Rotate the flyswatter when the space key is pressed\n if (keyIsDown(32)) { // 32 is the keycode for space\n this.rotation += this.rotationSpeed; // Increase rotation angle\n }\n }\n\n stopMoving() {\n this.moving = false; // Stop moving the swatter\n this.isStunned = true; // Set stunned flag\n this.stickWidth = this.originalStickWidth; // Increase stick length\n this.swatterWidth = this.originalSwatterWidth * 0.8; // Decrease swatter width\n this.swatterHeight = this.originalSwatterHeight * 0.8; // Decrease swatter height\n\n setTimeout(() => {\n this.moving = true; // Resume moving\n this.x = mouseX - this.swatterWidth / 2; // Center again\n this.y = mouseY - this.stickHeight - this.swatterHeight / 2; // Position again\n\n // Revert sizes back after the stun\n this.stickWidth = this.originalStickWidth;\n this.swatterWidth = this.originalSwatterWidth;\n this.swatterHeight = this.originalSwatterHeight;\n\n this.isStunned = false; // Reset stunned flag\n }, 500); // 500 milliseconds\n }\n\n show() {\n // Set color based on stun state\n fill(this.isStunned ? this.stunColor : this.defaultColor);\n noStroke(); // Remove outline\n push(); // Save current drawing state\n translate(this.x, this.y + this.swatterHeight); // Move to swatter position\n rotate(radians(this.rotation)); // Rotate by the current angle\n rectMode(CENTER); // Set rectangle mode to center\n rect(0, 0, this.stickWidth, this.stickHeight, this.cornerRadius); // Draw the stick rectangle with rounded corners\n rect(0, -this.stickHeight / 2, this.swatterWidth, this.swatterHeight, this.cornerRadius); // Draw the swatter rectangle with rounded corners\n pop(); // Restore previous drawing state\n }\n}\n\n"},"chat_history":[],"assets":[{"project_id":9782,"creator":"","cloudinary_id":"b63vzuydpegoorfdkye0","deleted":false,"id":85243,"name":"fly","created_at":"2025-08-29T07:39:19.478557Z","resource_type":"audio","tags":[]}],"messages_sent":30,"comments":[],"steps":[]}