Bucket Catcher Game

{"name":"Bucket Catcher Game","description":"Catch falling objects with a realistic bucket in this fun and interactive game built using Paper.js!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-05-13T19:21:43.283931Z","updated_at":"2024-05-13T19:21:43.283932Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":1410,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"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},"code":{"script.js":"// Setup Paper.js\npaper.install(window);\nvar ripples = [];\nfunction createRippleAtPosition(point) {\n var initialRadius = 20; // Significantly larger initial size for a more pronounced start\n var maxRippleSize = 800; // Increased maximum size for larger ripples\n var opacityStart = 0.85; // Slightly higher starting opacity for a bolder look\n var opacityEnd = 0.02; // Slightly less transparent end state for longer visibility\n var growthFactor = 5; // Increased growth factor for faster expansion\n\n // Create the outer ripple circle\n var outerRipple = new paper.Path.Circle({\n center: point,\n radius: initialRadius,\n fillColor: new paper.Color(1, 1, 1, opacityEnd)\n });\n\n // Create the inner ripple circle\n var innerRipple = new paper.Path.Circle({\n center: point,\n radius: initialRadius * 0.75, // Starting larger than before\n fillColor: new paper.Color(1, 1, 1, opacityStart)\n });\n\n // Store data for animation\n var rippleData = {\n growSpeed: 3 + Math.random() * growthFactor, // Significantly increased speed\n maxSize: 400 + Math.random() * maxRippleSize, // Increased varied size\n outerRipple: outerRipple,\n innerRipple: innerRipple\n };\n\n // Push both ripples into the ripples array for animation\n ripples.push(rippleData);\n}\nwindow.onload = function() {\n paper.setup(document.getElementById('myCanvas'));\n\n // Create water background\n var water = new paper.Path.Rectangle({\n point: [0, 0], // Start from the top\n size: [paper.view.size.width, paper.view.size.height], // Extend to full height\n fillColor: {\n gradient: {\n stops: [['#7db9e8', 0.1], ['#1E90FF', 1]], // Simplified gradient\n radial: false\n },\n origin: [0, 0],\n destination: [paper.view.size.width, paper.view.size.height]\n }\n });\n\n // Global array to hold our ripples\n\n // Function to create a ripple at a random position\n // Adjusted to match the structure used in createRippleAtPosition\nfunction createRipple() {\n var maxRippleSize = 200; // Maximum size of a ripple\n var ripplePosition = new paper.Point(paper.view.size.width * Math.random(), paper.view.size.height * Math.random());\n\n var outerRipple = new paper.Path.Circle({\n center: ripplePosition,\n radius: 1, // Start small\n fillColor: new paper.Color(1, 1, 1, 0.01) // Very transparent\n });\n\n var innerRipple = new paper.Path.Circle({\n center: ripplePosition,\n radius: 0.5, // Even smaller\n fillColor: new paper.Color(1, 1, 1, 0.25) // Slightly more opaque\n });\n\n // Store data for animation in a similar structure\n var rippleData = {\n growSpeed: 1 + Math.random(), // Random growth speed\n maxSize: 100 + Math.random() * maxRippleSize, // Random maximum size\n outerRipple: outerRipple,\n innerRipple: innerRipple\n };\n\n ripples.push(rippleData);\n}\n\nfunction updateRipples() {\n for (var i = ripples.length - 1; i >= 0; i--) {\n var rippleData = ripples[i];\n var outerRipple = rippleData.outerRipple;\n var innerRipple = rippleData.innerRipple;\n\n // Increase the radius of the ripples more significantly\n outerRipple.radius += rippleData.growSpeed;\n innerRipple.radius += rippleData.growSpeed * 0.85; // Keeping inner ripple growing fast as well\n\n // Adjust the fading to ensure ripples are visible longer as they expand\n outerRipple.fillColor.alpha *= 0.97; // Slower fade for outer ripple\n innerRipple.fillColor.alpha *= 0.90; // Slightly faster fade for inner ripple, but slower than before\n\n // Create secondary ripples at certain intervals\n if (Math.random() > 0.95 && outerRipple.radius < rippleData.maxSize / 2) { // Limit secondary ripple creation to early growth phase\n var angle = Math.random() * 2 * Math.PI; // Random angle for secondary ripple direction\n var distance = outerRipple.radius * 0.5; // Distance from the center of the primary ripple\n var secondaryRipplePoint = new paper.Point(\n outerRipple.position.x + Math.cos(angle) * distance,\n outerRipple.position.y + Math.sin(angle) * distance\n );\n createRippleAtPosition(secondaryRipplePoint);\n }\n\n // Remove the ripple once the outer part exceeds its max size\n if (outerRipple.radius > rippleData.maxSize) {\n outerRipple.remove();\n innerRipple.remove();\n ripples.splice(i, 1);\n }\n }\n}\n // Assigning the water.onFrame function\n water.onFrame = function(event) {\n // Wave effect\n var waveSpeed = 50;\n var waveHeight = 5;\n var angle = event.count / waveSpeed;\n var sinHeight = Math.sin(angle) * waveHeight;\n\n this.fillColor.origin.y = sinHeight;\n this.fillColor.destination.y = paper.view.size.height + sinHeight;\n\n // Ripple effect\n if (event.count % 200 === 0) {\n createRipple();\n }\n updateRipples();\n };\n paper.view.onMouseDown = function(event) {\n createRippleAtPosition(event.point);\n };\n};","style.css":"body, html {\r\n margin: 0;\r\n overflow: hidden;\r\n height: 100%;\r\n}\r\n\r\ncanvas {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n}","index.html":"\n\n\n\n \n \n Bucket Catcher Game\n \n\n\n\n

\n \n \n\n\n"},"chat_history":[{"deleted":0,"code_id":80717,"input_tokens":null,"id":42343,"project_id":1410,"sender":"human","message":"Let's get started!","created_at":"2024-05-13T19:22:37.927578Z","output_tokens":null},{"deleted":0,"code_id":80717,"input_tokens":null,"id":42344,"project_id":1410,"sender":"ai","message":"","created_at":"2024-05-13T19:22:37.934247Z","output_tokens":null},{"deleted":0,"code_id":80718,"input_tokens":null,"id":42345,"project_id":1410,"sender":"human","message":"add realistic water in the bg","created_at":"2024-05-13T19:22:41.685264Z","output_tokens":null},{"deleted":0,"code_id":80718,"input_tokens":null,"id":42346,"project_id":1410,"sender":"ai","message":"```html\n

\n```\n\n- Add a `