Math Blaster: Asteroid Attack

{"name":"Math Blaster: Asteroid Attack","description":"Engage in a mathematical space adventure! Plot linear equations to blast asteroids and save your spaceship from destruction in 'Math Blaster: Asteroid Attack'!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/msomq6x52trjolv98efs","view_count":75,"fork_count":2,"expires_at":null,"created_at":"2024-03-28T17:34:49.352486Z","updated_at":"2024-03-28T21:19:54.796652Z","user_id":7,"status":"PUBLIC","parent_id":null,"id":951,"user":{"photo":null,"email":"ethanjelzer@gmail.com","recess_id":"e1eeaa50-7dab-c930-3cfc-58e768624b88","created_at":"2023-12-12T14:03:59.340917Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"astrogoose18","id":7,"password_hash":"$2b$12$vP3qRABi/7OSTVJVnQLnt.PMLKDSvfUTL4Y9mCa2gjm9mZzjSXPi2","updated_at":"2023-12-12T14:03:59.340920Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let spaceshipImage;\nlet asteroidImage;\nlet asteroidX, asteroidY; // Variables to hold the asteroid's position\nlet gridUnit; // Variable to hold the size of one grid unit\nlet horizontalMargin, verticalMargin; // Variables to hold the margins for centering the grid\nlet currentM = null; // Global variable to store the current slope\nlet laserEndPointX = null; // Track the current endpoint of the laser (X coordinate)\nlet laserEndPointY = null; // Track the current endpoint of the laser (Y coordinate)\nlet laserAnimating = false; // Flag to track if the laser is currently animating\n\nfunction preload() {\n spaceshipImage = loadImage('@asset(\"ship\")'); // Using @asset to ensure correct path\n asteroidImage = loadImage('@asset(\"astroid\")'); // Using @asset to ensure correct path\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight - 40);\n background(0);\n\n let minDimension = min(windowWidth, windowHeight - 40);\n let gridSize = minDimension - (minDimension % 20);\n gridUnit = gridSize / 20;\n\n horizontalMargin = (windowWidth - gridSize) / 2;\n verticalMargin = ((windowHeight - 40) - gridSize) / 2;\n\n asteroidX = horizontalMargin + Math.floor(random(0, 20)) * gridUnit;\n asteroidY = verticalMargin + Math.floor(random(0, 20)) * gridUnit;\n}\n\nfunction draw() {\n drawGrid();\n drawSpaceship();\n drawAsteroid();\n\n if (currentM !== null && laserAnimating) {\n extendLaserTowardsAsteroid();\n }\n}\n\nfunction drawGrid() {\n background(0);\n translate(horizontalMargin, verticalMargin);\n\n stroke(255, 255, 255, 100);\n for (let x = 0; x <= 20 * gridUnit; x += gridUnit) {\n line(x, 0, x, 20 * gridUnit);\n }\n for (let y = 0; y <= 20 * gridUnit; y += gridUnit) {\n line(0, y, 20 * gridUnit, y);\n }\n\n stroke(255, 0, 0);\n strokeWeight(2);\n line(10 * gridUnit, 0, 10 * gridUnit, 20 * gridUnit);\n line(0, 10 * gridUnit, 20 * gridUnit, 10 * gridUnit);\n strokeWeight(1);\n\n translate(-horizontalMargin, -verticalMargin);\n}\n\nfunction drawSpaceship() {\n let spaceshipX = horizontalMargin + 10 * gridUnit;\n let spaceshipY = verticalMargin + 10 * gridUnit;\n imageMode(CENTER);\n image(spaceshipImage, spaceshipX, spaceshipY, 50, 50);\n}\n\nfunction drawAsteroid() {\n imageMode(CENTER);\n image(asteroidImage, asteroidX, asteroidY, 25, 25);\n}\n\nfunction checkEquation() {\n let equation = document.getElementById(\"equationInput\").value;\n let parts = equation.match(/y\\s*=\\s*([-]?(\\d+\\/\\d+|\\d+\\.\\d+|\\d+|\\d*))\\s*x\\s*(?:\\+\\s*([-]?(\\d+\\/\\d+|\\d+\\.\\d+|\\d+)))?/);\n if (parts) {\n let m = parts[1].includes('/') ? eval(parts[1]) : parseFloat(parts[1] || \"1\"); // Default slope to 1 if omitted\n currentM = m;\n laserAnimating = true; // Start animating the laser\n laserEndPointX = horizontalMargin + 10 * gridUnit; // Reset the laser endpoint to the spaceship's position\n laserEndPointY = verticalMargin + 10 * gridUnit; // Also reset the Y coordinate\n } else {\n console.error(\"Invalid equation format. Please use 'y=mx+b' or 'y=mx'.\");\n }\n}\n\nfunction extendLaserTowardsAsteroid() {\n if (!laserAnimating) return;\n\n let speed = 5; // Control the speed of the laser animation\n let spaceshipX = horizontalMargin + 10 * gridUnit;\n let spaceshipY = verticalMargin + 10 * gridUnit;\n\n if (asteroidY < spaceshipY) {\n laserEndPointY -= speed; // Move up\n } else {\n laserEndPointY += speed; // Move down\n }\n\n if (currentM !== 0) { // Avoid division by zero for horizontal lines\n laserEndPointX = ((laserEndPointY - spaceshipY) / currentM) + spaceshipX;\n }\n\n stroke(255, 0, 0); // Laser color\n strokeWeight(4); // Laser thickness\n line(spaceshipX, spaceshipY, laserEndPointX, laserEndPointY);\n\n // Check if the laser has hit the asteroid\n if (dist(laserEndPointX, laserEndPointY, asteroidX, asteroidY) < 25) {\n laserAnimating = false; // Stop animating the laser\n explodeAsteroid(asteroidX, asteroidY); // Explode the asteroid\n spawnNewAsteroid(); // Spawn a new asteroid\n }\n}\nfunction explodeAsteroid(x, y) {\n for (let i = 0; i < 50; i++) {\n let angle = random(TWO_PI);\n let speed = random(2, 5);\n let dx = cos(angle) * speed;\n let dy = sin(angle) * speed;\n stroke(150); // Gray particles\n strokeWeight(4);\n point(x + dx, y + dy);\n }\n}\n\nfunction spawnNewAsteroid() {\n asteroidX = horizontalMargin + Math.floor(random(0, 20)) * gridUnit;\n asteroidY = verticalMargin + Math.floor(random(0, 20)) * gridUnit;\n}","style.css":"","index.html":"\n\n\n \n \n Math Blaster: Asteroid Attack\n \n\n\n \n \n \n\n"},"chat_history":[{"project_id":951,"sender":"human","message":"make it so when you hit with the line/lazar the astroid it spews out gray particals and spawns a new astroid to shoot.","deleted":0,"created_at":"2024-03-28T21:07:06.610145Z","output_tokens":null,"code_id":57517,"input_tokens":null,"id":31818},{"project_id":951,"sender":"ai","message":"```javascript\nfunction extendLaserTowardsAsteroid() {\n if (!laserAnimating) return;\n\n let speed = 5; // Control the speed of the laser animation\n let spaceshipX = horizontalMargin + 10 * gridUnit;\n let spaceshipY = verticalMargin + 10 * gridUnit;\n\n if (asteroidY < spaceshipY) {\n laserEndPointY -= speed; // Move up\n } else {\n laserEndPointY += speed; // Move down\n }\n\n if (currentM !== 0) { // Avoid division by zero for horizontal lines\n laserEndPointX = ((laserEndPointY - spaceshipY) / currentM) + spaceshipX;\n }\n\n stroke(255, 0, 0); // Laser color\n strokeWeight(4); // Laser thickness\n line(spaceshipX, spaceshipY, laserEndPointX, laserEndPointY);\n\n // Check if the laser has hit the asteroid\n if (dist(laserEndPointX, laserEndPointY, asteroidX, asteroidY) < 25) {\n laserAnimating = false; // Stop animating the laser\n explodeAsteroid(asteroidX, asteroidY); // Explode the asteroid\n spawnNewAsteroid(); // Spawn a new asteroid\n }\n}\n\nfunction explodeAsteroid(x, y) {\n for (let i = 0; i < 50; i++) {\n let angle = random(TWO_PI);\n let speed = random(2, 5);\n let dx = cos(angle) * speed;\n let dy = sin(angle) * speed;\n stroke(150); // Gray particles\n strokeWeight(4);\n point(x + dx, y + dy);\n }\n}\n\nfunction spawnNewAsteroid() {\n asteroidX = horizontalMargin + Math.floor(random(0, 20)) * gridUnit;\n asteroidY = verticalMargin + Math.floor(random(0, 20)) * gridUnit;\n}\n```\n\n- The function `extendLaserTowardsAsteroid()` now checks if the laser has hit the asteroid by calculating the distance between the laser endpoint and the asteroid. If the laser hits, it stops the animation, explodes the asteroid, and spawns a new one.\n- The `explodeAsteroid(x, y)` function creates a visual effect by drawing 50 gray particles shooting out from the asteroid's position. It uses random angles and speeds to spread the particles.\n- `spawnNewAsteroid()` sets new random coordinates for the asteroid, effectively \"spawning\" a new one on the grid for the player to target next.","deleted":0,"created_at":"2024-03-28T21:07:06.617400Z","output_tokens":null,"code_id":57517,"input_tokens":null,"id":31819},{"project_id":951,"sender":"human","message":"full js file whith those edits all filled out","deleted":0,"created_at":"2024-03-28T21:08:00.709845Z","output_tokens":null,"code_id":57518,"input_tokens":null,"id":31820},{"project_id":951,"sender":"ai","message":"```javascript\nlet spaceshipImage;\nlet asteroidImage;\nlet asteroidX, asteroidY; // Variables to hold the asteroid's position\nlet gridUnit; // Variable to hold the size of one grid unit\nlet horizontalMargin, verticalMargin; // Variables to hold the margins for centering the grid\nlet currentM = null; // Global variable to store the current slope\nlet laserEndPointX = null; // Track the current endpoint of the laser (X coordinate)\nlet laserEndPointY = null; // Track the current endpoint of the laser (Y coordinate)\nlet laserAnimating = false; // Flag to track if the laser is currently animating\n\nfunction preload() {\n spaceshipImage = loadImage('@asset(\"ship\")'); // Using @asset to ensure correct path\n asteroidImage = loadImage('@asset(\"astroid\")'); // Using @asset to ensure correct path\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight - 40);\n background(0);\n\n let minDimension = min(windowWidth, windowHeight - 40);\n let gridSize = minDimension - (minDimension % 20);\n gridUnit = gridSize / 20;\n\n horizontalMargin = (windowWidth - gridSize) / 2;\n verticalMargin = ((windowHeight - 40) - gridSize) / 2;\n\n asteroidX = horizontalMargin + Math.floor(random(0, 20)) * gridUnit;\n asteroidY = verticalMargin + Math.floor(random(0, 20)) * gridUnit;\n}\n\nfunction draw() {\n drawGrid();\n drawSpaceship();\n drawAsteroid();\n\n if (currentM !== null && laserAnimating) {\n extendLaserTowardsAsteroid();\n }\n}\n\nfunction drawGrid() {\n background(0);\n translate(horizontalMargin, verticalMargin);\n\n stroke(255, 255, 255, 100);\n for (let x = 0; x <= 20 * gridUnit; x += gridUnit) {\n line(x, 0, x, 20 * gridUnit);\n }\n for (let y = 0; y <= 20 * gridUnit; y += gridUnit) {\n line(0, y, 20 * gridUnit, y);\n }\n\n stroke(255, 0, 0);\n strokeWeight(2);\n line(10 * gridUnit, 0, 10 * gridUnit, 20 * gridUnit);\n line(0, 10 * gridUnit, 20 * gridUnit, 10 * gridUnit);\n strokeWeight(1);\n\n translate(-horizontalMargin, -verticalMargin);\n}\n\nfunction drawSpaceship() {\n let spaceshipX = horizontalMargin + 10 * gridUnit;\n let spaceshipY = verticalMargin + 10 * gridUnit;\n imageMode(CENTER);\n image(spaceshipImage, spaceshipX, spaceshipY, 50, 50);\n}\n\nfunction drawAsteroid() {\n imageMode(CENTER);\n image(asteroidImage, asteroidX, asteroidY, 25, 25);\n}\n\nfunction checkEquation() {\n let equation = document.getElementById(\"equationInput\").value;\n let parts = equation.match(/y\\s*=\\s*([-]?(\\d+\\/\\d+|\\d+\\.\\d+|\\d+|\\d*))\\s*x\\s*(?:\\+\\s*([-]?(\\d+\\/\\d+|\\d+\\.\\d+|\\d+)))?/);\n if (parts) {\n let m = parts[1].includes('/') ? eval(parts[1]) : parseFloat(parts[1] || \"1\"); // Default slope to 1 if omitted\n currentM = m;\n laserAnimating = true; // Start animating the laser\n laserEndPointX = horizontalMargin + 10 * gridUnit; // Reset the laser endpoint to the spaceship's position\n laserEndPointY = verticalMargin + 10 * gridUnit; // Also reset the Y coordinate\n } else {\n console.error(\"Invalid equation format. Please use 'y=mx+b' or 'y=mx'.\");\n }\n}\n\nfunction extendLaserTowardsAsteroid() {\n if (!laserAnimating) return;\n\n let speed = 5; // Control the speed of the laser animation\n let spaceshipX = horizontalMargin + 10 * gridUnit;\n let spaceshipY = verticalMargin + 10 * gridUnit;\n\n if (asteroidY < spaceshipY) {\n laserEndPointY -= speed; // Move up\n } else {\n laserEndPointY += speed; // Move down\n }\n\n if (currentM !== 0) { // Avoid division by zero for horizontal lines\n laserEndPointX = ((laserEndPointY - spaceshipY) / currentM) + spaceshipX;\n }\n\n stroke(255, 0, 0); // Laser color\n strokeWeight(4); // Laser thickness\n line(spaceshipX, spaceshipY, laserEndPointX, laserEndPointY);\n\n // Check if the laser has hit the asteroid\n if (dist(laserEndPointX, laserEndPointY, asteroidX, asteroidY) < 25) {\n laserAnimating = false; // Stop animating the laser\n explodeAsteroid(asteroidX, asteroidY); // Explode the asteroid\n spawnNewAsteroid(); // Spawn a new asteroid\n }\n}\n\nfunction explodeAsteroid(x, y) {\n for (let i = 0; i < 50; i++) {\n let angle = random(TWO_PI);\n let speed = random(2, 5);\n let dx = cos(angle) * speed;\n let dy = sin(angle) * speed;\n stroke(150); // Gray particles\n strokeWeight(4);\n point(x + dx, y + dy);\n }\n}\n\nfunction spawnNewAsteroid() {\n asteroidX = horizontalMargin + Math.floor(random(0, 20)) * gridUnit;\n asteroidY = verticalMargin + Math.floor(random(0, 20)) * gridUnit;\n}\n```","deleted":0,"created_at":"2024-03-28T21:08:00.715945Z","output_tokens":null,"code_id":57518,"input_tokens":null,"id":31821},{"project_id":951,"sender":"human","message":"k just need the particals","deleted":0,"created_at":"2024-03-28T21:11:03.323600Z","output_tokens":null,"code_id":57520,"input_tokens":null,"id":31822},{"project_id":951,"sender":"ai","message":"```javascript\nfunction explodeAsteroid(x, y) {\n for (let i = 0; i < 50; i++) {\n let angle = random(TWO_PI);\n let speed = random(2, 5);\n let dx = cos(angle) * speed;\n let dy = sin(angle) * speed;\n stroke(150); // Gray particles\n strokeWeight(4);\n point(x + dx, y + dy);\n }\n}\n```\n\n- The `explodeAsteroid(x, y)` function generates a visual explosion effect at the asteroid's location.\n- It creates 50 particles that move away from the asteroid's center in all directions. This effect is achieved by using random angles and speeds for each particle.\n- The particles are drawn as gray points (`stroke(150)`) on the canvas, making it appear as if the asteroid is disintegrating into space dust.","deleted":0,"created_at":"2024-03-28T21:11:03.330107Z","output_tokens":null,"code_id":57520,"input_tokens":null,"id":31823},{"project_id":951,"sender":"human","message":"make the negative signs acurate","deleted":0,"created_at":"2024-03-28T21:16:41.223494Z","output_tokens":null,"code_id":57522,"input_tokens":null,"id":31824},{"project_id":951,"sender":"ai","message":"To ensure accurate handling of negative signs in your equation parsing, you can adjust the `checkEquation` function in your JavaScript file. Let's refine the regular expression to accurately capture negative slopes (`m`) and y-intercepts (`b`) in the linear equations. This improvement will make sure that equations with negative values are correctly interpreted and processed.\n\n```javascript\nfunction checkEquation() {\n let equation = document.getElementById(\"equationInput\").value;\n // Updated regex to accurately capture negative slopes and y-intercepts\n let parts = equation.match(/y\\s*=\\s*([-+]?\\d*\\.?\\d+)(?:\\/\\d+)?\\s*x\\s*([-+]\\s*\\d*\\.?\\d+(?:\\/\\d+)?)?/);\n if (parts) {\n let m = parts[1].includes('/') ? eval(parts[1].replace(/\\s/g, \"\")) : parseFloat(parts[1]); // Handle fractions and remove spaces\n let b = parts[2] ? eval(parts[2].replace(/\\s/g, \"\")) : 0; // Handle y-intercept, default to 0 if omitted\n currentM = m;\n // Start animating the laser with adjusted for y-intercept\n laserAnimating = true;\n laserEndPointX = horizontalMargin + 10 * gridUnit; // Reset the laser endpoint to the spaceship's position\n laserEndPointY = (verticalMargin + 10 * gridUnit) - (m * 10 * gridUnit) - (b * gridUnit); // Adjust for slope and y-intercept\n } else {\n console.error(\"Invalid equation format. Please use 'y=mx+b' or 'y=mx'.\");\n }\n}\n```\n\n- This updated version of the `checkEquation` function uses a refined regular expression to more accurately capture both positive and negative values for the slope (`m`) and y-intercept (`b`). \n- It handles fractions for both the slope and y-intercept by replacing spaces and evaluating the expression.\n- The `laserEndPointY` calculation now also accounts for the y-intercept, enabling the laser to start from the correct position based on the entered equation.\n- This change ensures that the game accurately interprets and animates lasers for equations with negative slopes or y-intercepts, enhancing gameplay accuracy.","deleted":0,"created_at":"2024-03-28T21:16:41.230146Z","output_tokens":null,"code_id":57522,"input_tokens":null,"id":31825}],"assets":[{"cloudinary_id":"gmddwxeyxtfuwlxqlooq","name":"astroid","deleted":false,"id":2544,"created_at":"2024-03-28T18:46:07.326456Z","project_id":951,"resource_type":"image"},{"cloudinary_id":"heia9ikqhd76rxfjozdg","name":"ship","deleted":false,"id":2543,"created_at":"2024-03-28T17:35:43.226690Z","project_id":951,"resource_type":"image"}],"messages_sent":56,"comments":[{"content":"it doesn't accept negative slopes","id":1069,"user_id":414,"user":{"photo":null,"email":"behrhorst.tutoring@gmail.com","recess_id":null,"created_at":"2025-03-11T19:37:03.391989Z","reset_token":null,"stripe_customer_id":"cus_RvPTcjWa9zESO8","seats":0,"username":"sbehrho","id":414,"password_hash":"$2b$12$uMvSliTo7BxGfk2ZGQDyuO38ruZVaRf/3H3v1tqEWDHuG92Q94VtK","updated_at":"2025-03-11T19:37:03.391995Z","reset_token_expiry":null,"subscription_status":"trialing"},"project_id":951,"created_at":"2025-03-11T20:02:30.656015Z","updated_at":"2025-03-11T20:02:30.656017Z"}],"steps":[{"instruction":"Display the spaceship at the (0,0) coordinate on the grid.","title":"Spaceship Visual","created_at":"2024-03-28T17:34:49.358639","project_id":951,"complete":true,"step_number":0,"updated_at":"2024-03-28T17:34:49.358641","id":4836},{"instruction":"Generate and display the asteroid at a random point on the grid.","title":"Asteroid Visual","created_at":"2024-03-28T17:34:49.358700","project_id":951,"complete":true,"step_number":1,"updated_at":"2024-03-28T17:34:49.358701","id":4837},{"instruction":"Implement a method for players to input linear equations to shoot the asteroid.","title":"Player Input for Equations","created_at":"2024-03-28T17:34:49.358744","project_id":951,"complete":true,"step_number":2,"updated_at":"2024-03-28T17:34:49.358744","id":4838},{"instruction":"Check if the inputted equation passes through the asteroid point and update the game accordingly.","title":"Asteroid Shooting Logic","created_at":"2024-03-28T17:34:49.358791","project_id":951,"complete":true,"step_number":3,"updated_at":"2024-03-28T17:34:49.358792","id":4839},{"instruction":"When the asteroid is successfully shot, move it to a new random spot on the grid.","title":"Asteroid Movement","created_at":"2024-03-28T17:34:49.358855","project_id":951,"complete":false,"step_number":4,"updated_at":"2024-03-28T17:34:49.358856","id":4840},{"instruction":"Add visual effects for shooting the asteroid to enhance the game experience.","title":"Visual Effects for Shooting","created_at":"2024-03-28T17:34:49.358898","project_id":951,"complete":false,"step_number":5,"updated_at":"2024-03-28T17:34:49.358899","id":4841},{"instruction":"Provide feedback for correct and incorrect equations to enhance the learning experience.","title":"Feedback for Equations","created_at":"2024-03-28T17:34:49.358938","project_id":951,"complete":false,"step_number":6,"updated_at":"2024-03-28T17:34:49.358939","id":4842}]}

Equation Input