Multiplayer Physics Football Duel

{"name":"PhysicsPong","description":"Get ready for an exciting 1v1 football showdown where you can launch physics balls at your opponent! Track the velocity and acceleration of your shots, and outsmart your enemy with quick moves and clever tactics. Perfect for those looking to learn programming while having fun!","photo":null,"view_count":1,"fork_count":1,"expires_at":null,"created_at":"2025-03-01T00:08:03.551585Z","updated_at":"2025-03-01T00:08:03.551588Z","user_id":8,"status":"PRIVATE","parent_id":5921,"id":5922,"user":{"photo":null,"email":null,"recess_id":"3f5f8324-2a21-d8d3-2d39-c7ba5cf76110","created_at":"2023-12-12T14:12:57.257630Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"baian","id":8,"password_hash":null,"updated_at":"2023-12-12T14:12:57.257633Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// script.js\nconsole.log(\"Script loaded\"); // Check if script is loaded\n\nlet ball; // Variable to hold the ball object\nlet gravity = 0.1; // Gravity strength\nlet isDragging = false; // To track if the ball is being dragged\nlet dragVector; // To store the drag direction\nconst maxDragLength = 100; // Maximum length for the drag arrow\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight * 0.8); // Create canvas\n background(135, 206, 235); // Set background color\n ball = new Ball(); // Create a new Ball object\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear the background each frame\n drawGoals(); // Draw goals\n ball.update(); // Update the ball position\n ball.display(); // Display the ball\n drawBarriers(); // Draw barriers\n if (isDragging) {\n // Limit drag vector length\n let dragLength = dragVector.mag();\n if (dragLength > maxDragLength) {\n dragVector.setMag(maxDragLength);\n }\n drawArrow(ball.position.x, ball.position.y, dragVector.x, dragVector.y, color(0, 0, 255)); // Drag direction arrow\n }\n drawInfo(); // Display velocity, gravity, and acceleration information\n drawAdditionalArrows(); // Draw arrows for gravity and acceleration\n}\n\nclass Ball {\n constructor() {\n this.position = createVector(120, height / 2); // Move the ball slightly to the right\n this.velocity = createVector(0, 0); // Initial velocity\n this.radius = 15; // Radius of the ball\n }\n\n update() {\n // Apply gravity only when the ball is not dragged\n if (!isDragging) {\n this.velocity.y += gravity; // Apply gravity to vertical velocity\n this.position.add(this.velocity); // Update the ball's position\n }\n\n // Check for collisions with barriers\n if (this.position.x - this.radius < 60 || this.position.x + this.radius > width - 60) {\n this.velocity.x *= -0.5; // Bounce back with some energy loss\n this.position.x = constrain(this.position.x, this.radius + 60, width - this.radius - 60); // Constrain position within barriers\n }\n\n // Check for ground collision\n if (this.position.y + this.radius > height) {\n this.position.y = height - this.radius; // Reset position to stay within canvas\n this.velocity.y *= -0.5; // Bounce back with some energy loss\n }\n }\n\n display() {\n fill(255); // White color for the ball\n noStroke(); // Remove outline to avoid blue outline when dragging\n ellipse(this.position.x, this.position.y, this.radius * 2); // Draw the ball\n }\n}\n\nfunction drawGoals() {\n // Draw left goal\n fill(255, 0, 0); // Red color for the left goal\n rect(100, height / 2 - 50, 20, 100); // Adjusted position for wider canvas\n // Draw right goal\n fill(0, 0, 255); // Blue color for the right goal\n rect(width - 120, height / 2 - 50, 20, 100); // Adjusted position for wider canvas\n}\n\nfunction drawBarriers() {\n fill(0); // Black color for barriers\n rect(0, 0, 60, height); // Wider left barrier\n rect(width - 60, 0, 60, height); // Wider right barrier\n}\n\nfunction drawInfo() {\n fill(0); // Black color for text\n textSize(16); // Text size\n textAlign(CENTER); // Center the text\n text(`Velocity: ${ball.velocity.mag().toFixed(2)}`, width / 2, 30); // Display velocity\n text(`Gravity: ${gravity}`, width / 2, 50); // Display gravity\n text(`Acceleration: ${ball.velocity.y.toFixed(2)}`, width / 2, 70); // Display acceleration\n}\n\nfunction mousePressed() {\n // Start dragging the ball\n if (dist(mouseX, mouseY, ball.position.x, ball.position.y) < ball.radius) {\n isDragging = true;\n dragVector = createVector(0, 0); // Reset drag vector\n }\n}\n\nfunction mouseDragged() {\n // Update the drag vector based on mouse position\n if (isDragging) {\n dragVector.set(mouseX - ball.position.x, mouseY - ball.position.y);\n }\n}\n\nfunction mouseReleased() {\n // Stop dragging and launch the ball\n if (isDragging) {\n ball.velocity = dragVector.copy().mult(0.1); // Set ball velocity based on drag direction and a multiplier\n isDragging = false; // Stop dragging\n }\n}\n\nfunction drawArrow(x, y, dx, dy, col) {\n // Draw an arrow to indicate the drag direction\n stroke(col); // Set arrow color\n strokeWeight(2); // Set arrow thickness\n line(x, y, x + dx, y + dy); // Draw line for arrow\n // Draw arrow head\n let arrowSize = 7; // Size of the arrow head\n push();\n translate(x + dx, y + dy); // Move to arrow tip\n rotate(atan2(dy, dx)); // Rotate to the direction\n fill(col); // Set fill color\n noStroke(); // No outline\n triangle(0, 0, -arrowSize, arrowSize / 2, -arrowSize, -arrowSize / 2); // Draw arrow head\n pop();\n}\n\nfunction drawAdditionalArrows() {\n // Draw arrows for gravity and acceleration\n drawArrow(ball.position.x, ball.position.y, 0, 50, color(0, 255, 0)); // Gravity arrow (green)\n drawArrow(ball.position.x, ball.position.y, ball.velocity.x * 10, ball.velocity.y * 10, color(255, 0, 0)); // Acceleration arrow (red)\n}","style.css":"/* style.css */\r\nbody {\r\n margin: 0;\r\n}\r\n\r\ncanvas {\r\n display: block;\r\n}","index.html":"\n\n\n\n \n \n Multiplayer Physics Football Duel\n \n \n\n\n\n \n\n\n"},"chat_history":[{"deleted":0,"code_id":214201,"input_tokens":null,"id":113546,"project_id":5922,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-03-01T00:08:16.753846Z","output_tokens":null},{"deleted":0,"code_id":214201,"input_tokens":3782,"id":113547,"project_id":5922,"sender":"ai","message":"Great! It looks like you've","created_at":"2025-03-01T00:08:16.782193Z","output_tokens":6},{"deleted":0,"code_id":214201,"input_tokens":null,"id":113548,"project_id":5922,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-03-01T00:08:53.606743Z","output_tokens":null},{"deleted":0,"code_id":214201,"input_tokens":3782,"id":113549,"project_id":5922,"sender":"ai","message":"Awesome! It looks like you have a project that involves a ball affected","created_at":"2025-03-01T00:08:53.618024Z","output_tokens":17},{"deleted":0,"code_id":214201,"input_tokens":null,"id":113550,"project_id":5922,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-03-01T00:11:19.597646Z","output_tokens":null},{"deleted":0,"code_id":214201,"input_tokens":3782,"id":113551,"project_id":5922,"sender":"ai","message":"Great","created_at":"2025-03-01T00:11:19.605146Z","output_tokens":1}],"assets":[],"messages_sent":0,"comments":[],"steps":[]}