Flappy Bird Clone

{"name":"Flappy Bird Clone","description":null,"photo":null,"view_count":6,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:53:26.919948Z","updated_at":"2025-08-06T08:53:26.919949Z","user_id":246,"status":"DELETED","parent_id":4173,"id":4283,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let score = 0;\n\nlet highScore = 0;\n\nlet obstacles = [];\n\nlet bird;\n\nlet collisionDetected = false;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue color\n bird = new Bird(); // Initialize the bird\n}\n\n\nfunction draw() {\n if (collisionDetected) {\n resetGame();\n collisionDetected = false; // Reset the flag\n }\n\n background(135, 206, 235); // Clear the background each frame\n\n // Add a new obstacle every 100 frames\n if (frameCount % 100 === 0) {\n obstacles.push(new Obstacle());\n }\n\n // Display and update all obstacles\n for (let i = obstacles.length - 1; i >= 0; i--) {\n if (obstacles[i]) { // Check if the obstacle exists\n obstacles[i].display();\n obstacles[i].update();\n\n // Check for collision with the bird\n if (\n (bird.x + bird.size / 2 > obstacles[i].x && bird.x - bird.size / 2 < obstacles[i].x + obstacles[i].width) &&\n (bird.y - bird.size / 2 < obstacles[i].topHeight || bird.y + bird.size / 2 > height - obstacles[i].bottomHeight)\n ) {\n collisionDetected = true; // Set the collision flag\n }\n\n // Remove obstacles that are off-screen\n if (obstacles[i].x + obstacles[i].width < 0) {\n obstacles.splice(i, 1);\n }\n }\n }\n\n bird.display(); // Display the bird\n bird.update(); // Update the bird's position\n\n // Display current score and high score\n fill(0); // Black color for text\n textSize(32);\n text(`Score: ${score}`, 10, 40); // Display the current score\n text(`High Score: ${highScore}`, 10, 80); // Display the high score\n}\n\nclass Bird {\n constructor() {\n this.x = 100; // Starting x position\n this.y = height / 2; // Starting y position\n this.size = 20; // Size of the bird\n this.gravity = 0.4; // Gravity effect\n this.lift = -8; // Lift force when jumping\n this.velocity = 0; // Current velocity\n }\n\n // Draw the bird\n display() {\n fill(255, 223, 0); // Yellow color for bird\n ellipse(this.x, this.y, this.size); // Draw the bird as a circle\n }\n\n // Update the position with gravity\n update() {\n this.velocity += this.gravity; // Apply gravity\n this.y += this.velocity; // Update position\n\n if (this.y > height) {\n this.y = height; // Stop at the bottom\n this.velocity = 0;\n }\n\n if (this.y < 0) {\n this.y = 0; // Stop at the top\n this.velocity = 0;\n }\n }\n\n // Jump when the space bar is pressed\n jump() {\n this.velocity += this.lift; // Apply lift force\n }\n}\n\nclass Obstacle {\n constructor() {\n this.width = 50; // Width of the obstacle\n this.gap = 150; // Gap size between top and bottom obstacles\n this.x = width; // Start at the right edge of the canvas\n this.topHeight = random(100, height - this.gap - 100); // Random height for the top obstacle\n this.bottomHeight = height - this.topHeight - this.gap; // Calculate bottom obstacle height\n this.speed = 3; // Speed of movement\n this.passed = false; // To track if the obstacle has been passed\n }\n\n // Draw the obstacles\n display() {\n fill(34, 139, 34); // Green color for obstacles\n // Draw the top obstacle\n rect(this.x, 0, this.width, this.topHeight);\n // Draw the bottom obstacle\n rect(this.x, height - this.bottomHeight, this.width, this.bottomHeight);\n }\n\n // Update the position of the obstacle\n update() {\n this.x -= this.speed; // Move left\n }\n}\n\nfunction keyPressed() {\n if (key === ' ') { // Space bar\n bird.jump();\n }\n}\n\nfunction resetGame() {\n // Update high score if the current score is greater\n if (score > highScore) {\n highScore = score;\n }\n score = 0; // Reset current score to zero\n obstacles = []; // Clear all obstacles\n bird = new Bird(); // Reset the bird\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Flappy Bird Clone\n \n \n\n\n \n\n"},"chat_history":[{"message":"Let's get started!","project_id":4283,"created_at":"2024-10-30T19:42:16.382999Z","output_tokens":null,"sender":"human","code_id":175439,"deleted":0,"input_tokens":null,"id":85930},{"message":"Great! I see you have a Flappy Bird clone project set up using p5.js. Could you tell me more about what you'd like to add or improve in your project? For example, are you looking to add new features, change the visuals, or perhaps modify the game mechanics? Let me know what you're aiming for!","project_id":4283,"created_at":"2024-10-30T19:42:16.390393Z","output_tokens":null,"sender":"ai","code_id":175439,"deleted":0,"input_tokens":null,"id":85931},{"message":"if I ever hit an obstacle, reset the game from the beginning","project_id":4283,"created_at":"2024-10-30T19:42:28.994645Z","output_tokens":null,"sender":"human","code_id":175441,"deleted":0,"input_tokens":null,"id":85932},{"message":"Certainly! We can reset the game from the beginning whenever the bird hits an obstacle by resetting the score to zero and reinitializing the bird and the obstacles. Let’s update the `resetGame` function to ensure it starts the game from the beginning:\n\n```javascript\nfunction resetGame() {\n // Update high score if the current score is greater\n if (score > highScore) {\n highScore = score;\n }\n score = 0; // Reset current score to zero\n obstacles = []; // Clear all obstacles\n bird = new Bird(); // Reset the bird\n}\n```\n\n- This function will reset the current score to zero.\n- It clears the existing obstacles and reinitializes the bird, effectively restarting the game. \n\nIs there anything else you'd like to modify or add to the game?","project_id":4283,"created_at":"2024-10-30T19:42:29.001987Z","output_tokens":null,"sender":"ai","code_id":175441,"deleted":0,"input_tokens":null,"id":85933},{"message":"ERROR: TypeError: undefined is not an object (evaluating 'obstacles[i].x') at 37:25 in script.js","project_id":4283,"created_at":"2024-10-30T19:42:47.783353Z","output_tokens":null,"sender":"human","code_id":175443,"deleted":0,"input_tokens":null,"id":85934},{"message":"The error you're seeing occurs because the `obstacles` array is being accessed at an index that doesn't exist. This likely happens when an obstacle is removed from the array, but the loop continues to try to access it. \n\nTo fix this, we should ensure that the loop correctly handles the removal of obstacles. Let's update the `draw` function to correctly manage the obstacle removal:\n\n```javascript\nfunction draw() {\n background(135, 206, 235); // Clear the background each frame\n\n // Add a new obstacle every 100 frames\n if (frameCount % 100 === 0) {\n obstacles.push(new Obstacle());\n }\n\n // Display and update all obstacles\n for (let i = obstacles.length - 1; i >= 0; i--) {\n if (obstacles[i]) { // Check if the obstacle exists\n obstacles[i].display();\n obstacles[i].update();\n\n // Check for collision with the bird\n if (\n (bird.x + bird.size / 2 > obstacles[i].x && bird.x - bird.size / 2 < obstacles[i].x + obstacles[i].width) &&\n (bird.y - bird.size / 2 < obstacles[i].topHeight || bird.y + bird.size / 2 > height - obstacles[i].bottomHeight)\n ) {\n resetGame(); // Restart the game on collision\n }\n\n // Remove obstacles that are off-screen\n if (obstacles[i].x + obstacles[i].width < 0) {\n obstacles.splice(i, 1);\n }\n }\n }\n\n bird.display(); // Display the bird\n bird.update(); // Update the bird's position\n\n // Display current score and high score\n fill(0); // Black color for text\n textSize(32);\n text(`Score: ${score}`, 10, 40); // Display the current score\n text(`High Score: ${highScore}`, 10, 80); // Display the high score\n}\n```\n\n- We added a check to ensure `obstacles[i]` exists before trying to access its properties.\n- This prevents errors from trying to access a non-existing obstacle after one has been removed.\n\nLet me know if you need further assistance or if you'd like to add more features!","project_id":4283,"created_at":"2024-10-30T19:42:47.789886Z","output_tokens":null,"sender":"ai","code_id":175443,"deleted":0,"input_tokens":null,"id":85935},{"message":"ERROR: TypeError: undefined is not an object (evaluating 'obstacles[i].x') at 38:29 in script.js error when resetting game","project_id":4283,"created_at":"2024-10-30T19:43:19.942364Z","output_tokens":null,"sender":"human","code_id":175446,"deleted":0,"input_tokens":null,"id":85936},{"message":"The error you're encountering happens because the `obstacles` array is being accessed while it is being cleared in the `resetGame` function. This can be resolved by ensuring that the game logic doesn't attempt to access the obstacles immediately after they are reset. A simple way to achieve this is to ensure the `resetGame` logic is completed before returning to the draw loop. Let's update the collision detection logic to prevent this error.\n\nHere's an updated approach:\n\n1. We'll set a flag to indicate that a collision has occurred.\n2. We'll reset the game at the start of the `draw` function if a collision was detected.\n\nLet's modify the code to implement this approach:\n\n```javascript\nlet collisionDetected = false; // Flag to indicate collision\n\nfunction draw() {\n if (collisionDetected) {\n resetGame();\n collisionDetected = false; // Reset the flag\n }\n\n background(135, 206, 235); // Clear the background each frame\n\n // Add a new obstacle every 100 frames\n if (frameCount % 100 === 0) {\n obstacles.push(new Obstacle());\n }\n\n // Display and update all obstacles\n for (let i = obstacles.length - 1; i >= 0; i--) {\n if (obstacles[i]) { // Check if the obstacle exists\n obstacles[i].display();\n obstacles[i].update();\n\n // Check for collision with the bird\n if (\n (bird.x + bird.size / 2 > obstacles[i].x && bird.x - bird.size / 2 < obstacles[i].x + obstacles[i].width) &&\n (bird.y - bird.size / 2 < obstacles[i].topHeight || bird.y + bird.size / 2 > height - obstacles[i].bottomHeight)\n ) {\n collisionDetected = true; // Set the collision flag\n }\n\n // Remove obstacles that are off-screen\n if (obstacles[i].x + obstacles[i].width < 0) {\n obstacles.splice(i, 1);\n }\n }\n }\n\n bird.display(); // Display the bird\n bird.update(); // Update the bird's position\n\n // Display current score and high score\n fill(0); // Black color for text\n textSize(32);\n text(`Score: ${score}`, 10, 40); // Display the current score\n text(`High Score: ${highScore}`, 10, 80); // Display the high score\n}\n```\n\n- We introduced a `collisionDetected` flag to indicate when a collision occurs.\n- The `resetGame` function is called only at the start of the `draw` function if a collision is detected.\n- This way, the game is reset cleanly without accessing undefined objects.\n\nLet me know if you need further assistance or if you'd like to add more features!","project_id":4283,"created_at":"2024-10-30T19:43:19.986985Z","output_tokens":null,"sender":"ai","code_id":175446,"deleted":0,"input_tokens":null,"id":85937}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}