Silly Ball Bounce

{"name":"Silly Ball Bounce","description":"Bounce around with a silly ball and score points in this fun and interactive game! Can you keep the ball bouncing and avoid obstacles?","photo":"https://jippity.s3.amazonaws.com/Screenshot 2024-06-07 at 5.09.20 PM.png","view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-06-11T23:23:46.084713Z","updated_at":"2024-06-11T23:23:46.084717Z","user_id":9,"status":"PUBLIC","parent_id":1748,"id":1840,"user":{"photo":null,"email":null,"recess_id":"3f8e54bf-c664-e715-7a03-759308ca12b6","created_at":"2023-12-12T15:05:36.121931Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"matthew","id":9,"password_hash":null,"updated_at":"2023-12-12T15:05:36.121934Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let dragging = false; // Variable to check if the view is being dragged\nlet dragStartTime; // Variable to store the time when dragging started\nlet boxPosition; // Variable to hold the position of the 3D rectangle\nlet boxRotationY; // Rotation angle of the box around the Y-axis (yaw)\nlet boxRotationX = 0; // Rotation angle of the box around the X-axis (pitch)\nlet boxRotationZ = 0; // Rotation angle of the box around the Z-axis (roll)\nlet cameraAngleX = 0; // Angle for horizontal rotation around the rectangle\nlet cameraAngleY = 0; // Angle for vertical rotation around the rectangle\nlet distance = 1000; // Distance of the camera from the rectangle\nlet movingForward = false; // Variable to track if the box is moving forward\nlet turningUp = false; // Variable to track if the box is turning up\nlet turningDown = false; // Variable to track if the box is turning down\nlet turningLeft = false; // Variable to track if the box is turning left\nlet turningRight = false; // Variable to track if the box is turning right\nlet rollingLeft = false; // Variable to track if the box is rolling left\nlet rollingRight = false; // Variable to track if the box is rolling right\nlet balls = []; // Array to hold the small green balls\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL); // Initialize the canvas in WEBGL mode\n boxPosition = createVector(0, 0, 0); // Center position for the box\n boxRotationY = PI; // Initial rotation to make a different side the front\n\n // Create multiple larger green balls with reduced distance offsets\n for (let i = 0; i < 20; i++) {\n let ball = {\n position: createVector(random(-2000, 2000), random(-2000, 2000), random(-2000, 2000)), // Further reduced distance\n size: random(300, 600) // Adjusted size\n };\n balls.push(ball);\n }\n}\n\nfunction draw() {\n background(0); // Clear the background with black color\n\n // Add lighting to the scene\n directionalLight(255, 255, 255, 0, 0, -1); // White light from the front\n ambientLight(128); // Soft ambient light\n\n // Move the box based on the movement flags\n if (movingForward) {\n boxPosition.z -= 5 * cos(boxRotationY) * cos(boxRotationX);\n boxPosition.x -= 5 * sin(boxRotationY);\n boxPosition.y -= 5 * sin(boxRotationX);\n }\n if (turningUp) {\n boxRotationX -= 0.05; // Adjusted direction to tilt the box upward (pitch)\n }\n if (turningDown) {\n boxRotationX += 0.05; // Adjusted direction to tilt the box downward (pitch)\n }\n if (turningLeft) {\n boxRotationY -= 0.05; // Adjusted direction to tilt the box left (yaw)\n }\n if (turningRight) {\n boxRotationY += 0.05; // Adjusted direction to tilt the box right (yaw)\n }\n if (rollingLeft) {\n boxRotationZ -= 0.05; // Adjusted direction to roll the box left (roll)\n }\n if (rollingRight) {\n boxRotationZ += 0.05; // Adjusted direction to roll the box right (roll)\n\n }\n\n // Calculate the camera's position to be much farther behind the box\n let camX = boxPosition.x - distance * cos(boxRotationY);\n let camY = boxPosition.y + 500; // Keep the camera higher for a better view\n let camZ = boxPosition.z - distance * sin(boxRotationY) * cos(boxRotationX);\n\n // Adjust the camera to follow the calculated position\n camera(camX, camY, camZ, boxPosition.x, boxPosition.y, boxPosition.z, 0, 1, 0);\n\n // Draw the main white 3D rectangle (box) with a distinctive front face\n push(); // Save the current drawing state\n translate(boxPosition.x, boxPosition.y, boxPosition.z); // Move to the box's position\n rotateX(boxRotationX); // Rotate the box around the X-axis (pitch)\n rotateY(boxRotationY); // Rotate the box around the Y-axis (yaw)\n rotateZ(boxRotationZ); // Rotate the box around the Z-axis (roll)\n\n // Draw the box with a different front face\n beginShape();\n // Front face (red)\n fill(255, 0, 0);\n vertex(-100, -100, 25); vertex(100, -100, 25); vertex(100, 100, 25); vertex(-100, 100, 25);\n // Back face\n fill(255);\n vertex(-100, -100, -25); vertex(100, -100, -25); vertex(100, 100, -25); vertex(-100, 100, -25);\n // Right face\n fill(255);\n vertex(100, -100, -25); vertex(100, -100, 25); vertex(100, 100, 25); vertex(100, 100, -25);\n // Left face\n fill(255);\n vertex(-100, -100, -25); vertex(-100, -100, 25); vertex(-100, 100, 25); vertex(-100, 100, -25);\n // Top face\n fill(255);\n vertex(-100, -100, -25); vertex(100, -100, -25); vertex(100, -100, 25); vertex(-100, -100, 25);\n // Bottom face\n fill(255);\n vertex(-100, 100, -25); vertex(100, 100, -25); vertex(100, 100, 25); vertex(-100, 100, 25);\n endShape(CLOSE);\n\n pop(); // Restore the previous drawing state\n\n // Draw the larger green balls\n for (let ball of balls) {\n push(); // Save the current drawing state\n translate(ball.position.x, ball.position.y, ball.position.z); // Move to the ball's fixed position in the world\n fill(0, 255, 0); // Set the fill color to green\n noStroke(); // Remove the stroke for a smoother look\n sphere(ball.size); // Draw the larger sphere\n pop(); // Restore the previous drawing state\n }\n}\n\nfunction keyPressed() {\n if (key === 'w' || key === 'W') {\n turningUp = true; // Start tilting the box upward (pitch)\n } else if (key === 's' || key === 'S') {\n turningDown = true; // Start tilting the box downward (pitch)\n } else if (key === 'a' || key === 'A') {\n turningLeft = true; // Start tilting the box left (yaw)\n } else if (key === 'd' || key === 'D') {\n turningRight = true; // Start tilting the box right (yaw)\n } else if (key === 'q' || key === 'Q') {\n rollingLeft = true; // Start rolling the box left (roll)\n } else if (key === 'e' || key === 'E') {\n rollingRight = true; // Start rolling the box right (roll)\n } else if (key === ' ') {\n movingForward = !movingForward; // Toggle moving the box forward\n }\n}\n\nfunction keyReleased() {\n if (key === 'w' || key === 'W') {\n turningUp = false; // Stop tilting the box upward (pitch)\n } else if (key === 's' || key === 'S') {\n turningDown = false; // Stop tilting the box downward (pitch)\n } else if (key === 'a' || key === 'A') {\n turningLeft = false; // Stop tilting the box left (yaw)\n } else if (key === 'd' || key === 'D') {\n turningRight = false; // Stop tilting the box right (yaw)\n } else if (key === 'q' || key === 'Q') {\n rollingLeft = false; // Stop rolling the box left (roll)\n } else if (key === 'e' || key === 'E') {\n rollingRight = false; // Stop rolling the box right (roll)\n }\n}","style.css":"","index.html":"\n\n\n \n \n Silly Ball Bounce\n \n\n\n \n \n\n"},"chat_history":[{"message":"Let's get started!","project_id":1840,"created_at":"2024-06-11T23:25:39.725329Z","output_tokens":null,"sender":"human","code_id":101230,"deleted":0,"input_tokens":null,"id":50639},{"message":"Great! Let's start by adding a visual element for the ball and making it bounce around the screen. We will use an emoji for the ball.\n\nHere's the updated code to add the ball and make it bounce:\n\n```javascript\nlet ball; // Variable to hold the ball\nlet ballSpeed; // Variable to hold the ball's speed\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight); // Initialize the canvas\n ball = {\n x: width / 2,\n y: height / 2,\n size: 50,\n speedX: 5,\n speedY: 5\n };\n}\n\nfunction draw() {\n background(0); // Clear the background with black color\n\n // Update the ball's position\n ball.x += ball.speedX;\n ball.y += ball.speedY;\n\n // Check for collisions with the edges and bounce\n if (ball.x > width - ball.size / 2 || ball.x < ball.size / 2) {\n ball.speedX *= -1;\n }\n if (ball.y > height - ball.size / 2 || ball.y < ball.size / 2) {\n ball.speedY *= -1;\n }\n\n // Draw the ball\n textSize(ball.size);\n textAlign(CENTER, CENTER);\n text(\"⚽\", ball.x, ball.y);\n}\n```\n\n- Added a `ball` object with properties `x`, `y`, `size`, `speedX`, and `speedY`.\n- Updated `setup` to initialize the ball in the center of the canvas.\n- Updated `draw` to move the ball and check for collisions with the edges of the canvas.\n- Used the soccer ball emoji (\"⚽\") for the visual representation of the ball.\n\nThis code will make the ball bounce around the screen. Let me know if you need any changes or further instructions!","project_id":1840,"created_at":"2024-06-11T23:25:39.731566Z","output_tokens":null,"sender":"ai","code_id":101230,"deleted":0,"input_tokens":null,"id":50640}],"assets":[],"messages_sent":1,"comments":[],"steps":[{"title":"Create a bouncing ball","instruction":"Add a visual element for the main character, the ball, and make it bounce around the screen.","created_at":"2024-06-04T22:52:02.317210","project_id":1840,"complete":false,"step_number":0,"updated_at":"2024-06-11T23:23:46.089277","id":9677},{"title":"Implement user controls","instruction":"Allow the player to control the ball's movement using keyboard input (WASD or arrow keys) and mouse input.","created_at":"2024-06-04T22:52:02.317272","project_id":1840,"complete":false,"step_number":1,"updated_at":"2024-06-11T23:23:46.089412","id":9678},{"title":"Add obstacles and collectibles","instruction":"Introduce obstacles and collectibles for the ball to interact with, affecting the game's dynamics.","created_at":"2024-06-04T22:52:02.317317","project_id":1840,"complete":false,"step_number":2,"updated_at":"2024-06-11T23:23:46.089480","id":9679},{"title":"Scoring system","instruction":"Implement a scoring system that rewards the player for successfully navigating the ball and avoiding obstacles.","created_at":"2024-06-04T22:52:02.317369","project_id":1840,"complete":false,"step_number":3,"updated_at":"2024-06-11T23:23:46.089582","id":9680},{"title":"Dynamic environment","instruction":"Create a visually engaging environment that changes as the game progresses, keeping the player engaged.","created_at":"2024-06-04T22:52:02.317412","project_id":1840,"complete":false,"step_number":4,"updated_at":"2024-06-11T23:23:46.089675","id":9681},{"title":"Audio feedback","instruction":"Incorporate sound effects to provide auditory feedback based on the ball's interactions and gameplay events.","created_at":"2024-06-04T22:52:02.317453","project_id":1840,"complete":false,"step_number":5,"updated_at":"2024-06-11T23:23:46.089767","id":9682},{"title":"Game over screen","instruction":"Display a game over screen with the player's score and an option to restart the game for continuous fun.","created_at":"2024-06-04T22:52:02.317494","project_id":1840,"complete":false,"step_number":6,"updated_at":"2024-06-11T23:23:46.089862","id":9683},{"title":"Responsive design","instruction":"Ensure the game layout and controls are responsive to different screen sizes for a seamless user experience on various devices.","created_at":"2024-06-04T22:52:02.317535","project_id":1840,"complete":false,"step_number":7,"updated_at":"2024-06-11T23:23:46.089965","id":9684}]}