Frogger Clone with Command Debounce

{"name":"Frogger Clone with Command Debounce","description":"Leap to victory in this thrilling Frogger clone, where every move counts! Navigate your frog across treacherous roads and rivers, but with a twist: you can only issue three commands every three seconds. Plan your moves wisely and test your strategic skills in this fast-paced challenge!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-07-30T01:25:45.609064Z","updated_at":"2025-07-30T01:25:45.609065Z","user_id":70,"status":"PRIVATE","parent_id":null,"id":9494,"user":{"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","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":200},"code":{"script.js":"let finishLineY;\n\nlet moveCount = 0;\n\nlet lastMoveTime = 0;\n\nconst debounceTime = 100;\n\nlet obstacles = [];\n\nlet player;\n\nlet frogs = [];\n\nlet shipImage;\n\nlet frogImage;\n\nfunction preload() {\n shipImage = loadImage(\"@asset('ship2')\"); // Load the ship image\n frogImage = loadImage(\"@asset('frog')\"); // Load the frog image\n // Removed the undefined function call\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n player = {\n x: width / 2,\n y: height - 100,\n size: 80,\n angle: 0 // Set to 0 to start facing east\n };\n\n finishLineY = 50; // Set finish line position\n\n // Create frogs at random positions\n for (let i = 0; i < 5; i++) {\n frogs.push(new Frog(random(width), random(height - 150), 50, 50)); // Increased size\n }\n}\n\nfunction draw() {\n clear();\n background(135, 206, 235);\n drawPlayer(); // Draw the ship\n handleMovement(); // Handle player movement\n handleFrogs(); // Move and display frogs\n handleObstacles(); // Move and display obstacles\n}\n\nclass Obstacle {\n constructor(x, y, width, height, speed) {\n this.x = x; // Starting x position\n this.y = y; // Starting y position\n this.width = width; // Width of the obstacle\n this.height = height; // Height of the obstacle\n this.speed = speed; // Speed of the obstacle\n }\n\n move(targetX, targetY) {\n // Calculate angle to the frog\n let angle = atan2(targetY - this.y, targetX - this.x);\n this.x += cos(angle) * this.speed; // Move towards the frog on the x-axis\n this.y += sin(angle) * this.speed; // Move towards the frog on the y-axis\n\n // Reset position if it goes off screen\n if (this.x > width) {\n this.x = -this.width; // Reset to the left side\n this.y = random(height); // Random vertical position\n }\n }\n\n display() {\n fill(255, 0, 0); // Red color for obstacles (cars)\n rect(this.x, this.y, this.width, this.height); // Draw the obstacle\n }\n}\n\nclass Frog {\n constructor(x, y, width, height) {\n this.x = x; // Starting x position\n this.y = y; // Starting y position\n this.width = width; // Width of the frog\n this.height = height; // Height of the frog\n }\n\n display() {\n image(frogImage, this.x - this.width / 2, this.y - this.height / 2, this.width, this.height); // Draw the frog image\n }\n}\n\nfunction drawPlayer() {\n push(); // Save the current drawing state\n translate(player.x, player.y); // Move to the player's location\n\n // Try each rotation one at a time:\n rotate(player.angle); // No rotation\n //rotate(player.angle - PI / 2); // 90 degrees counterclockwise\n //rotate(player.angle + PI); // 180 degrees\n // rotate(player.angle + PI / 2); // 90 degrees clockwise\n\n image(shipImage, -player.size / 2, -player.size / 2, player.size, player.size); // Draw the ship centered at the origin\n pop(); // Restore the previous drawing state\n}\n\nfunction drawFinishLine() {\n fill(0, 255, 0); // Green color for finish line\n rect(0, finishLineY, width, 10); // Draw finish line as a rectangle\n}\n\nfunction handleObstacles() {\n for (let obstacle of obstacles) {\n obstacle.move(player.x, player.y); // Move towards the frog's position\n obstacle.display(); // Display each obstacle\n checkCollision(obstacle); // Check for collision with the frog\n }\n}\n\nfunction resetPlayer() {\n player.x = width / 2; // Reset to center\n player.y = height - 50; // Reset to bottom\n}\n\nfunction handleMovement() {\n if (keyIsDown(LEFT_ARROW)) {\n player.angle -= 0.05; // Rotate left\n }\n if (keyIsDown(RIGHT_ARROW)) {\n player.angle += 0.05; // Rotate right\n }\n if (keyIsDown(UP_ARROW)) {\n player.x += sin(player.angle) * 5; // Move forward based on angle\n player.y -= cos(player.angle) * 5; // Move forward based on angle\n }\n if (keyIsDown(DOWN_ARROW)) {\n player.x -= sin(player.angle) * 3; // Move backward based on angle\n player.y += cos(player.angle) * 3; // Move backward based on angle\n }\n}\n\nfunction handleFrogs() {\n for (let i = frogs.length - 1; i >= 0; i--) {\n frogs[i].display(); // Display each frog\n if (checkCollision(frogs[i])) {\n frogs.splice(i, 1); // Remove the frog if hit by the car\n }\n }\n\n // Check for win condition\n if (frogs.length === 0) {\n winGame(); // Call the function to handle winning\n }\n}\n\nfunction checkCollision(frog) {\n return player.x < frog.x + frog.width &&\n player.x + player.size > frog.x &&\n player.y < frog.y + frog.height &&\n player.y + player.size / 2 > frog.y; // Check for collision\n}\n\nfunction winGame() {\n textSize(32);\n fill(255); // White color for text\n textAlign(CENTER);\n text('You Win! 🎉', width / 2, height / 2); // Display win message\n noLoop(); // Stop the draw loop to prevent further movement\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Frogger Clone with Command Debounce\n \n \n \n\n\n \n\n"},"chat_history":[],"assets":[{"name":"ship2","created_at":"2025-07-30T01:50:34.972770Z","resource_type":"image","tags":null,"project_id":9494,"creator":"","cloudinary_id":"vgpq4atpgvvhcmolzbbb","deleted":false,"id":82114},{"name":"frog","created_at":"2025-07-30T01:50:16.043374Z","resource_type":"image","tags":null,"project_id":9494,"creator":"","cloudinary_id":"fuhihlovtgqexcxcjoqu","deleted":false,"id":82113}],"messages_sent":34,"comments":[],"steps":[]}